diff --git a/.changeset/empty-hairs-tie.md b/.changeset/empty-hairs-tie.md
new file mode 100644
index 00000000000..906bfc37e9a
--- /dev/null
+++ b/.changeset/empty-hairs-tie.md
@@ -0,0 +1,12 @@
+---
+'@razorpay/blade': major
+---
+
+feat: revamp Blade with brand refresh changes
+
+> [!WARNING]
+>
+> Breaking Change!
+> This is a breaking change for all components in the library.
+>
+> Refer the [detailed v11 upgrade guide](https://github.com/razorpay/blade/blob/master/packages/blade/upgrade-v11.md) that contains instructions on how to use codemods for auto-upgrade along with manual steps if required
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 00000000000..e0aea699366
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,21 @@
+## Description
+
+<!-- Briefly explain the purpose of your PR -->
+
+## Changes
+
+<!-- List the specific changes made, consider adding screenshots if relevant -->
+
+## Additional Information
+
+<!-- Include any relevant details, links to issues, or additional messages -->
+
+## Component Checklist
+
+<!-- Ensure that the following tasks are completed before submitting your PR. Tick the applicable boxes -->
+
+- [ ] Update Component Status Page
+- [ ] Perform Manual Testing in Other Browsers
+- [ ] Add KitchenSink Story
+- [ ] Add Interaction Tests (if applicable)
+- [ ] Add changeset
diff --git a/package.json b/package.json
index 9023c41e4af..9aa4debec55 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
   "workspaces": {
     "packages": [
       "packages/blade",
-      "packages/razorsharp",
       "packages/eslint-plugin-blade"
     ],
     "nohoist": [
diff --git a/packages/blade-coverage-extension/src/App.tsx b/packages/blade-coverage-extension/src/App.tsx
index cb50f5ee0e9..ba3ca0fb239 100644
--- a/packages/blade-coverage-extension/src/App.tsx
+++ b/packages/blade-coverage-extension/src/App.tsx
@@ -13,12 +13,9 @@ import {
   Text,
   Checkbox,
 } from '@razorpay/blade/components';
-import { paymentTheme } from '@razorpay/blade/tokens';
+import { bladeTheme } from '@razorpay/blade/tokens';
 import styled from 'styled-components';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/400-italic.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/700-italic.css';
+import '@razorpay/blade/fonts.css';
 import BarChartImg from './bar-chart.png';
 import { useMediaQuery } from './useMediaQuery';
 
@@ -55,7 +52,7 @@ const App = (): ReactElement => {
     },
   );
   return (
-    <BladeProvider themeTokens={paymentTheme} colorScheme={isDarkMode ? 'dark' : 'light'}>
+    <BladeProvider themeTokens={bladeTheme} colorScheme={isDarkMode ? 'dark' : 'light'}>
       <Box height="312px" width="500px">
         <Card elevation="lowRaised" padding="spacing.7" surfaceLevel={2}>
           <CardBody>
diff --git a/packages/blade-coverage-extension/src/index.css b/packages/blade-coverage-extension/src/index.css
index ec2585e8c0b..d5f7eb27939 100644
--- a/packages/blade-coverage-extension/src/index.css
+++ b/packages/blade-coverage-extension/src/index.css
@@ -3,8 +3,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 code {
diff --git a/packages/blade/.storybook/react-native/Storybook.tsx b/packages/blade/.storybook/react-native/Storybook.tsx
index c7764e99f92..24963928df2 100644
--- a/packages/blade/.storybook/react-native/Storybook.tsx
+++ b/packages/blade/.storybook/react-native/Storybook.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { AppRegistry } from 'react-native';
 import { getStorybookUI } from '@storybook/react-native';
 import { BladeProvider } from '../../src/components/BladeProvider';
-import { paymentTheme } from '../../src/tokens/theme';
+import { bladeTheme } from '../../src/tokens/theme';
 import './storybook.requires';
 
 import { name as appName } from '../../app.json';
@@ -12,21 +12,21 @@ const App = (): React.ReactElement => {
   const Storybook = getStorybookUI({
     shouldPersistSelection: true,
     // keeping in comments becuase this is not documented properly in the docs
-    // theme: {
-    //   backgroundColor: 'white',
-    //   headerTextColor: 'black',
-    //   labelColor: 'black',
-    //   borderColor: '#e6e6e6',
-    //   previewBorderColor: '#b3b3b3',
-    //   buttonTextColor: '#999999',
-    //   buttonActiveTextColor: '#444444',
-    // },
+    theme: {
+      backgroundColor: bladeTheme.colors.onLight.surface.background.gray.subtle,
+      // headerTextColor: 'black',
+      // labelColor: 'black',
+      // borderColor: '#e6e6e6',
+      // previewBorderColor: '#b3b3b3',
+      // buttonTextColor: '#999999',
+      // buttonActiveTextColor: '#444444',
+    },
   });
 
   return (
     <BladeProvider
       // key={`${context.globals.themeTokens}-${context.globals.colorScheme}`}
-      themeTokens={paymentTheme}
+      themeTokens={bladeTheme}
     >
       <Storybook />
     </BladeProvider>
diff --git a/packages/blade/.storybook/react-native/main.tsx b/packages/blade/.storybook/react-native/main.tsx
index f9ddcc7e707..872f4fea6d9 100644
--- a/packages/blade/.storybook/react-native/main.tsx
+++ b/packages/blade/.storybook/react-native/main.tsx
@@ -1,6 +1,6 @@
 module.exports = {
   stories: [
-    '../../src/**/!(_KitchenSink)*.stories.?(ts|tsx|js|jsx)',
+    '../../src/**/!(_KitchenSink|*.test)*.stories.?(ts|tsx|js|jsx)',
     '../../src/**/*.stories.internal.?(ts|tsx|js|jsx)',
   ],
   addons: [
diff --git a/packages/blade/.storybook/react-native/storybook.requires.js b/packages/blade/.storybook/react-native/storybook.requires.js
index 343e22a6532..887025e7040 100644
--- a/packages/blade/.storybook/react-native/storybook.requires.js
+++ b/packages/blade/.storybook/react-native/storybook.requires.js
@@ -1,37 +1,32 @@
 /* do not change this file, it is auto generated by storybook. */
 
-import {
-  configure,
-  addDecorator,
-  addParameters,
-  addArgsEnhancer,
-} from "@storybook/react-native";
+import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
 
 global.STORIES = [
   {
-    titlePrefix: "",
-    directory: "./src",
-    files: "**/!(_KitchenSink)*.stories.?(ts|tsx|js|jsx)",
+    titlePrefix: '',
+    directory: './src',
+    files: '**/!(_KitchenSink|*.test)*.stories.?(ts|tsx|js|jsx)',
     importPathMatcher:
-      "^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?:(?!(?:_KitchenSink))[^/]*?)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+      '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?:(?!(?:_KitchenSink|[^/]*?\\.test))[^/]*?)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
   },
   {
-    titlePrefix: "",
-    directory: "./src",
-    files: "**/*.stories.internal.?(ts|tsx|js|jsx)",
+    titlePrefix: '',
+    directory: './src',
+    files: '**/*.stories.internal.?(ts|tsx|js|jsx)',
     importPathMatcher:
-      "^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.internal\\.(?:ts|tsx|js|jsx)?)$",
+      '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.internal\\.(?:ts|tsx|js|jsx)?)$',
   },
 ];
 
-import "@storybook/addon-ondevice-notes/register";
-import "@storybook/addon-ondevice-controls/register";
-import "@storybook/addon-ondevice-backgrounds/register";
-import "@storybook/addon-ondevice-actions/register";
+import '@storybook/addon-ondevice-notes/register';
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-backgrounds/register';
+import '@storybook/addon-ondevice-actions/register';
 
-import { argsEnhancers } from "@storybook/addon-actions/dist/preview";
+import { argsEnhancers } from '@storybook/addon-actions/dist/preview';
 
-import { decorators, parameters } from "./preview";
+import { decorators, parameters } from './preview';
 
 if (decorators) {
   decorators.forEach((decorator) => addDecorator(decorator));
@@ -47,83 +42,82 @@ try {
 
 const getStories = () => {
   return {
-    "./src/components/Accordion/Accordion.stories.tsx": require("../../src/components/Accordion/Accordion.stories.tsx"),
-    "./src/components/ActionList/ActionList.stories.tsx": require("../../src/components/ActionList/ActionList.stories.tsx"),
-    "./src/components/Alert/Alert.stories.tsx": require("../../src/components/Alert/Alert.stories.tsx"),
-    "./src/components/Amount/Amount.stories.tsx": require("../../src/components/Amount/Amount.stories.tsx"),
-    "./src/components/Badge/Badge.stories.tsx": require("../../src/components/Badge/Badge.stories.tsx"),
-    "./src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx": require("../../src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx"),
-    "./src/components/BottomSheet/BottomSheet.stories.tsx": require("../../src/components/BottomSheet/BottomSheet.stories.tsx"),
-    "./src/components/Box/BaseBox/BaseBox.internal.stories.tsx": require("../../src/components/Box/BaseBox/BaseBox.internal.stories.tsx"),
-    "./src/components/Box/Box.stories.tsx": require("../../src/components/Box/Box.stories.tsx"),
-    "./src/components/Box/styledProps/StyledProps.stories.tsx": require("../../src/components/Box/styledProps/StyledProps.stories.tsx"),
-    "./src/components/Button/BaseButton/BaseButton.internal.stories.tsx": require("../../src/components/Button/BaseButton/BaseButton.internal.stories.tsx"),
-    "./src/components/Button/Button/Button.stories.tsx": require("../../src/components/Button/Button/Button.stories.tsx"),
-    "./src/components/Button/IconButton/IconButton.stories.tsx": require("../../src/components/Button/IconButton/IconButton.stories.tsx"),
-    "./src/components/Card/Card.stories.tsx": require("../../src/components/Card/Card.stories.tsx"),
-    "./src/components/Card/CardInteractive.stories.tsx": require("../../src/components/Card/CardInteractive.stories.tsx"),
-    "./src/components/Carousel/Carousel.stories.tsx": require("../../src/components/Carousel/Carousel.stories.tsx"),
-    "./src/components/Checkbox/Checkbox.stories.tsx": require("../../src/components/Checkbox/Checkbox.stories.tsx"),
-    "./src/components/Checkbox/CheckboxGroup.stories.tsx": require("../../src/components/Checkbox/CheckboxGroup.stories.tsx"),
-    "./src/components/Chip/Chip.stories.tsx": require("../../src/components/Chip/Chip.stories.tsx"),
-    "./src/components/Chip/ChipGroup.stories.tsx": require("../../src/components/Chip/ChipGroup.stories.tsx"),
-    "./src/components/Collapsible/Collapsible.stories.tsx": require("../../src/components/Collapsible/Collapsible.stories.tsx"),
-    "./src/components/Counter/Counter.stories.tsx": require("../../src/components/Counter/Counter.stories.tsx"),
-    "./src/components/Divider/Divider.stories.tsx": require("../../src/components/Divider/Divider.stories.tsx"),
-    "./src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx": require("../../src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx"),
-    "./src/components/Dropdown/docs/DropdownWithButton.stories.tsx": require("../../src/components/Dropdown/docs/DropdownWithButton.stories.tsx"),
-    "./src/components/Dropdown/docs/DropdownWithSelect.stories.tsx": require("../../src/components/Dropdown/docs/DropdownWithSelect.stories.tsx"),
-    "./src/components/Icons/Icons.stories.tsx": require("../../src/components/Icons/Icons.stories.tsx"),
-    "./src/components/Indicator/Indicator.stories.tsx": require("../../src/components/Indicator/Indicator.stories.tsx"),
-    "./src/components/Input/BaseInput/BaseInput.stories.tsx": require("../../src/components/Input/BaseInput/BaseInput.stories.tsx"),
-    "./src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx": require("../../src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx"),
-    "./src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx": require("../../src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx"),
-    "./src/components/Input/OTPInput/OTPInput.stories.tsx": require("../../src/components/Input/OTPInput/OTPInput.stories.tsx"),
-    "./src/components/Input/PasswordInput/PasswordInput.stories.tsx": require("../../src/components/Input/PasswordInput/PasswordInput.stories.tsx"),
-    "./src/components/Input/TextArea/TextArea.stories.tsx": require("../../src/components/Input/TextArea/TextArea.stories.tsx"),
-    "./src/components/Input/TextInput/TextInput.stories.tsx": require("../../src/components/Input/TextInput/TextInput.stories.tsx"),
-    "./src/components/Link/BaseLink/BaseLink.stories.tsx": require("../../src/components/Link/BaseLink/BaseLink.stories.tsx"),
-    "./src/components/Link/Link/Link.stories.tsx": require("../../src/components/Link/Link/Link.stories.tsx"),
-    "./src/components/List/List.stories.tsx": require("../../src/components/List/List.stories.tsx"),
-    "./src/components/Modal/docs/ModalExamples.stories.tsx": require("../../src/components/Modal/docs/ModalExamples.stories.tsx"),
-    "./src/components/Modal/docs/SimpleModal.stories.tsx": require("../../src/components/Modal/docs/SimpleModal.stories.tsx"),
-    "./src/components/Popover/Popover.stories.tsx": require("../../src/components/Popover/Popover.stories.tsx"),
-    "./src/components/ProgressBar/ProgressBar.stories.tsx": require("../../src/components/ProgressBar/ProgressBar.stories.tsx"),
-    "./src/components/Radio/Radio.stories.tsx": require("../../src/components/Radio/Radio.stories.tsx"),
-    "./src/components/Skeleton/Skeleton.stories.tsx": require("../../src/components/Skeleton/Skeleton.stories.tsx"),
-    "./src/components/SkipNav/SkipNav.stories.tsx": require("../../src/components/SkipNav/SkipNav.stories.tsx"),
-    "./src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx": require("../../src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx"),
-    "./src/components/Spinner/Spinner/Spinner.stories.tsx": require("../../src/components/Spinner/Spinner/Spinner.stories.tsx"),
-    "./src/components/SpotlightPopoverTour/docs/Tour.stories.tsx": require("../../src/components/SpotlightPopoverTour/docs/Tour.stories.tsx"),
-    "./src/components/Switch/Switch.stories.tsx": require("../../src/components/Switch/Switch.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableCellAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableCellAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableRowAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableRowAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx"),
-    "./src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx"),
-    "./src/components/Table/docs/BasicTable.stories.tsx": require("../../src/components/Table/docs/BasicTable.stories.tsx"),
-    "./src/components/Table/docs/TableExamples.stories.tsx": require("../../src/components/Table/docs/TableExamples.stories.tsx"),
-    "./src/components/Tabs/Tabs.stories.tsx": require("../../src/components/Tabs/Tabs.stories.tsx"),
-    "./src/components/Tag/Tag.stories.tsx": require("../../src/components/Tag/Tag.stories.tsx"),
-    "./src/components/Tooltip/Tooltip.stories.tsx": require("../../src/components/Tooltip/Tooltip.stories.tsx"),
-    "./src/components/Typography/BaseText/BaseText.stories.tsx": require("../../src/components/Typography/BaseText/BaseText.stories.tsx"),
-    "./src/components/Typography/Code/Code.stories.tsx": require("../../src/components/Typography/Code/Code.stories.tsx"),
-    "./src/components/Typography/Display/Display.stories.tsx": require("../../src/components/Typography/Display/Display.stories.tsx"),
-    "./src/components/Typography/Heading/Heading.stories.tsx": require("../../src/components/Typography/Heading/Heading.stories.tsx"),
-    "./src/components/Typography/Text/Text.stories.tsx": require("../../src/components/Typography/Text/Text.stories.tsx"),
-    "./src/components/Typography/Title/Title.stories.tsx": require("../../src/components/Typography/Title/Title.stories.tsx"),
-    "./src/components/VisuallyHidden/VisuallyHidden.stories.tsx": require("../../src/components/VisuallyHidden/VisuallyHidden.stories.tsx"),
-    "./src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx": require("../../src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx"),
-    "./src/storybook-recipes/SimpleDashboard.stories.tsx": require("../../src/storybook-recipes/SimpleDashboard.stories.tsx"),
-    "./src/storybook-recipes/SimpleForm.stories.tsx": require("../../src/storybook-recipes/SimpleForm.stories.tsx"),
+    './src/components/Accordion/Accordion.stories.tsx': require('../../src/components/Accordion/Accordion.stories.tsx'),
+    './src/components/ActionList/ActionList.stories.tsx': require('../../src/components/ActionList/ActionList.stories.tsx'),
+    './src/components/Alert/Alert.stories.tsx': require('../../src/components/Alert/Alert.stories.tsx'),
+    './src/components/Amount/Amount.stories.tsx': require('../../src/components/Amount/Amount.stories.tsx'),
+    './src/components/Badge/Badge.stories.tsx': require('../../src/components/Badge/Badge.stories.tsx'),
+    './src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx': require('../../src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx'),
+    './src/components/BottomSheet/BottomSheet.stories.tsx': require('../../src/components/BottomSheet/BottomSheet.stories.tsx'),
+    './src/components/Box/BaseBox/BaseBox.internal.stories.tsx': require('../../src/components/Box/BaseBox/BaseBox.internal.stories.tsx'),
+    './src/components/Box/Box.stories.tsx': require('../../src/components/Box/Box.stories.tsx'),
+    './src/components/Box/styledProps/StyledProps.stories.tsx': require('../../src/components/Box/styledProps/StyledProps.stories.tsx'),
+    './src/components/Button/BaseButton/BaseButton.internal.stories.tsx': require('../../src/components/Button/BaseButton/BaseButton.internal.stories.tsx'),
+    './src/components/Button/Button/Button.stories.tsx': require('../../src/components/Button/Button/Button.stories.tsx'),
+    './src/components/Button/IconButton/IconButton.stories.tsx': require('../../src/components/Button/IconButton/IconButton.stories.tsx'),
+    './src/components/Card/Card.stories.tsx': require('../../src/components/Card/Card.stories.tsx'),
+    './src/components/Card/CardInteractive.stories.tsx': require('../../src/components/Card/CardInteractive.stories.tsx'),
+    './src/components/Carousel/Carousel.stories.tsx': require('../../src/components/Carousel/Carousel.stories.tsx'),
+    './src/components/Checkbox/Checkbox.stories.tsx': require('../../src/components/Checkbox/Checkbox.stories.tsx'),
+    './src/components/Checkbox/CheckboxGroup.stories.tsx': require('../../src/components/Checkbox/CheckboxGroup.stories.tsx'),
+    './src/components/Chip/Chip.stories.tsx': require('../../src/components/Chip/Chip.stories.tsx'),
+    './src/components/Chip/ChipGroup.stories.tsx': require('../../src/components/Chip/ChipGroup.stories.tsx'),
+    './src/components/Collapsible/Collapsible.stories.tsx': require('../../src/components/Collapsible/Collapsible.stories.tsx'),
+    './src/components/Counter/Counter.stories.tsx': require('../../src/components/Counter/Counter.stories.tsx'),
+    './src/components/Divider/Divider.stories.tsx': require('../../src/components/Divider/Divider.stories.tsx'),
+    './src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx'),
+    './src/components/Dropdown/docs/DropdownWithButton.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithButton.stories.tsx'),
+    './src/components/Dropdown/docs/DropdownWithSelect.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithSelect.stories.tsx'),
+    './src/components/Icons/Icons.stories.tsx': require('../../src/components/Icons/Icons.stories.tsx'),
+    './src/components/Indicator/Indicator.stories.tsx': require('../../src/components/Indicator/Indicator.stories.tsx'),
+    './src/components/Input/BaseInput/BaseInput.stories.tsx': require('../../src/components/Input/BaseInput/BaseInput.stories.tsx'),
+    './src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx': require('../../src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx'),
+    './src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx': require('../../src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx'),
+    './src/components/Input/OTPInput/OTPInput.stories.tsx': require('../../src/components/Input/OTPInput/OTPInput.stories.tsx'),
+    './src/components/Input/PasswordInput/PasswordInput.stories.tsx': require('../../src/components/Input/PasswordInput/PasswordInput.stories.tsx'),
+    './src/components/Input/TextArea/TextArea.stories.tsx': require('../../src/components/Input/TextArea/TextArea.stories.tsx'),
+    './src/components/Input/TextInput/TextInput.stories.tsx': require('../../src/components/Input/TextInput/TextInput.stories.tsx'),
+    './src/components/Link/BaseLink/BaseLink.stories.tsx': require('../../src/components/Link/BaseLink/BaseLink.stories.tsx'),
+    './src/components/Link/Link/Link.stories.tsx': require('../../src/components/Link/Link/Link.stories.tsx'),
+    './src/components/List/List.stories.tsx': require('../../src/components/List/List.stories.tsx'),
+    './src/components/Modal/docs/ModalExamples.stories.tsx': require('../../src/components/Modal/docs/ModalExamples.stories.tsx'),
+    './src/components/Modal/docs/SimpleModal.stories.tsx': require('../../src/components/Modal/docs/SimpleModal.stories.tsx'),
+    './src/components/Popover/Popover.stories.tsx': require('../../src/components/Popover/Popover.stories.tsx'),
+    './src/components/ProgressBar/ProgressBar.stories.tsx': require('../../src/components/ProgressBar/ProgressBar.stories.tsx'),
+    './src/components/Radio/Radio.stories.tsx': require('../../src/components/Radio/Radio.stories.tsx'),
+    './src/components/Skeleton/Skeleton.stories.tsx': require('../../src/components/Skeleton/Skeleton.stories.tsx'),
+    './src/components/SkipNav/SkipNav.stories.tsx': require('../../src/components/SkipNav/SkipNav.stories.tsx'),
+    './src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx': require('../../src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx'),
+    './src/components/Spinner/Spinner/Spinner.stories.tsx': require('../../src/components/Spinner/Spinner/Spinner.stories.tsx'),
+    './src/components/SpotlightPopoverTour/docs/Tour.stories.tsx': require('../../src/components/SpotlightPopoverTour/docs/Tour.stories.tsx'),
+    './src/components/Switch/Switch.stories.tsx': require('../../src/components/Switch/Switch.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableCellAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableCellAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableRowAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableRowAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx'),
+    './src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx'),
+    './src/components/Table/docs/BasicTable.stories.tsx': require('../../src/components/Table/docs/BasicTable.stories.tsx'),
+    './src/components/Table/docs/TableExamples.stories.tsx': require('../../src/components/Table/docs/TableExamples.stories.tsx'),
+    './src/components/Tabs/Tabs.stories.tsx': require('../../src/components/Tabs/Tabs.stories.tsx'),
+    './src/components/Tag/Tag.stories.tsx': require('../../src/components/Tag/Tag.stories.tsx'),
+    './src/components/Tooltip/Tooltip.stories.tsx': require('../../src/components/Tooltip/Tooltip.stories.tsx'),
+    './src/components/Typography/BaseText/BaseText.stories.tsx': require('../../src/components/Typography/BaseText/BaseText.stories.tsx'),
+    './src/components/Typography/Code/Code.stories.tsx': require('../../src/components/Typography/Code/Code.stories.tsx'),
+    './src/components/Typography/Display/Display.stories.tsx': require('../../src/components/Typography/Display/Display.stories.tsx'),
+    './src/components/Typography/Heading/Heading.stories.tsx': require('../../src/components/Typography/Heading/Heading.stories.tsx'),
+    './src/components/Typography/Text/Text.stories.tsx': require('../../src/components/Typography/Text/Text.stories.tsx'),
+    './src/components/VisuallyHidden/VisuallyHidden.stories.tsx': require('../../src/components/VisuallyHidden/VisuallyHidden.stories.tsx'),
+    './src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx': require('../../src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx'),
+    './src/storybook-recipes/SimpleDashboard.stories.tsx': require('../../src/storybook-recipes/SimpleDashboard.stories.tsx'),
+    './src/storybook-recipes/SimpleForm.stories.tsx': require('../../src/storybook-recipes/SimpleForm.stories.tsx'),
   };
 };
 
diff --git a/packages/blade/.storybook/react/global.css b/packages/blade/.storybook/react/global.css
index 9ca01a72414..56b59b983e4 100644
--- a/packages/blade/.storybook/react/global.css
+++ b/packages/blade/.storybook/react/global.css
@@ -7,4 +7,6 @@ body {
   width: 100%;
   height: 100%;
   padding: 0 !important;
+  -webkit-font-smoothing: unset !important;
+  -moz-osx-font-smoothing: unset !important;
 }
diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts
index f108ec91156..63f5225ee1d 100644
--- a/packages/blade/.storybook/react/main.ts
+++ b/packages/blade/.storybook/react/main.ts
@@ -29,7 +29,7 @@ const config: StorybookConfig = {
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
     '@storybook/preset-create-react-app',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
   ],
   framework: {
     name: '@storybook/react-webpack5',
diff --git a/packages/blade/.storybook/react/manager-head.html b/packages/blade/.storybook/react/manager-head.html
index 54f0f21b83a..9a048367f18 100644
--- a/packages/blade/.storybook/react/manager-head.html
+++ b/packages/blade/.storybook/react/manager-head.html
@@ -1,6 +1,4 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+<link href="https://pkg.csb.dev/razorpay/blade/commit/09774406/@razorpay/blade/fonts.css" rel="stylesheet">
 <link rel="stylesheet"
   href="https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-light.css">
 <link rel="icon"
diff --git a/packages/blade/.storybook/react/manager.tsx b/packages/blade/.storybook/react/manager.tsx
index e73fa3a559c..7949d011008 100644
--- a/packages/blade/.storybook/react/manager.tsx
+++ b/packages/blade/.storybook/react/manager.tsx
@@ -8,11 +8,15 @@ import { addons, types } from '@storybook/manager-api';
 
 const surafaceTextNormal = 'rgba(19, 38, 68, 1)';
 const bladePrimary = 'rgba(21, 102, 241, 1)';
+const bladeTextFont =
+  '"Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif';
+
+const bladeCodeFont = '"Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace';
 
 export const theme = create({
   base: 'light',
 
-  colorPrimary: 'red',
+  colorPrimary: bladePrimary,
   colorSecondary: bladePrimary,
 
   // UI
@@ -22,9 +26,8 @@ export const theme = create({
   appBorderRadius: 4,
 
   // Typography
-  fontBase:
-    'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-  fontCode: 'monospace',
+  fontBase: bladeTextFont,
+  fontCode: bladeCodeFont,
 
   // Text colors
   textColor: surafaceTextNormal,
diff --git a/packages/blade/.storybook/react/preview-head.html b/packages/blade/.storybook/react/preview-head.html
index 2ac62b7c84c..f836085e7ec 100644
--- a/packages/blade/.storybook/react/preview-head.html
+++ b/packages/blade/.storybook/react/preview-head.html
@@ -1,18 +1,39 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
-<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+<link href="https://pkg.csb.dev/razorpay/blade/commit/f2ca3f2f/@razorpay/blade/fonts.css" rel="stylesheet">
 <style>
-* :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
-* :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)),
-* :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)),
-* :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)),
-* :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)),
-* :where(ul:not(.sb-anchor, .sb-unstyled, .sb-unstyled ul)),
-* :where(ol:not(.sb-anchor, .sb-unstyled, .sb-unstyled ol)),
-* :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
-    font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
-}
+  /* 
+    Fix these overrides when there is better resolution to this issue-
+    https://github.com/storybookjs/storybook/discussions/21109
+  */
+  * :where(p:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled p)),
+  * :where(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)),
+  * :where(div:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled div)),
+  * :where(span:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled span)),
+  * :where(ul:not(.sb-anchor, .sb-unstyled, .sb-unstyled ul)),
+  * :where(ol:not(.sb-anchor, .sb-unstyled, .sb-unstyled ol)),
+  * :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
+  }
+
+  * :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)),
+  * :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)) *,
+  * :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)),
+  * :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) *,
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)),
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) *,
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)),
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) *,
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h5)),
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h5)) *,
+  * :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h6)),
+  * :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h6)) * {
+    font-family: "TASA Orbiter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
+  }
+
+  * pre :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)) {
+    font-family: "Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace !important;
+    font-size: 14px !important;
+  }
+
   body pre.prismjs {
     color: unset !important;
   }
@@ -21,4 +42,4 @@
   .css-1dt41f3 {
     background-color: #111218 !important;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/blade/.storybook/react/preview.tsx b/packages/blade/.storybook/react/preview.tsx
index 4072bac8c8d..21ed6450193 100644
--- a/packages/blade/.storybook/react/preview.tsx
+++ b/packages/blade/.storybook/react/preview.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { theme, toggleHiddenStoryStyle } from './manager';
 import { global } from '@storybook/design-system';
 import { BladeProvider } from '../../src/components';
-import { paymentTheme, bankingTheme } from '../../src/tokens/theme';
+import { bladeTheme } from '../../src/tokens/theme';
 import { createTheme } from '../../src/tokens/theme/createTheme';
 import ErrorBoundary from './ErrorBoundary';
 import { INTERNAL_STORY_ADDON_PARAM } from './constants';
@@ -84,13 +84,15 @@ export const parameters = {
         if (context.store.globals.globals.brandColor) {
           return createTheme({ brandColor: context.store.globals.globals.brandColor });
         }
-        if (context.store.globals.globals.themeTokenName === 'paymentTheme') {
-          return paymentTheme;
-        }
-        if (context.store.globals.globals.themeTokenName === 'bankingTheme') {
-          return bankingTheme;
-        }
+        return bladeTheme;
       };
+
+      if (context.store.globals.globals.version === '10' && window.top) {
+        window.top.location.href =
+          'https://v10--61c19ee8d3d282003ac1d81c.chromatic.com' +
+          window.top.location.pathname +
+          window.top.location.search;
+      }
       return (
         <DocsContainer context={context}>
           <BladeProvider
@@ -108,25 +110,26 @@ export const parameters = {
       summary: styled.summary`
         font-family: ${theme.fontBase};
         color: ${theme.textColor};
-        font-weight: normal;
+        font-size: 14px;
         cursor: pointer;
       `,
-      li: styled.li`
-        :not(:first-child) {
-          padding-top: 12px;
-        }
-        font-size: 14px;
-
-        & :not(pre) > code {
-          margin: 0 2px;
-          padding: 3px 5px;
-          white-space: nowrap;
-          border-radius: 3px;
-          font-size: 13px;
-          border: 1px solid #eeeeee;
-          background-color: #f8f8f8;
-        }
+      a: styled.a`
+        color: ${theme.colorPrimary};
+        font-weight: 500;
       `,
+      // Setting font-weight back to 600 in headings since storybook tries to override it
+      ...(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce<Record<`h${number}`, string>>(
+        (headingOverride, headingLevel) => {
+          headingOverride[headingLevel] = styled[headingLevel]`
+            & a {
+              font-weight: 600;
+            }
+          `;
+
+          return headingOverride;
+        },
+        {},
+      ),
     },
   },
 };
@@ -134,7 +137,6 @@ export const parameters = {
 const StoryCanvas = styled.div<{ context }>(
   ({ theme, context }) =>
     `
-      border: ${theme.border.width.thin}px solid ${theme.colors.surface.border.subtle.lowContrast};
       width: 100%;
       height: ${context.viewMode === 'story' ? '100vh' : '100%'};
       overflow: auto;
@@ -146,12 +148,12 @@ const StoryCanvas = styled.div<{ context }>(
           ? '0rem'
           : '2rem'
       };
+      background-color: ${theme.colors.surface.background.gray.subtle};
       border-radius: ${
         context.viewMode === 'story'
           ? `${theme.border.radius.none}px`
           : `${theme.border.radius.medium}px`
       };
-      background: ${theme.colors.surface.background.level1.lowContrast};
     `,
 );
 
@@ -162,14 +164,16 @@ export const decorators = [
       if (context.globals.brandColor) {
         return createTheme({ brandColor: context.globals.brandColor });
       }
-      if (context.globals.themeTokenName === 'paymentTheme') {
-        return paymentTheme;
-      }
-      if (context.globals.themeTokenName === 'bankingTheme') {
-        return bankingTheme;
-      }
+      return bladeTheme;
     };
 
+    if (context.globals.version === '10' && window.top) {
+      window.top.location.href =
+        'https://v10--61c19ee8d3d282003ac1d81c.chromatic.com' +
+        window.top.location.pathname +
+        window.top.location.search;
+    }
+
     return (
       <ErrorBoundary>
         <GlobalStyle />
@@ -188,19 +192,21 @@ export const decorators = [
 ];
 
 export const globalTypes = {
-  themeTokenName: {
-    name: 'Theme Tokens',
-    description: 'Theme Tokens for Blade',
-    defaultValue: 'paymentTheme',
+  version: {
+    name: 'Blade Documentation Version',
+    description: 'Version of the Blade',
+    defaultValue: '11',
     toolbar: {
-      icon: 'paintbrush',
+      icon: 'time',
+      title: ' v11 - Rebranded',
       // Array of plain string values or MenuItem shape (see below)
       items: [
-        { value: 'paymentTheme', title: 'Payment' },
-        { value: 'bankingTheme', title: 'Banking' },
+        { value: '10', title: ' v10 - Old' },
+        { value: '11', title: ' v11 - Rebranded', default: true },
       ],
+      dynamicTitle: true,
       // Property that specifies if the name of the item will be displayed
-      showName: true,
+      showName: false,
     },
   },
   colorScheme: {
@@ -219,12 +225,13 @@ export const globalTypes = {
       showName: true,
     },
   },
+  // TODO: Rebranding - Uncomment this when we fix white-labeling
   brandColor: {
     name: 'Brand Color',
     description: 'Brand Color (You can pass any valid color to BladeProvider)',
     defaultValue: undefined,
     toolbar: {
-      icon: 'contrast',
+      icon: 'paintbrush',
       // Array of plain string values or MenuItem shape (see below)
       items: [
         { value: undefined, title: 'Razorpay' },
diff --git a/packages/blade/android/app/src/main/java/com/blade/MainApplication.java b/packages/blade/android/app/src/main/java/com/blade/MainApplication.java
index 85eb3f2293f..ce474426a72 100644
--- a/packages/blade/android/app/src/main/java/com/blade/MainApplication.java
+++ b/packages/blade/android/app/src/main/java/com/blade/MainApplication.java
@@ -56,7 +56,8 @@ public ReactNativeHost getReactNativeHost() {
 
     @Override
     public void onCreate() {
-        ReactFontManager.getInstance().addCustomFont(this, "Lato", R.font.lato);
+        ReactFontManager.getInstance().addCustomFont(this, "Inter", R.font.inter);
+        ReactFontManager.getInstance().addCustomFont(this, "TASA Orbiter Display", R.font.tasa);
         super.onCreate();
         SoLoader.init(this, /* native exopackage */ false);
         if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
diff --git a/packages/blade/android/app/src/main/res/font/inter.xml b/packages/blade/android/app/src/main/res/font/inter.xml
new file mode 100644
index 00000000000..69f34a8c2cc
--- /dev/null
+++ b/packages/blade/android/app/src/main/res/font/inter.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
+    <font
+        app:font="@font/inter_regular"
+        app:fontWeight="400" />
+    <font
+        app:font="@font/inter_medium"
+        app:fontWeight="500" />
+    <font
+        app:font="@font/inter_semibold"
+        app:fontWeight="600" />
+</font-family>
diff --git a/packages/blade/android/app/src/main/res/font/inter_medium.ttf b/packages/blade/android/app/src/main/res/font/inter_medium.ttf
new file mode 100644
index 00000000000..93427308530
Binary files /dev/null and b/packages/blade/android/app/src/main/res/font/inter_medium.ttf differ
diff --git a/packages/blade/android/app/src/main/res/font/inter_regular.ttf b/packages/blade/android/app/src/main/res/font/inter_regular.ttf
new file mode 100644
index 00000000000..c544be47844
Binary files /dev/null and b/packages/blade/android/app/src/main/res/font/inter_regular.ttf differ
diff --git a/packages/blade/android/app/src/main/res/font/inter_semibold.ttf b/packages/blade/android/app/src/main/res/font/inter_semibold.ttf
new file mode 100644
index 00000000000..a32e2b8d219
Binary files /dev/null and b/packages/blade/android/app/src/main/res/font/inter_semibold.ttf differ
diff --git a/packages/blade/android/app/src/main/res/font/lato.xml b/packages/blade/android/app/src/main/res/font/lato.xml
deleted file mode 100644
index c31951dcfff..00000000000
--- a/packages/blade/android/app/src/main/res/font/lato.xml
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
-    <font
-        app:font="@font/lato_regular"
-        app:fontStyle="normal"
-        app:fontWeight="400" />
-    <font
-        app:font="@font/lato_bold"
-        app:fontStyle="normal"
-        app:fontWeight="700" />
-    <font
-        app:font="@font/lato_italic"
-        app:fontStyle="italic"
-        app:fontWeight="400" />
-</font-family>
diff --git a/packages/blade/android/app/src/main/res/font/lato_bold.ttf b/packages/blade/android/app/src/main/res/font/lato_bold.ttf
deleted file mode 100755
index b63a14d6aee..00000000000
Binary files a/packages/blade/android/app/src/main/res/font/lato_bold.ttf and /dev/null differ
diff --git a/packages/blade/android/app/src/main/res/font/lato_italic.ttf b/packages/blade/android/app/src/main/res/font/lato_italic.ttf
deleted file mode 100644
index 0d0f69ea039..00000000000
Binary files a/packages/blade/android/app/src/main/res/font/lato_italic.ttf and /dev/null differ
diff --git a/packages/blade/android/app/src/main/res/font/lato_regular.ttf b/packages/blade/android/app/src/main/res/font/lato_regular.ttf
deleted file mode 100755
index 33eba8b1923..00000000000
Binary files a/packages/blade/android/app/src/main/res/font/lato_regular.ttf and /dev/null differ
diff --git a/packages/blade/android/app/src/main/res/font/tasa.xml b/packages/blade/android/app/src/main/res/font/tasa.xml
new file mode 100644
index 00000000000..a2c6f371699
--- /dev/null
+++ b/packages/blade/android/app/src/main/res/font/tasa.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
+    <font
+        app:font="@font/tasa_orbiter_display_regular"
+        app:fontWeight="400" />
+    <font
+        app:font="@font/tasa_orbiter_display_medium"
+        app:fontWeight="500" />
+    <font
+        app:font="@font/tasa_orbiter_display_semibold"
+        app:fontWeight="600" />
+</font-family>
diff --git a/packages/blade/android/app/src/main/res/font/tasa_orbiter_display_medium.otf b/packages/blade/android/app/src/main/res/font/tasa_orbiter_display_medium.otf
new file mode 100644
index 00000000000..e70caf9a9b0
Binary files /dev/null and b/packages/blade/android/app/src/main/res/font/tasa_orbiter_display_medium.otf differ
diff --git a/packages/blade/android/app/src/main/res/font/tasa_orbiter_display_regular.otf b/packages/blade/android/app/src/main/res/font/tasa_orbiter_display_regular.otf
new file mode 100644
index 00000000000..8235c6e4760
Binary files /dev/null and b/packages/blade/android/app/src/main/res/font/tasa_orbiter_display_regular.otf differ
diff --git a/packages/blade/android/app/src/main/res/font/tasa_orbiter_display_semibold.otf b/packages/blade/android/app/src/main/res/font/tasa_orbiter_display_semibold.otf
new file mode 100644
index 00000000000..6eae2a0a59e
Binary files /dev/null and b/packages/blade/android/app/src/main/res/font/tasa_orbiter_display_semibold.otf differ
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-actionlist.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-actionlist.test.ts
new file mode 100644
index 00000000000..19acb83c441
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-actionlist.test.ts
@@ -0,0 +1,88 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the ActionList component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+            <ActionList surfaceLevel={2}>
+                <ActionListSection title="Help">
+                <ActionListItem
+                    leading={<ActionListItemIcon icon={SettingsIcon} />}
+                    title="Settings"
+                    value="settings"
+                    isDisabled={true}
+                />
+                <ActionListItem
+                    leading={<ActionListItemIcon icon={DownloadIcon} />}
+                    title="Download"
+                    value="download"
+                />
+                
+                </ActionListSection>
+            </ActionList>
+
+            <ActionList surfaceLevel={3}>
+                <ActionListSection title="Help">
+                <ActionListItem
+                    leading={<ActionListItemIcon icon={SettingsIcon} />}
+                    title="Settings"
+                    value="settings"
+                    isDisabled={true}
+                />
+                <ActionListItem
+                    leading={<ActionListItemIcon icon={DownloadIcon} />}
+                    title="Download"
+                    value="download"
+                />
+                
+                </ActionListSection>
+            </ActionList>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+                <ActionList>
+                    <ActionListSection title="Help">
+                    <ActionListItem
+                        leading={<ActionListItemIcon icon={SettingsIcon} />}
+                        title="Settings"
+                        value="settings"
+                        isDisabled={true}
+                    />
+                    <ActionListItem
+                        leading={<ActionListItemIcon icon={DownloadIcon} />}
+                        title="Download"
+                        value="download"
+                    />
+                    
+                    </ActionListSection>
+                </ActionList>
+
+                <ActionList>
+                    <ActionListSection title="Help">
+                    <ActionListItem
+                        leading={<ActionListItemIcon icon={SettingsIcon} />}
+                        title="Settings"
+                        value="settings"
+                        isDisabled={true}
+                    />
+                    <ActionListItem
+                        leading={<ActionListItemIcon icon={DownloadIcon} />}
+                        title="Download"
+                        value="download"
+                    />
+                    
+                    </ActionListSection>
+                </ActionList>
+            </>
+          );"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts
new file mode 100644
index 00000000000..8fe22811eca
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts
@@ -0,0 +1,186 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+describe('should migrate the Amount & CardHeaderAmount components', () => {
+  it('should migrate the size prop', async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      const App = () => (
+          <>  
+            <Amount size="body-small" value={123456.789} />
+  
+            <Amount size="body-small-bold" value={123456.789} />
+            
+            <Amount size="body-medium" value={123456.789} />
+      
+            <Amount size="body-medium-bold" value={123456.789} />
+             
+            <Amount size="heading-small" value={123456.789} />
+      
+            <Amount size="heading-small-bold" value={123456.789} />
+            
+            <Amount size="heading-large" value={123456.789} />
+  
+            <Amount size="heading-large-bold" value={123456.789} />  
+   
+            <Amount size="title-small" value={123456.789} />
+  
+            <CardHeaderAmount size="title-medium" value={123456.789} />
+  
+            <CardHeaderAmount size="body-small" value={123456.789} />
+  
+            <CardHeaderAmount size="body-small-bold" value={123456.789} />
+            
+            <CardHeaderAmount size="body-medium" value={123456.789} />
+      
+            <CardHeaderAmount size="body-medium-bold" value={123456.789} />
+             
+            <CardHeaderAmount size="heading-small" value={123456.789} />
+      
+            <CardHeaderAmount size="heading-small-bold" value={123456.789} />
+            
+            <CardHeaderAmount size="heading-large" value={123456.789} />
+  
+            <CardHeaderAmount size="heading-large-bold" value={123456.789} />  
+   
+            <CardHeaderAmount size="title-small" value={123456.789} />
+  
+            <CardHeaderAmount size="title-medium" value={123456.789} />
+          </>
+        );
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "const App = () => (
+                <>  
+                  <Amount value={123456.789} type="body" size="small" />
+        
+                  <Amount value={123456.789} type="body" size="small" weight="semibold" />
+                  
+                  <Amount value={123456.789} type="body" size="medium" />
+            
+                  <Amount value={123456.789} type="body" size="medium" weight="semibold" />
+                   
+                  <Amount value={123456.789} type="body" size="large" />
+            
+                  <Amount value={123456.789} type="body" size="large" weight="semibold" />
+                  
+                  <Amount value={123456.789} type="heading" size="medium" />
+        
+                  <Amount value={123456.789} type="heading" size="medium" weight="semibold" />  
+         
+                  <Amount value={123456.789} type="heading" size="large" />
+        
+                  <CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
+        
+                  <CardHeaderAmount value={123456.789} type="body" size="small" />
+        
+                  <CardHeaderAmount value={123456.789} type="body" size="small" weight="semibold" />
+                  
+                  <CardHeaderAmount value={123456.789} type="body" size="medium" />
+            
+                  <CardHeaderAmount value={123456.789} type="body" size="medium" weight="semibold" />
+                   
+                  <CardHeaderAmount value={123456.789} type="body" size="large" />
+            
+                  <CardHeaderAmount value={123456.789} type="body" size="large" weight="semibold" />
+                  
+                  <CardHeaderAmount value={123456.789} type="heading" size="medium" />
+        
+                  <CardHeaderAmount value={123456.789} type="heading" size="medium" weight="semibold" />  
+         
+                  <CardHeaderAmount value={123456.789} type="heading" size="large" />
+        
+                  <CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
+                </>
+              );"
+    `);
+  });
+
+  it('should migrate the intent prop', async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      const App = () => (
+          <>
+            <Amount value={1234} intent="positive" />
+  
+            <Amount value={1234} intent="negative" />
+  
+            <Amount value={1234} intent="information" />
+  
+            <Amount value={1234} intent="notice" />
+  
+            <CardHeaderAmount value={1234} intent="positive" />
+  
+            <CardHeaderAmount value={1234} intent="negative" />
+  
+            <CardHeaderAmount value={1234} intent="information" />
+  
+            <CardHeaderAmount value={1234} intent="notice" />
+          </>
+        );
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "const App = () => (
+                <>
+                  <Amount value={1234} color="feedback.text.positive.intense" />
+        
+                  <Amount value={1234} color="feedback.text.negative.intense" />
+        
+                  <Amount value={1234} color="feedback.text.information.intense" />
+        
+                  <Amount value={1234} color="feedback.text.notice.intense" />
+        
+                  <CardHeaderAmount value={1234} color="feedback.text.positive.intense" />
+        
+                  <CardHeaderAmount value={1234} color="feedback.text.negative.intense" />
+        
+                  <CardHeaderAmount value={1234} color="feedback.text.information.intense" />
+        
+                  <CardHeaderAmount value={1234} color="feedback.text.notice.intense" />
+                </>
+              );"
+    `);
+  });
+
+  it('should migrate the prefix prop', async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      const App = () => (
+          <>
+            <Amount value={1234} prefix="currency-symbol" />
+  
+            <Amount value={1234} prefix="currency-code" />
+
+            <CardHeaderAmount value={1234} prefix="currency-symbol" />
+  
+            <CardHeaderAmount value={1234} prefix="currency-code" />  
+          </>
+        );
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "const App = () => (
+                <>
+                  <Amount value={1234} currencyIndicator="currency-symbol" />
+        
+                  <Amount value={1234} currencyIndicator="currency-code" />
+
+                  <CardHeaderAmount value={1234} currencyIndicator="currency-symbol" />
+        
+                  <CardHeaderAmount value={1234} currencyIndicator="currency-code" />  
+                </>
+              );"
+    `);
+  });
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-badge.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-badge.test.ts
new file mode 100644
index 00000000000..ebc069eb8c1
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-badge.test.ts
@@ -0,0 +1,32 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the Badge component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+            <Badge fontWeight="bold"> Hello </Badge>
+            <Badge variant="blue"> Hello </Badge>
+            <Badge color="default"> Hello </Badge>
+            <Badge variant="blue" color="default"> Hello </Badge>
+            <Badge variant="negative" color="positive"> Hello </Badge>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+                <Badge> Hello </Badge>
+                <Badge color="primary"> Hello </Badge>
+                <Badge color="primary"> Hello </Badge>
+                <Badge color="primary"> Hello </Badge>
+                <Badge color="positive"> Hello </Badge>
+            </>
+          );"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts
new file mode 100644
index 00000000000..03bc95e15da
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts
@@ -0,0 +1,180 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the Card component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+            <Card elevation="lowRaised" padding="spacing.7" surfaceLevel={2}>
+                <CardBody>
+                    <Text>
+                        Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
+                    </Text>
+                </CardBody>
+            </Card>
+
+            <Card elevation="lowRaised" padding="spacing.7" surfaceLevel={3}>
+                <CardBody>
+                    <Text>
+                        Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
+                    </Text>
+                </CardBody>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardHeaderLeading
+                        title="Card Header"
+                        subtitle="Subtitle"
+                        prefix={<CardHeaderIcon icon={InfoIcon} />}
+                        suffix={<CardHeaderCounter intent="positive" value={12} />}
+                    />
+                    <CardHeaderTrailing visual={<CardHeaderBadge variant="positive">NEW</CardHeaderBadge>} />
+                </CardHeader>
+                <CardBody>
+                    <Text> Hello World</Text>
+                </CardBody>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardHeaderLeading
+                        title="Card Header"
+                        subtitle="Subtitle"
+                        prefix={<CardHeaderIcon icon={InfoIcon} />}
+                        suffix={<CardHeaderCounter intent="positive" value={12} />}
+                    />
+                    <CardHeaderTrailing visual={<CardHeaderText weight="bold">NEW</CardHeaderText>} />
+                </CardHeader>
+                <CardBody>
+                    <Text> Hello World</Text>
+                </CardBody>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardHeaderLeading
+                        title="Card Header"
+                        subtitle="Subtitle"
+                        prefix={<CardHeaderIcon icon={InfoIcon} />}
+                        suffix={<CardHeaderCounter intent="positive" value={12} />}
+                    />
+                    <CardHeaderTrailing visual={<CardHeaderIconButton color="default">NEW</CardHeaderIconButton>} />
+                </CardHeader>
+                <CardBody>
+                    <Text> Hello World</Text>
+                </CardBody>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardHeaderLeading
+                        title="Card Header"
+                        subtitle="Subtitle"
+                        prefix={<CardHeaderIcon icon={InfoIcon} />}
+                        suffix={<CardHeaderCounter intent="positive" value={12} />}
+                    />
+                    <CardHeaderTrailing
+                        visual={<CardHeaderAmount value={123} intent="positive" size="title-small" />}
+                    />
+                </CardHeader>
+                <CardBody>
+                    <Text> Hello World</Text>
+                </CardBody>
+            </Card>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+                <Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.moderate">
+                    <CardBody>
+                        <Text>
+                            Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
+                        </Text>
+                    </CardBody>
+                </Card>
+
+                <Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.intense">
+                    <CardBody>
+                        <Text>
+                            Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
+                        </Text>
+                    </CardBody>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardHeaderLeading
+                            title="Card Header"
+                            subtitle="Subtitle"
+                            prefix={<CardHeaderIcon icon={InfoIcon} />}
+                            suffix={<CardHeaderCounter value={12} color="positive" />}
+                        />
+                        <CardHeaderTrailing visual={<CardHeaderBadge color="positive">NEW</CardHeaderBadge>} />
+                    </CardHeader>
+                    <CardBody>
+                        <Text> Hello World</Text>
+                    </CardBody>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardHeaderLeading
+                            title="Card Header"
+                            subtitle="Subtitle"
+                            prefix={<CardHeaderIcon icon={InfoIcon} />}
+                            suffix={<CardHeaderCounter value={12} color="positive" />}
+                        />
+                        <CardHeaderTrailing visual={<CardHeaderText weight="semibold">NEW</CardHeaderText>} />
+                    </CardHeader>
+                    <CardBody>
+                        <Text> Hello World</Text>
+                    </CardBody>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardHeaderLeading
+                            title="Card Header"
+                            subtitle="Subtitle"
+                            prefix={<CardHeaderIcon icon={InfoIcon} />}
+                            suffix={<CardHeaderCounter value={12} color="positive" />}
+                        />
+                        <CardHeaderTrailing visual={<CardHeaderIconButton color="primary">NEW</CardHeaderIconButton>} />
+                    </CardHeader>
+                    <CardBody>
+                        <Text> Hello World</Text>
+                    </CardBody>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardHeaderLeading
+                            title="Card Header"
+                            subtitle="Subtitle"
+                            prefix={<CardHeaderIcon icon={InfoIcon} />}
+                            suffix={<CardHeaderCounter value={12} color="positive" />}
+                        />
+                        <CardHeaderTrailing
+                            visual={<CardHeaderAmount
+                                value={123}
+                                color="feedback.text.positive.intense"
+                                type="heading"
+                                size="large" />}
+                        />
+                    </CardHeader>
+                    <CardBody>
+                        <Text> Hello World</Text>
+                    </CardBody>
+                </Card>
+            </>
+          );"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts
new file mode 100644
index 00000000000..408623f3a94
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts
@@ -0,0 +1,172 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should update the lineHeight & fontSize tokens', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const CustomBox = styled(Box)\`
+            color: \${theme.colors.feedback.notice.action.background.primary.default.lowContrast};
+            backgroundColor: \${getIn(theme.colors, 'surface.background.level3.lowContrast')};
+        \`  
+        const App = () => (
+            <>
+              <CustomBox> Lorem ipsum </CustomBox>  
+              <Text color="feedback.text.information.lowContrast"> Lorem ipsum </Text>
+              <Text color="feedback.text.information.highContrast"> Lorem ipsum </Text>
+            </>
+          );
+        `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const CustomBox = styled(Box)\`
+                color: \${theme.colors.interactive.background.notice.faded};
+                backgroundColor: \${getIn(theme.colors, 'surface.background.gray.moderate')};
+            \`  
+            const App = () => (
+                <>
+                  <CustomBox> Lorem ipsum </CustomBox>  
+                  <Text color="feedback.text.information.intense"> Lorem ipsum </Text>
+                  <Text color="feedback.text.information.intense"> Lorem ipsum </Text>
+                </>
+              );"
+  `);
+});
+
+it('should update token values contextually', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+          <Box borderRightColor="brand.primary.500" backgroundColor="brand.primary.500"> Lorem ipsum </Box>  
+          <Text color="brand.primary.500"> Lorem ipsum </Text>
+          <MapIcon color="brand.primary.500" />
+          <MapIcon color="brand.secondary.500" />
+          <MapIcon color="badge.text.blue.lowContrast" />
+          <MapIcon color="surface.action.icon.default.lowContrast" />
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+              <Box borderRightColor="surface.border.primary.normal" backgroundColor="surface.background.primary.intense"> Lorem ipsum </Box>  
+              <Text color="surface.text.primary.normal"> Lorem ipsum </Text>
+              <MapIcon color="interactive.icon.primary.normal" />
+              <MapIcon color="surface.text.onSea.onSubtle" />
+              <MapIcon color="interactive.icon.primary.normal" />
+              <MapIcon color="interactive.icon.gray.normal" />
+            </>
+          );"
+  `);
+});
+
+it('should create TS error for highContrast tokens', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const CustomBox = styled(Box)\`
+        color: \${theme.colors.surface.text.subdued.highContrast};
+        backgroundColor: \${getIn(theme.colors, 'surface.background.level1.highContrast')};
+    \`
+    const App = () => (
+        <>
+          <CustomBox> Lorem ipsum </CustomBox>
+          <Text color="surface.text.subtle.highContrast"> Lorem ipsum </Text>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const CustomBox = styled(Box)\`
+            color: \${theme.colors.UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN};
+            backgroundColor: \${getIn(theme.colors, 'UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN')};
+        \`
+        const App = () => (
+            <>
+              <CustomBox> Lorem ipsum </CustomBox>
+              <Text color="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"> Lorem ipsum </Text>
+            </>
+          );"
+  `);
+});
+
+it('should update the theme in BladeProvider', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    import { BladeProvider } from '@razorpay/blade/components';
+    import { bankingTheme } from '@razorpay/blade/tokens';
+
+    const AppWrapper = () => {
+      return (
+        <BladeProvider themeTokens={bankingTheme} colorScheme="light">
+          <App />
+        </BladeProvider>
+      );
+    }
+
+    export default AppWrapper;
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "import { BladeProvider } from '@razorpay/blade/components';
+        import { bladeTheme } from '@razorpay/blade/tokens';
+
+        const AppWrapper = () => {
+          return (
+            <BladeProvider themeTokens={bladeTheme} colorScheme="light">
+              <App />
+            </BladeProvider>
+          );
+        }
+
+        export default AppWrapper;"
+  `);
+});
+
+it('should update the theme in BladeProvider', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    import { BladeProvider } from '@razorpay/blade/components';
+    import { paymentTheme } from '@razorpay/blade/tokens';
+
+    const AppWrapper = () => {
+      return (
+        <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+          <App />
+        </BladeProvider>
+      );
+    }
+
+    export default AppWrapper;
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "import { BladeProvider } from '@razorpay/blade/components';
+        import { bladeTheme } from '@razorpay/blade/tokens';
+
+        const AppWrapper = () => {
+          return (
+            <BladeProvider themeTokens={bladeTheme} colorScheme="light">
+              <App />
+            </BladeProvider>
+          );
+        }
+
+        export default AppWrapper;"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts
new file mode 100644
index 00000000000..c3a8ebc9d7d
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts
@@ -0,0 +1,206 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate contrast prop to emphasis', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+          <Badge contrast="low">Hello</Badge> 
+          <Badge contrast="high">Hello</Badge> 
+
+          <Text> Lorem Ipsum <Badge contrast="high">Hello</Badge> </Text>
+
+          <Counter contrast="low">Hello</Counter> 
+          <Counter contrast="high">Hello</Counter>
+
+          <IconButton icon={CloseIcon} contrast="low" onClick={() => console.log('Clicked')} />
+          <IconButton icon={CloseIcon} contrast="high" onClick={() => console.log('Clicked')} />
+          
+          <Alert description="Hello World" contrast="low" />
+          <Alert description="Hello World" contrast="high" />
+
+          <Skeleton height="50px" width="100%" contrast="low" />
+          <Skeleton height="50px" width="100%" contrast="high" />
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+              <Badge emphasis="subtle">Hello</Badge> 
+              <Badge emphasis="intense">Hello</Badge> 
+
+              <Text> Lorem Ipsum <Badge emphasis="intense">Hello</Badge> </Text>
+
+              <Counter emphasis="subtle">Hello</Counter> 
+              <Counter emphasis="intense">Hello</Counter>
+
+              <IconButton icon={CloseIcon} emphasis="intense" onClick={() => console.log('Clicked')} />
+              <IconButton icon={CloseIcon} emphasis="subtle" onClick={() => console.log('Clicked')} />
+              
+              <Alert description="Hello World" emphasis="subtle" />
+              <Alert description="Hello World" emphasis="intense" />
+
+              <Skeleton height="50px" width="100%" />
+              <Skeleton height="50px" width="100%" />
+            </>
+          );"
+  `);
+});
+
+it('should remove variant/intent prop in favor of color prop', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+      <>
+        <Alert description="Hello World" intent="information" />
+
+        <Badge variant="blue"> Hello </Badge>
+        <Badge color="default"> Hello </Badge>
+        <Badge variant="blue" color="default"> Hello </Badge>
+        <Badge variant="negative" color="positive"> Hello </Badge>
+
+        <CardHeaderBadge variant="blue"> Hello </CardHeaderBadge>
+        <CardHeaderBadge color="default"> Hello </CardHeaderBadge>
+        <CardHeaderBadge variant="blue" color="default"> Hello </CardHeaderBadge>
+        <CardHeaderBadge variant="negative" color="positive"> Hello </CardHeaderBadge>
+
+        <Counter variant="blue"> Hello </Counter>
+        <Counter intent="positive"> Hello </Counter>
+        <Counter color="default"> Hello </Counter>
+        <Counter variant="blue" intent="positive" color="default"> Hello </Counter>
+        <Counter variant="negative" intent="notice" color="positive"> Hello </Counter>
+
+        <CardHeaderCounter variant="blue"> Hello </CardHeaderCounter>
+        <CardHeaderCounter intent="positive"> Hello </CardHeaderCounter>
+        <CardHeaderCounter color="default"> Hello </CardHeaderCounter>
+        <CardHeaderCounter variant="blue" intent="positive" color="default"> Hello </CardHeaderCounter>
+        <CardHeaderCounter variant="negative" intent="notice" color="positive"> Hello </CardHeaderCounter>
+
+        <Indicator intent="positive" />
+
+        <Button variant="secondary" color="default"> Click Me </Button>
+        <Button variant="secondary" color="white"> Click Me </Button>
+
+        <CardHeaderIconButton variant="secondary" color="default"> Click Me </CardHeaderIconButton>
+        <CardHeaderIconButton variant="secondary" color="white"> Click Me </CardHeaderIconButton>
+
+        <Link color="default" href="https://github.com/razorpay/blade" variant="anchor">
+          Learn More
+        </Link>
+
+        <CardHeaderLink color="default" href="https://github.com/razorpay/blade" variant="anchor">
+          Learn More
+        </CardHeaderLink>
+
+        <ChipGroup defaultValue="yes">
+          <Chip intent="positive" value="yes"> Yes </Chip>
+          <Chip intent="negative" value="no"> No </Chip>
+        </ChipGroup>
+
+        <ChipGroup defaultValue="yes" intent="none">
+          <Chip value="yes" intent="none"> Yes </Chip>
+          <Chip value="no" intent="none"> No </Chip>
+        </ChipGroup>
+
+        <ChipGroup defaultValue="yes" color="default">
+          <Chip value="yes" color="default"> Yes </Chip>
+          <Chip value="no" color="default"> No </Chip>
+        </ChipGroup>
+
+        <Amount intent="positive" value={1234} />
+
+        <CardHeaderAmount intent="positive" value={1234} />
+
+        <ProgressBar intent="positive" label="Label" size="medium" value={10} />
+        <ProgressBar intent="positive" label="Label" size="medium" value={10}  contrast="low"  />
+        <ProgressBar intent="positive" label="Label" size="medium" value={10}  contrast="high"  />
+
+        <Spinner contrast="high" />
+        <Spinner contrast="low" />
+        <Spinner color="default" />
+      </>
+    );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+          <>
+            <Alert description="Hello World" color="information" />
+
+            <Badge color="primary"> Hello </Badge>
+            <Badge color="primary"> Hello </Badge>
+            <Badge color="primary"> Hello </Badge>
+            <Badge color="positive"> Hello </Badge>
+
+            <CardHeaderBadge color="primary"> Hello </CardHeaderBadge>
+            <CardHeaderBadge color="primary"> Hello </CardHeaderBadge>
+            <CardHeaderBadge color="primary"> Hello </CardHeaderBadge>
+            <CardHeaderBadge color="positive"> Hello </CardHeaderBadge>
+
+            <Counter color="primary"> Hello </Counter>
+            <Counter color="positive"> Hello </Counter>
+            <Counter color="primary"> Hello </Counter>
+            <Counter color="primary"> Hello </Counter>
+            <Counter color="positive"> Hello </Counter>
+
+            <CardHeaderCounter color="primary"> Hello </CardHeaderCounter>
+            <CardHeaderCounter color="positive"> Hello </CardHeaderCounter>
+            <CardHeaderCounter color="primary"> Hello </CardHeaderCounter>
+            <CardHeaderCounter color="primary"> Hello </CardHeaderCounter>
+            <CardHeaderCounter color="positive"> Hello </CardHeaderCounter>
+
+            <Indicator color="positive" />
+
+            <Button variant="secondary" color="primary"> Click Me </Button>
+            <Button variant="secondary" color="white"> Click Me </Button>
+
+            <CardHeaderIconButton variant="secondary" color="primary"> Click Me </CardHeaderIconButton>
+            <CardHeaderIconButton variant="secondary" color="white"> Click Me </CardHeaderIconButton>
+
+            <Link color="primary" href="https://github.com/razorpay/blade" variant="anchor">
+              Learn More
+            </Link>
+
+            <CardHeaderLink color="primary" href="https://github.com/razorpay/blade" variant="anchor">
+              Learn More
+            </CardHeaderLink>
+
+            <ChipGroup defaultValue="yes">
+              <Chip value="yes" color="positive"> Yes </Chip>
+              <Chip value="no" color="negative"> No </Chip>
+            </ChipGroup>
+
+            <ChipGroup defaultValue="yes" color="primary">
+              <Chip value="yes" color="primary"> Yes </Chip>
+              <Chip value="no" color="primary"> No </Chip>
+            </ChipGroup>
+
+            <ChipGroup defaultValue="yes" color="primary">
+              <Chip value="yes" color="primary"> Yes </Chip>
+              <Chip value="no" color="primary"> No </Chip>
+            </ChipGroup>
+
+            <Amount color="feedback.text.positive.intense" value={1234} />
+
+            <CardHeaderAmount color="feedback.text.positive.intense" value={1234} />
+
+            <ProgressBar label="Label" size="medium" value={10} color="positive" />
+            <ProgressBar label="Label" size="medium" value={10} color="positive" />
+            <ProgressBar label="Label" size="medium" value={10} contrast="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"  color="positive"  />
+
+            <Spinner color="white" />
+            <Spinner color="primary" />
+            <Spinner color="primary" />
+          </>
+        );"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-divider.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-divider.test.ts
new file mode 100644
index 00000000000..7702e123200
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-divider.test.ts
@@ -0,0 +1,24 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the Divider component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+          <Divider variant="normal" />
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+              <Divider variant="muted" />
+            </>
+          );"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-dropdown.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-dropdown.test.ts
new file mode 100644
index 00000000000..199929a0f3b
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-dropdown.test.ts
@@ -0,0 +1,282 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the Dropdown component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => {
+        const [status, setStatus] = React.useState<string | undefined>('latest-added');
+        const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+        return (
+            <Box padding="spacing.10" display="flex" alignItems="center" gap="spacing.2">
+                <Text>Sort By</Text>
+                <Box flex="1">
+                    <Dropdown onDismiss={() => setIsDropdownOpen(false)}>
+                        <DropdownLink
+                            icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}
+                            iconPosition="right"
+                            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                        >
+                            {status ?? ''}
+                        </DropdownLink>
+                        <DropdownOverlay>
+                            <ActionList>
+                                <ActionListItem
+                                    onClick={({ name, value }) => {
+                                    console.log({ name, value });
+                                    setStatus(name);
+                                    }}
+                                    isSelected={status === 'latest-added'}
+                                    title="Latest Added"
+                                    value="latest-added"
+                                />
+                                <ActionListItem
+                                    onClick={({ name, value }) => {
+                                    console.log({ name, value });
+                                    setStatus(name);
+                                    }}
+                                    isSelected={status === 'latest-invoice'}
+                                    title="Latest Invoice"
+                                    value="latest-invoice"
+                                />
+                            </ActionList>
+                        </DropdownOverlay>
+                    </Dropdown>
+                </Box>
+            </Box>
+        );
+    }
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => {
+            const [status, setStatus] = React.useState<string | undefined>('latest-added');
+            const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+            return (
+                <Box padding="spacing.10" display="flex" alignItems="center" gap="spacing.2">
+                    <Text>Sort By</Text>
+                    <Box flex="1">
+                        <Dropdown onOpenChange={isOpen => {
+                            if (!isOpen) {
+                                setIsDropdownOpen(false);
+                            }
+                        }}>
+                            <DropdownLink
+                                icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}
+                                iconPosition="right"
+                                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                            >
+                                {status ?? ''}
+                            </DropdownLink>
+                            <DropdownOverlay>
+                                <ActionList>
+                                    <ActionListItem
+                                        onClick={({ name, value }) => {
+                                        console.log({ name, value });
+                                        setStatus(name);
+                                        }}
+                                        isSelected={status === 'latest-added'}
+                                        title="Latest Added"
+                                        value="latest-added"
+                                    />
+                                    <ActionListItem
+                                        onClick={({ name, value }) => {
+                                        console.log({ name, value });
+                                        setStatus(name);
+                                        }}
+                                        isSelected={status === 'latest-invoice'}
+                                        title="Latest Invoice"
+                                        value="latest-invoice"
+                                    />
+                                </ActionList>
+                            </DropdownOverlay>
+                        </Dropdown>
+                    </Box>
+                </Box>
+            );
+        }"
+  `);
+});
+
+it('should migrate various scenarios for the onDismiss prop', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+      const App = () => {
+          return (
+            <Box padding="spacing.10" display="flex" alignItems="center" gap="spacing.2">
+                <Dropdown
+                    onDismiss={() => console.log("Dismissed!!!")}
+                >
+                    <DropdownButton icon={MyAccountIcon} variant="secondary">
+                        My Account
+                    </DropdownButton>
+                    <DropdownOverlay>
+                        <ActionList>
+                            <ActionListItem
+                                intent="negative"
+                                title="Log Out"
+                                value="logout"
+                            />
+                        </ActionList>
+                    </DropdownOverlay>
+                </Dropdown>
+
+                <Dropdown
+                    onDismiss={function () {
+                        console.log("Dismissed!!!")
+                        setIsDropdownOpen(false);
+                    }}
+                >
+                    <DropdownButton icon={MyAccountIcon} variant="secondary">
+                        My Account
+                    </DropdownButton>
+                    <DropdownOverlay>
+                        <ActionList>
+                            <ActionListItem
+                                intent="negative"
+                                title="Log Out"
+                                value="logout"
+                            />
+                        </ActionList>
+                    </DropdownOverlay>
+                </Dropdown>
+
+                <Dropdown
+                    onDismiss={() => {
+                        console.log("Dismissed!!!");
+                        setIsDropdownOpen(false);
+                    }}
+                >
+                    <DropdownButton icon={MyAccountIcon} variant="secondary">
+                        My Account
+                    </DropdownButton>
+                    <DropdownOverlay>
+                        <ActionList>
+                            <ActionListItem
+                                intent="negative"
+                                title="Log Out"
+                                value="logout"
+                            />
+                        </ActionList>
+                    </DropdownOverlay>
+                </Dropdown>
+            
+                <Dropdown onDismiss={handleDropdownDismiss} >
+                    <DropdownButton icon={MyAccountIcon} variant="secondary">
+                        My Account
+                    </DropdownButton>
+                    <DropdownOverlay>
+                        <ActionList>
+                            <ActionListItem
+                                intent="negative"
+                                title="Log Out"
+                                value="logout"
+                            />
+                        </ActionList>
+                    </DropdownOverlay>
+                </Dropdown>
+            </Box>
+          );
+      }
+      `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => {
+              return (
+                  <Box padding="spacing.10" display="flex" alignItems="center" gap="spacing.2">
+                      <Dropdown
+                          onOpenChange={isOpen => {
+                              if (!isOpen) {
+                                  console.log("Dismissed!!!");
+                              }
+                          }}
+                      >
+                          <DropdownButton icon={MyAccountIcon} variant="secondary">
+                              My Account
+                          </DropdownButton>
+                          <DropdownOverlay>
+                              <ActionList>
+                                  <ActionListItem
+                                      intent="negative"
+                                      title="Log Out"
+                                      value="logout"
+                                  />
+                              </ActionList>
+                          </DropdownOverlay>
+                      </Dropdown>
+
+                      <Dropdown
+                          onOpenChange={isOpen => {
+                              if (!isOpen) {
+                                  console.log("Dismissed!!!")
+                                  setIsDropdownOpen(false);
+                              }
+                          }}
+                      >
+                          <DropdownButton icon={MyAccountIcon} variant="secondary">
+                              My Account
+                          </DropdownButton>
+                          <DropdownOverlay>
+                              <ActionList>
+                                  <ActionListItem
+                                      intent="negative"
+                                      title="Log Out"
+                                      value="logout"
+                                  />
+                              </ActionList>
+                          </DropdownOverlay>
+                      </Dropdown>
+
+                      <Dropdown
+                          onOpenChange={isOpen => {
+                              if (!isOpen) {
+                                  console.log("Dismissed!!!");
+                                  setIsDropdownOpen(false);
+                              }
+                          }}
+                      >
+                          <DropdownButton icon={MyAccountIcon} variant="secondary">
+                              My Account
+                          </DropdownButton>
+                          <DropdownOverlay>
+                              <ActionList>
+                                  <ActionListItem
+                                      intent="negative"
+                                      title="Log Out"
+                                      value="logout"
+                                  />
+                              </ActionList>
+                          </DropdownOverlay>
+                      </Dropdown>
+                  
+                      <Dropdown onOpenChange={isOpen => {
+                          if (!isOpen) {
+                              handleDropdownDismiss();
+                          }
+                      }} >
+                          <DropdownButton icon={MyAccountIcon} variant="secondary">
+                              My Account
+                          </DropdownButton>
+                          <DropdownOverlay>
+                              <ActionList>
+                                  <ActionListItem
+                                      intent="negative"
+                                      title="Log Out"
+                                      value="logout"
+                                  />
+                              </ActionList>
+                          </DropdownOverlay>
+                      </Dropdown>
+                  </Box>
+              );
+          }"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts
new file mode 100644
index 00000000000..91638cebcb6
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts
@@ -0,0 +1,182 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the ActionList component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+            <Table {...args} data={data} surfaceLevel={3}>
+                {(tableData) => (
+                    <>
+                        <TableHeader>
+                        <TableHeaderRow>
+                            <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                            <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                            <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                        </TableHeaderRow>
+                        </TableHeader>
+                        <TableBody>
+                        {tableData.map((tableItem, index) => (
+                            <TableRow key={index} item={tableItem}>
+                            <TableCell>
+                                <Code size="medium">{tableItem.paymentId}</Code>
+                            </TableCell>
+                            <TableCell>
+                                <Amount value={tableItem.amount} />
+                            </TableCell>
+                            <TableCell>{tableItem.account}</TableCell>
+                            </TableRow>
+                        ))}
+                        </TableBody>
+                    </>
+                )}
+            </Table>
+
+            <Table {...args} data={data} surfaceLevel={2}>
+                {(tableData) => (
+                    <>
+                        <TableHeader>
+                        <TableHeaderRow>
+                            <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                            <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                            <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                        </TableHeaderRow>
+                        </TableHeader>
+                        <TableBody>
+                        {tableData.map((tableItem, index) => (
+                            <TableRow key={index} item={tableItem}>
+                            <TableCell>
+                                <Code size="medium">{tableItem.paymentId}</Code>
+                            </TableCell>
+                            <TableCell>
+                                <Amount value={tableItem.amount} />
+                            </TableCell>
+                            <TableCell>{tableItem.account}</TableCell>
+                            </TableRow>
+                        ))}
+                        </TableBody>
+                    </>
+                )}
+            </Table>
+
+            <Table {...args} data={data} surfaceLevel={1}>
+                {(tableData) => (
+                    <>
+                        <TableHeader>
+                        <TableHeaderRow>
+                            <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                            <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                            <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                        </TableHeaderRow>
+                        </TableHeader>
+                        <TableBody>
+                        {tableData.map((tableItem, index) => (
+                            <TableRow key={index} item={tableItem}>
+                            <TableCell>
+                                <Code size="medium">{tableItem.paymentId}</Code>
+                            </TableCell>
+                            <TableCell>
+                                <Amount value={tableItem.amount} />
+                            </TableCell>
+                            <TableCell>{tableItem.account}</TableCell>
+                            </TableRow>
+                        ))}
+                        </TableBody>
+                    </>
+                )}
+            </Table>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+                <Table {...args} data={data}>
+                    {(tableData) => (
+                        <>
+                            <TableHeader>
+                            <TableHeaderRow>
+                                <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                                <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                                <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                            </TableHeaderRow>
+                            </TableHeader>
+                            <TableBody>
+                            {tableData.map((tableItem, index) => (
+                                <TableRow key={index} item={tableItem}>
+                                <TableCell>
+                                    <Code size="medium">{tableItem.paymentId}</Code>
+                                </TableCell>
+                                <TableCell>
+                                    <Amount value={tableItem.amount} />
+                                </TableCell>
+                                <TableCell>{tableItem.account}</TableCell>
+                                </TableRow>
+                            ))}
+                            </TableBody>
+                        </>
+                    )}
+                </Table>
+
+                <Table {...args} data={data}>
+                    {(tableData) => (
+                        <>
+                            <TableHeader>
+                            <TableHeaderRow>
+                                <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                                <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                                <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                            </TableHeaderRow>
+                            </TableHeader>
+                            <TableBody>
+                            {tableData.map((tableItem, index) => (
+                                <TableRow key={index} item={tableItem}>
+                                <TableCell>
+                                    <Code size="medium">{tableItem.paymentId}</Code>
+                                </TableCell>
+                                <TableCell>
+                                    <Amount value={tableItem.amount} />
+                                </TableCell>
+                                <TableCell>{tableItem.account}</TableCell>
+                                </TableRow>
+                            ))}
+                            </TableBody>
+                        </>
+                    )}
+                </Table>
+
+                <Table {...args} data={data}>
+                    {(tableData) => (
+                        <>
+                            <TableHeader>
+                            <TableHeaderRow>
+                                <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                                <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                                <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                            </TableHeaderRow>
+                            </TableHeader>
+                            <TableBody>
+                            {tableData.map((tableItem, index) => (
+                                <TableRow key={index} item={tableItem}>
+                                <TableCell>
+                                    <Code size="medium">{tableItem.paymentId}</Code>
+                                </TableCell>
+                                <TableCell>
+                                    <Amount value={tableItem.amount} />
+                                </TableCell>
+                                <TableCell>{tableItem.account}</TableCell>
+                                </TableRow>
+                            ))}
+                            </TableBody>
+                        </>
+                    )}
+                </Table>
+            </>
+          );"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts
new file mode 100644
index 00000000000..c0129b1a246
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts
@@ -0,0 +1,432 @@
+import path from 'path';
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+import { red } from '../utils';
+
+it('should update the lineHeight & fontSize tokens', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const CustomHeading = styled(Heading)\`
+            font-size: \${theme.typography.fonts.size[1600]};
+            line-height: \${theme.typography.lineHeights[1500]};
+        \`  
+        const App = () => (
+            <>
+              <CustomHeading> Lorem ipsum </CustomHeading>  
+            </>
+          );
+        `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const CustomHeading = styled(Heading)\`
+                font-size: \${theme.typography.fonts.size[1100]};
+                line-height: \${theme.typography.lineHeights[1100]};
+            \`  
+            const App = () => (
+                <>
+                  <CustomHeading> Lorem ipsum </CustomHeading>  
+                </>
+              );"
+  `);
+});
+
+it('should remove the "variant" prop from Heading', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const App = () => (
+          <>
+            <Heading type="subtle" weight="bold" variant="subheading" marginTop="spacing.2"> Lorem ipsum </Heading>  
+          </>
+        );
+      `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+              <>
+                <Text weight="semibold" marginTop="spacing.2" size="small" color="surface.text.gray.subtle"> Lorem ipsum </Text>  
+              </>
+            );"
+  `);
+});
+
+it('should remove the "type" prop and change weight="bold" to weight="semibold"', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+          const App = () => (
+            <>
+                <Text type="subtle" weight="bold"> Lorem ipsum </Text>
+                <CardHeaderText type="subtle" weight="bold"> Lorem ipsum </CardHeaderText>
+                <Heading type="subtle" weight="bold"> Lorem ipsum </Heading>
+                <Title type="subtle" weight="bold"> Lorem ipsum </Title>
+                <Display type="subtle" weight="bold"> Lorem ipsum </Display>
+                // weight="bold" should not be changed
+                <Code weight="bold"> Lorem ipsum </Code>
+
+                <Text type="subtle" weight="bold" color="brand.primary.500"> Lorem ipsum </Text>
+            </>
+          );
+        `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+                <>
+                    <Text weight="semibold" color="surface.text.gray.subtle"> Lorem ipsum </Text>
+                    <CardHeaderText weight="semibold" color="surface.text.gray.subtle"> Lorem ipsum </CardHeaderText>
+                    <Text weight="semibold" size="large" color="surface.text.gray.subtle"> Lorem ipsum </Text>
+                    <Heading weight="semibold" size="large" color="surface.text.gray.subtle"> Lorem ipsum </Heading>
+                    <Display weight="semibold" color="surface.text.gray.subtle"> Lorem ipsum </Display>
+                    // weight="bold" should not be changed
+                    <Code weight="bold"> Lorem ipsum </Code>
+
+                    <Text weight="semibold" color="surface.text.primary.normal"> Lorem ipsum </Text>
+                </>
+              );"
+  `);
+});
+
+it('should remove the "type" & "variant" prop with nested components', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+      <>
+        <Display type="normal" size="large" marginTop="120px">
+            Lorem ipsum
+            <Display type="normal" as="span"size="large" color="brand.secondary.500">
+                Lorem ipsum
+            </Display>
+        </Display>
+        <Heading type="normal" variant="regular" size="large" marginTop="120px">
+            Lorem ipsum
+            <Heading type="normal" variant="subheading" as="span" color="brand.secondary.500">
+                Lorem ipsum
+            </Heading>
+        </Heading>
+      </>
+    );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+          <>
+            <Display size="large" marginTop="120px" color="surface.text.gray.normal">
+                Lorem ipsum
+                <Display as="span" size="large" color="surface.text.onSea.onSubtle">
+                    Lorem ipsum
+                </Display>
+            </Display>
+            <Heading marginTop="120px" size="medium" color="surface.text.gray.normal">
+                Lorem ipsum
+                <Text as="span" color="surface.text.onSea.onSubtle" size="small">
+                    Lorem ipsum
+                </Text>
+            </Heading>
+          </>
+        );"
+  `);
+});
+
+it('should update <Heading size="large|medium"> to <Heading size="medium|small">', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const App = () => (
+          <>
+            <Heading size="large"> Lorem ipsum </Heading>
+            <Heading size="medium"> Lorem ipsum </Heading>
+
+            <Heading size="large"> Lorem ipsum <Heading size="large"> Lorem ipsum </Heading> </Heading>
+            <Heading size="medium"> Lorem ipsum <Heading size="medium"> Lorem ipsum </Heading> </Heading>
+          </>
+        );
+      `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+              <>
+                <Heading size="medium"> Lorem ipsum </Heading>
+                <Heading size="small"> Lorem ipsum </Heading>
+
+                <Heading size="medium"> Lorem ipsum <Heading size="medium"> Lorem ipsum </Heading> </Heading>
+                <Heading size="small"> Lorem ipsum <Heading size="small"> Lorem ipsum </Heading> </Heading>
+              </>
+            );"
+  `);
+});
+
+it('should update <Heading size="small"> to <Text size="large">', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const App = () => (
+          <>
+            <Heading size="small"> Lorem ipsum </Heading>
+
+            <Heading size="small"> Lorem ipsum <Heading size="small"> Lorem ipsum </Heading> </Heading>
+          </>
+        );
+      `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+              <>
+                <Text size="large"> Lorem ipsum </Text>
+
+                <Text size="large"> Lorem ipsum <Text size="large"> Lorem ipsum </Text> </Text>
+              </>
+            );"
+  `);
+});
+
+it('should update <Heading variant="subheading"> to <Text size="small">', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const App = () => (
+          <>
+            <Heading variant="regular"> Lorem ipsum </Heading> 
+            <Heading variant="subheading"> Lorem ipsum </Heading>
+            <Heading variant="subheading"> Lorem ipsum <Heading variant="subheading"> Lorem ipsum </Heading> </Heading>
+          </>
+        );
+      `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+              <>
+                <Text size="large"> Lorem ipsum </Text> 
+                <Text size="small"> Lorem ipsum </Text>
+                <Text size="small"> Lorem ipsum <Text size="small"> Lorem ipsum </Text> </Text>
+              </>
+            );"
+  `);
+});
+
+it('should update <Text variant="caption" size="medium"> to <Text variant="caption" size="small">', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const App = () => (
+          <>
+            // size="medium" should not be changed if variant is not "caption"
+            <Text size="medium">  Lorem ipsum </Text>
+            <Text variant="caption">  Lorem ipsum </Text>
+            <Text variant="caption" size="medium"> Lorem ipsum </Text>
+            <Text variant="caption" size="medium"> Lorem ipsum <Text variant="caption" size="medium" color="brand.primary.500"> Lorem ipsum </Text> </Text>
+
+            <CardHeaderText size="medium">  Lorem ipsum </CardHeaderText>
+            <CardHeaderText variant="caption">  Lorem ipsum </CardHeaderText>
+            <CardHeaderText variant="caption" size="medium"> Lorem ipsum </CardHeaderText>
+          </>
+        );
+      `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+              <>
+                // size="medium" should not be changed if variant is not "caption"
+                <Text size="medium">  Lorem ipsum </Text>
+                <Text variant="caption">  Lorem ipsum </Text>
+                <Text variant="caption" size="small"> Lorem ipsum </Text>
+                <Text variant="caption" size="small"> Lorem ipsum <Text variant="caption" size="small" color="surface.text.primary.normal"> Lorem ipsum </Text> </Text>
+
+                <CardHeaderText size="medium">  Lorem ipsum </CardHeaderText>
+                <CardHeaderText variant="caption">  Lorem ipsum </CardHeaderText>
+                <CardHeaderText variant="caption" size="small"> Lorem ipsum </CardHeaderText>
+              </>
+            );"
+  `);
+});
+
+it('should update <Heading size="small"> to <Text size="large">', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const App = () => (
+          <>
+            <Heading size="small"> Lorem ipsum </Heading>
+
+            <Heading size="small"> Lorem ipsum <Heading size="small"> Lorem ipsum </Heading> </Heading>
+          </>
+        );
+      `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+              <>
+                <Text size="large"> Lorem ipsum </Text>
+
+                <Text size="large"> Lorem ipsum <Text size="large"> Lorem ipsum </Text> </Text>
+              </>
+            );"
+  `);
+});
+
+it('should correctly convert Title to Heading component', async () => {
+  const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+  const result = await applyTransform(
+    transformer,
+    {
+      path: path.resolve(__dirname, __filename),
+      source: `
+      import { Title, Heading } from '@razorpay/blade/components';
+      const App = () => (
+        <>
+          <Title> Lorem ipsum </Title>  
+          <Title type="subtle" weight="bold" size="xlarge" > Lorem ipsum </Title>
+          <Title type="subtle" weight="bold" size="large" > Lorem ipsum </Title>
+          <Title type="subtle" weight="bold" size="medium" > Lorem ipsum </Title>
+          <Title type="subtle" weight="bold" size="small" > Lorem ipsum </Title>
+          // Conditional expression props should not be changed
+          <Title type="subtle" weight="bold" size={isMobile ? 'medium' : 'large'} > Lorem ipsum </Title>
+  
+          <Title type="subtle" weight="bold" size="xlarge" > Lorem ipsum <Title type="subtle" weight="bold" size="xlarge" > Lorem ipsum  </Title>  </Title>
+          <Title type="subtle" weight="bold" size="large" > Lorem ipsum <Title type="subtle" weight="bold" size="large" > Lorem ipsum </Title> </Title>
+          <Title type="subtle" weight="bold" size="medium" > Lorem ipsum <Title type="subtle" weight="bold" size="medium" > Lorem ipsum </Title> </Title>
+          <Title type="subtle" weight="bold" size="small" > Lorem ipsum <Title type="subtle" weight="bold" size="small" > Lorem ipsum </Title> </Title>
+          // Conditional expression props should not be changed
+          <Title type="subtle" weight="bold" size={isMobile ? 'medium' : 'large'} > <Title type="subtle" weight="bold" size={isMobile ? 'medium' : 'large'} > Lorem ipsum </Title> Lorem ipsum </Title>
+        </>
+      );
+      `,
+    },
+    { parser: 'tsx' },
+  );
+
+  expect(consoleSpy).toHaveBeenCalledTimes(3);
+
+  expect(consoleSpy).toHaveBeenNthCalledWith(
+    1,
+    red('\n⛔️ Expression found in the "size" attribute, please update manually:'),
+    red(`${path.resolve(__dirname, __filename)}:11:10\n`),
+  );
+  expect(consoleSpy).toHaveBeenNthCalledWith(
+    2,
+    red('\n⛔️ Expression found in the "size" attribute, please update manually:'),
+    red(`${path.resolve(__dirname, __filename)}:18:10\n`),
+  );
+  expect(consoleSpy).toHaveBeenNthCalledWith(
+    3,
+    red('\n⛔️ Expression found in the "size" attribute, please update manually:'),
+    red(`${path.resolve(__dirname, __filename)}:18:84\n`),
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "import { Heading } from '@razorpay/blade/components';
+          const App = () => (
+            <>
+              <Heading size="large"> Lorem ipsum </Heading>  
+              <Heading weight="semibold" size="2xlarge" color="surface.text.gray.subtle" > Lorem ipsum </Heading>
+              <Heading weight="semibold" size="xlarge" color="surface.text.gray.subtle" > Lorem ipsum </Heading>
+              <Heading weight="semibold" size="xlarge" color="surface.text.gray.subtle" > Lorem ipsum </Heading>
+              <Heading weight="semibold" size="large" color="surface.text.gray.subtle" > Lorem ipsum </Heading>
+              // Conditional expression props should not be changed
+              <Heading weight="semibold" size={isMobile ? 'medium' : 'large'} color="surface.text.gray.subtle" > Lorem ipsum </Heading>
+      
+              <Heading weight="semibold" size="2xlarge" color="surface.text.gray.subtle" > Lorem ipsum <Heading weight="semibold" size="2xlarge" color="surface.text.gray.subtle" > Lorem ipsum  </Heading>  </Heading>
+              <Heading weight="semibold" size="xlarge" color="surface.text.gray.subtle" > Lorem ipsum <Heading weight="semibold" size="xlarge" color="surface.text.gray.subtle" > Lorem ipsum </Heading> </Heading>
+              <Heading weight="semibold" size="xlarge" color="surface.text.gray.subtle" > Lorem ipsum <Heading weight="semibold" size="xlarge" color="surface.text.gray.subtle" > Lorem ipsum </Heading> </Heading>
+              <Heading weight="semibold" size="large" color="surface.text.gray.subtle" > Lorem ipsum <Heading weight="semibold" size="large" color="surface.text.gray.subtle" > Lorem ipsum </Heading> </Heading>
+              // Conditional expression props should not be changed
+              <Heading weight="semibold" size={isMobile ? 'medium' : 'large'} color="surface.text.gray.subtle" > <Heading weight="semibold" size={isMobile ? 'medium' : 'large'} color="surface.text.gray.subtle" > Lorem ipsum </Heading> Lorem ipsum </Heading>
+            </>
+          );"
+  `);
+
+  consoleSpy.mockRestore();
+});
+
+it('should migrate contrast prop', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const App = () => (
+          <>
+            <Text contrast="high"> Lorem ipsum </Text>
+            <Text contrast="low"> Lorem ipsum </Text>
+
+            <Text color="feedback.text.information.lowContrast"> Lorem ipsum </Text>
+            <Text color="brand.gray.200.lowContrast"> Lorem ipsum </Text>
+            <Text color="brand.gray.200.highContrast"> Lorem ipsum </Text>
+
+            <Text color="brand.gray.200.lowContrast" contrast="high"> Lorem ipsum </Text>
+            <Text color="brand.gray.200.highContrast" contrast="low"> Lorem ipsum </Text>
+
+            <CardHeaderText color="brand.gray.200.highContrast" contrast="low"> Lorem ipsum </CardHeaderText>
+            <CardHeaderText color="brand.gray.200.lowContrast" contrast="high"> Lorem ipsum </CardHeaderText>
+
+            <CardHeaderText contrast="high"> Lorem ipsum </CardHeaderText>
+            <CardHeaderText contrast="low"> Lorem ipsum </CardHeaderText>
+
+            <CardHeaderText color="feedback.text.information.lowContrast"> Lorem ipsum </CardHeaderText>
+            <CardHeaderText color="brand.gray.200.lowContrast"> Lorem ipsum </CardHeaderText>
+            <CardHeaderText color="brand.gray.200.highContrast"> Lorem ipsum </CardHeaderText>
+
+            <CardHeaderText color="brand.gray.200.lowContrast" contrast="high"> Lorem ipsum </CardHeaderText>
+            <CardHeaderText color="brand.gray.200.highContrast" contrast="low"> Lorem ipsum </CardHeaderText>
+
+            <CardHeaderText color="brand.gray.200.highContrast" contrast="low"> Lorem ipsum </CardHeaderText>
+            <CardHeaderText color="brand.gray.200.lowContrast" contrast="high"> Lorem ipsum </CardHeaderText>
+          </>
+        );
+      `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+              <>
+                <Text
+                  contrast="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"
+                  color="surface.text.gray.normal"> Lorem ipsum </Text>
+                <Text color="surface.text.gray.normal"> Lorem ipsum </Text>
+
+                <Text color="feedback.text.information.intense"> Lorem ipsum </Text>
+                <Text color="surface.text.gray.moderate"> Lorem ipsum </Text>
+                <Text color="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"> Lorem ipsum </Text>
+
+                <Text color="surface.text.gray.moderate"> Lorem ipsum </Text>
+                <Text color="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"> Lorem ipsum </Text>
+
+                <CardHeaderText color="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"> Lorem ipsum </CardHeaderText>
+                <CardHeaderText color="surface.text.gray.moderate"> Lorem ipsum </CardHeaderText>
+
+                <CardHeaderText
+                  contrast="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"
+                  color="surface.text.gray.normal"> Lorem ipsum </CardHeaderText>
+                <CardHeaderText color="surface.text.gray.normal"> Lorem ipsum </CardHeaderText>
+
+                <CardHeaderText color="feedback.text.information.intense"> Lorem ipsum </CardHeaderText>
+                <CardHeaderText color="surface.text.gray.moderate"> Lorem ipsum </CardHeaderText>
+                <CardHeaderText color="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"> Lorem ipsum </CardHeaderText>
+
+                <CardHeaderText color="surface.text.gray.moderate"> Lorem ipsum </CardHeaderText>
+                <CardHeaderText color="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"> Lorem ipsum </CardHeaderText>
+
+                <CardHeaderText color="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"> Lorem ipsum </CardHeaderText>
+                <CardHeaderText color="surface.text.gray.moderate"> Lorem ipsum </CardHeaderText>
+              </>
+            );"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/colorTokensMapping.json b/packages/blade/codemods/brand-refresh/transformers/colorTokensMapping.json
new file mode 100644
index 00000000000..dd2e2e982e5
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/colorTokensMapping.json
@@ -0,0 +1,624 @@
+{
+  "surface.background.level1.lowContrast": "surface.background.gray.subtle",
+  "surface.background.level1.highContrast": "surface.background.gray.subtle",
+  "surface.background.level2.lowContrast": "surface.background.gray.intense",
+  "surface.background.level2.highContrast": "surface.background.gray.intense",
+  "surface.background.level3.lowContrast": "surface.background.gray.moderate",
+  "surface.background.level3.highContrast": "surface.background.gray.moderate",
+  "surface.border.normal.lowContrast": "surface.border.gray.normal",
+  "surface.border.normal.highContrast": "surface.border.gray.normal",
+  "surface.border.subtle.lowContrast": "surface.border.gray.subtle",
+  "surface.border.subtle.highContrast": "surface.border.gray.subtle",
+  "surface.text.normal.lowContrast": "surface.text.gray.normal",
+  "surface.text.normal.highContrast": "surface.text.gray.normal",
+  "surface.text.subtle.lowContrast": "surface.text.gray.subtle",
+  "surface.text.subtle.highContrast": "surface.text.gray.subtle",
+  "surface.text.subdued.lowContrast": "surface.text.gray.muted",
+  "surface.text.subdued.highContrast": "surface.text.gray.muted",
+  "surface.text.muted.lowContrast": "surface.text.gray.muted",
+  "surface.text.muted.highContrast": "surface.text.gray.muted",
+  "surface.text.placeholder.lowContrast": "surface.text.gray.disabled",
+  "surface.text.placeholder.highContrast": "surface.text.gray.disabled",
+  "surface.action.icon.default.lowContrast": "interactive.icon.gray.normal",
+  "surface.action.icon.default.highContrast": "interactive.icon.gray.normal",
+  "surface.action.icon.hover.lowContrast": "interactive.icon.gray.normal",
+  "surface.action.icon.hover.highContrast": "interactive.icon.gray.normal",
+  "surface.action.icon.focus.lowContrast": "interactive.icon.gray.subtle",
+  "surface.action.icon.focus.highContrast": "interactive.icon.gray.normal",
+  "surface.action.icon.active.lowContrast": "interactive.icon.gray.normal",
+  "surface.action.icon.active.highContrast": "interactive.icon.gray.normal",
+  "surface.action.icon.disabled.lowContrast": "interactive.icon.gray.disabled",
+  "surface.action.icon.disabled.highContrast": "interactive.icon.gray.disabled",
+  "surface.overlay.background.400": "overlay.background.moderate",
+  "surface.overlay.background.800": "overlay.background.subtle",
+  "surface.popup.background": "popup.background.subtle",
+  "brand.primary.300": "surface.background.primary.subtle",
+  "brand.primary.400": "surface.background.primary.subtle",
+  "brand.primary.500": "surface.background.primary.intense",
+  "brand.primary.600": "surface.background.primary.intense",
+  "brand.primary.700": "surface.background.primary.intense",
+  "brand.primary.800": "surface.background.primary.intense",
+  "brand.gray.200.lowContrast": "surface.background.gray.moderate",
+  "brand.gray.200.highContrast": "interactive.background.staticBlack.default",
+  "brand.gray.300.lowContrast": "surface.background.gray.subtle",
+  "brand.gray.300.highContrast": "interactive.background.neutral.default",
+  "brand.gray.400.lowContrast": "interactive.border.gray.faded",
+  "brand.gray.400.highContrast": "interactive.border.gray.faded",
+  "brand.gray.500.lowContrast": "interactive.border.gray.highlighted",
+  "brand.gray.500.highContrast": "interactive.border.gray.highlighted",
+  "brand.gray.600.lowContrast": "interactive.background.gray.highlighted",
+  "brand.gray.600.highContrast": "interactive.background.gray.highlighted",
+  "brand.gray.700.lowContrast": "interactive.background.neutral.default",
+  "brand.gray.700.highContrast": "interactive.background.staticWhite.default",
+  "brand.gray.a50.lowContrast": "surface.background.gray.moderate",
+  "brand.gray.a50.highContrast": "surface.background.gray.moderate",
+  "brand.gray.a100.lowContrast": "surface.background.gray.subtle",
+  "brand.gray.a100.highContrast": "surface.background.gray.subtle",
+  "brand.secondary.500": "surface.text.onSea.onSubtle",
+  "feedback.background.positive.lowContrast": "feedback.background.positive.subtle",
+  "feedback.background.positive.highContrast": "feedback.background.positive.intense",
+  "feedback.background.negative.lowContrast": "feedback.background.negative.subtle",
+  "feedback.background.negative.highContrast": "feedback.background.negative.intense",
+  "feedback.background.notice.lowContrast": "feedback.background.notice.subtle",
+  "feedback.background.notice.highContrast": "feedback.background.notice.intense",
+  "feedback.background.information.lowContrast": "feedback.background.information.subtle",
+  "feedback.background.information.highContrast": "feedback.background.information.intense",
+  "feedback.background.neutral.lowContrast": "feedback.background.neutral.subtle",
+  "feedback.background.neutral.highContrast": "feedback.background.neutral.intense",
+  "feedback.border.positive.lowContrast": "feedback.border.positive.subtle",
+  "feedback.border.positive.highContrast": "feedback.border.positive.intense",
+  "feedback.border.negative.lowContrast": "feedback.border.negative.subtle",
+  "feedback.border.negative.highContrast": "feedback.border.negative.intense",
+  "feedback.border.notice.lowContrast": "feedback.border.notice.subtle",
+  "feedback.border.notice.highContrast": "feedback.border.notice.intense",
+  "feedback.border.information.lowContrast": "feedback.border.information.subtle",
+  "feedback.border.information.highContrast": "feedback.border.information.intense",
+  "feedback.border.neutral.lowContrast": "feedback.border.neutral.subtle",
+  "feedback.border.neutral.highContrast": "feedback.border.neutral.intense",
+  "feedback.text.positive.lowContrast": "feedback.text.positive.intense",
+  "feedback.text.positive.highContrast": "feedback.text.positive.intense",
+  "feedback.text.negative.lowContrast": "feedback.text.negative.intense",
+  "feedback.text.negative.highContrast": "feedback.text.negative.intense",
+  "feedback.text.notice.lowContrast": "feedback.text.notice.intense",
+  "feedback.text.notice.highContrast": "feedback.text.notice.intense",
+  "feedback.text.information.lowContrast": "feedback.text.information.intense",
+  "feedback.text.information.highContrast": "feedback.text.information.intense",
+  "feedback.text.neutral.lowContrast": "feedback.text.neutral.intense",
+  "feedback.text.neutral.highContrast": "surface.text.staticWhite.normal",
+  "feedback.icon.positive.lowContrast": "feedback.icon.positive.intense",
+  "feedback.icon.positive.highContrast": "feedback.icon.positive.intense",
+  "feedback.icon.negative.lowContrast": "feedback.icon.negative.intense",
+  "feedback.icon.negative.highContrast": "feedback.icon.negative.intense",
+  "feedback.icon.notice.lowContrast": "feedback.icon.notice.intense",
+  "feedback.icon.notice.highContrast": "feedback.icon.notice.intense",
+  "feedback.icon.information.lowContrast": "feedback.icon.information.intense",
+  "feedback.icon.information.highContrast": "feedback.icon.information.intense",
+  "feedback.icon.neutral.lowContrast": "feedback.icon.neutral.intense",
+  "feedback.icon.neutral.highContrast": "surface.icon.staticWhite.normal",
+  "feedback.positive.action.background.primary.default.highContrast": "interactive.background.positive.default",
+  "feedback.positive.action.background.primary.default.lowContrast": "interactive.background.positive.faded",
+  "feedback.positive.action.background.primary.hover.highContrast": "interactive.background.positive.default",
+  "feedback.positive.action.background.primary.hover.lowContrast": "interactive.background.positive.faded",
+  "feedback.positive.action.background.primary.focus.highContrast": "interactive.background.positive.default",
+  "feedback.positive.action.background.primary.focus.lowContrast": "interactive.background.positive.faded",
+  "feedback.positive.action.background.primary.active.highContrast": "interactive.background.positive.default",
+  "feedback.positive.action.background.primary.active.lowContrast": "interactive.background.positive.faded",
+  "feedback.positive.action.background.primary.disabled.highContrast": "interactive.background.positive.disabled",
+  "feedback.positive.action.background.primary.disabled.lowContrast": "interactive.background.positive.disabled",
+  "feedback.positive.action.background.secondary.default.lowContrast": "interactive.background.positive.faded",
+  "feedback.positive.action.background.secondary.hover.lowContrast": "interactive.background.positive.faded",
+  "feedback.positive.action.background.secondary.focus.lowContrast": "interactive.background.positive.faded",
+  "feedback.positive.action.background.secondary.active.lowContrast": "interactive.background.positive.faded",
+  "feedback.positive.action.background.secondary.disabled.lowContrast": "interactive.background.positive.disabled",
+  "feedback.positive.action.border.primary.default.highContrast": "interactive.border.positive.default",
+  "feedback.positive.action.border.primary.default.lowContrast": "interactive.border.positive.faded",
+  "feedback.positive.action.border.primary.hover.highContrast": "interactive.border.positive.default",
+  "feedback.positive.action.border.primary.hover.lowContrast": "interactive.border.positive.faded",
+  "feedback.positive.action.border.primary.focus.highContrast": "interactive.border.positive.default",
+  "feedback.positive.action.border.primary.focus.lowContrast": "interactive.border.positive.faded",
+  "feedback.positive.action.border.primary.active.highContrast": "interactive.border.positive.default",
+  "feedback.positive.action.border.primary.active.lowContrast": "interactive.border.positive.faded",
+  "feedback.positive.action.border.primary.disabled.highContrast": "interactive.border.positive.disabled",
+  "feedback.positive.action.border.primary.disabled.lowContrast": "interactive.border.positive.disabled",
+  "feedback.positive.action.border.secondary.default.lowContrast": "interactive.border.positive.faded",
+  "feedback.positive.action.border.secondary.hover.lowContrast": "interactive.border.positive.faded",
+  "feedback.positive.action.border.secondary.focus.lowContrast": "interactive.border.positive.faded",
+  "feedback.positive.action.border.secondary.active.lowContrast": "interactive.border.positive.faded",
+  "feedback.positive.action.border.secondary.disabled.lowContrast": "interactive.border.positive.disabled",
+  "feedback.positive.action.text.primary.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.text.primary.default.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.primary.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.text.primary.hover.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.primary.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.text.primary.focus.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.primary.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.text.primary.active.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.primary.disabled.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.text.primary.disabled.lowContrast": "interactive.text.positive.disabled",
+  "feedback.positive.action.text.secondary.default.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.secondary.hover.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.secondary.focus.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.secondary.active.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.secondary.disabled.lowContrast": "interactive.text.positive.disabled",
+  "feedback.positive.action.text.link.default.lowContrast": "interactive.text.positive.normal",
+  "feedback.positive.action.text.link.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.text.link.hover.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.link.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.text.link.focus.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.link.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.text.link.active.lowContrast": "interactive.text.positive.subtle",
+  "feedback.positive.action.text.link.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.text.link.disabled.lowContrast": "interactive.text.positive.disabled",
+  "feedback.positive.action.text.link.disabled.highContrast": "interactive.text.staticWhite.disabled",
+  "feedback.positive.action.icon.primary.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.positive.action.icon.primary.default.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.primary.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.positive.action.icon.primary.hover.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.primary.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.positive.action.icon.primary.focus.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.primary.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.positive.action.icon.primary.active.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.primary.disabled.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.positive.action.icon.primary.disabled.lowContrast": "interactive.icon.positive.disabled",
+  "feedback.positive.action.icon.secondary.default.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.secondary.hover.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.secondary.focus.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.secondary.active.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.secondary.disabled.lowContrast": "interactive.icon.positive.disabled",
+  "feedback.positive.action.icon.link.default.lowContrast": "interactive.icon.positive.normal",
+  "feedback.positive.action.icon.link.default.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.positive.action.icon.link.hover.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.link.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.positive.action.icon.link.focus.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.link.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.positive.action.icon.link.active.lowContrast": "interactive.icon.positive.subtle",
+  "feedback.positive.action.icon.link.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.positive.action.icon.link.disabled.lowContrast": "interactive.icon.positive.disabled",
+  "feedback.positive.action.icon.link.disabled.highContrast": "interactive.icon.staticWhite.disabled",
+  "feedback.negative.action.background.primary.default.highContrast": "interactive.background.negative.default",
+  "feedback.negative.action.background.primary.default.lowContrast": "interactive.background.negative.faded",
+  "feedback.negative.action.background.primary.hover.highContrast": "interactive.background.negative.default",
+  "feedback.negative.action.background.primary.hover.lowContrast": "interactive.background.negative.faded",
+  "feedback.negative.action.background.primary.focus.highContrast": "interactive.background.negative.default",
+  "feedback.negative.action.background.primary.focus.lowContrast": "interactive.background.negative.faded",
+  "feedback.negative.action.background.primary.active.highContrast": "interactive.background.negative.default",
+  "feedback.negative.action.background.primary.active.lowContrast": "interactive.background.negative.faded",
+  "feedback.negative.action.background.primary.disabled.highContrast": "interactive.background.negative.disabled",
+  "feedback.negative.action.background.primary.disabled.lowContrast": "interactive.background.negative.disabled",
+  "feedback.negative.action.background.secondary.default.lowContrast": "interactive.background.negative.faded",
+  "feedback.negative.action.background.secondary.hover.lowContrast": "interactive.background.negative.faded",
+  "feedback.negative.action.background.secondary.focus.lowContrast": "interactive.background.negative.faded",
+  "feedback.negative.action.background.secondary.active.lowContrast": "interactive.background.negative.faded",
+  "feedback.negative.action.background.secondary.disabled.lowContrast": "interactive.background.negative.disabled",
+  "feedback.negative.action.border.primary.default.highContrast": "interactive.border.negative.default",
+  "feedback.negative.action.border.primary.default.lowContrast": "interactive.border.negative.faded",
+  "feedback.negative.action.border.primary.hover.highContrast": "interactive.border.negative.default",
+  "feedback.negative.action.border.primary.hover.lowContrast": "interactive.border.negative.faded",
+  "feedback.negative.action.border.primary.focus.highContrast": "interactive.border.negative.default",
+  "feedback.negative.action.border.primary.focus.lowContrast": "interactive.border.negative.faded",
+  "feedback.negative.action.border.primary.active.highContrast": "interactive.border.negative.default",
+  "feedback.negative.action.border.primary.active.lowContrast": "interactive.border.negative.faded",
+  "feedback.negative.action.border.primary.disabled.highContrast": "interactive.border.negative.disabled",
+  "feedback.negative.action.border.primary.disabled.lowContrast": "interactive.border.negative.disabled",
+  "feedback.negative.action.border.secondary.default.lowContrast": "interactive.border.negative.faded",
+  "feedback.negative.action.border.secondary.hover.lowContrast": "interactive.border.negative.faded",
+  "feedback.negative.action.border.secondary.focus.lowContrast": "interactive.border.negative.faded",
+  "feedback.negative.action.border.secondary.active.lowContrast": "interactive.border.negative.faded",
+  "feedback.negative.action.border.secondary.disabled.lowContrast": "interactive.border.negative.disabled",
+  "feedback.negative.action.text.primary.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.negative.action.text.primary.default.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.primary.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.negative.action.text.primary.hover.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.primary.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.negative.action.text.primary.focus.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.primary.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.negative.action.text.primary.active.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.primary.disabled.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.negative.action.text.primary.disabled.lowContrast": "interactive.text.negative.disabled",
+  "feedback.negative.action.text.secondary.default.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.secondary.hover.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.secondary.focus.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.secondary.active.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.secondary.disabled.lowContrast": "interactive.text.negative.disabled",
+  "feedback.negative.action.text.link.default.lowContrast": "interactive.text.negative.normal",
+  "feedback.negative.action.text.link.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.negative.action.text.link.hover.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.link.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.negative.action.text.link.focus.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.link.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.negative.action.text.link.active.lowContrast": "interactive.text.negative.subtle",
+  "feedback.negative.action.text.link.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.negative.action.text.link.disabled.lowContrast": "interactive.text.negative.disabled",
+  "feedback.negative.action.text.link.disabled.highContrast": "interactive.text.staticWhite.disabled",
+  "feedback.negative.action.icon.primary.default.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.negative.action.icon.primary.default.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.primary.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.negative.action.icon.primary.hover.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.primary.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.negative.action.icon.primary.focus.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.primary.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.negative.action.icon.primary.active.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.primary.disabled.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.negative.action.icon.primary.disabled.lowContrast": "interactive.icon.negative.disabled",
+  "feedback.negative.action.icon.secondary.default.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.secondary.hover.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.secondary.focus.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.secondary.active.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.secondary.disabled.lowContrast": "interactive.icon.negative.disabled",
+  "feedback.negative.action.icon.link.default.lowContrast": "interactive.icon.negative.normal",
+  "feedback.negative.action.icon.link.default.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.negative.action.icon.link.hover.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.link.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.negative.action.icon.link.focus.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.link.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.negative.action.icon.link.active.lowContrast": "interactive.icon.negative.subtle",
+  "feedback.negative.action.icon.link.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.negative.action.icon.link.disabled.lowContrast": "interactive.icon.negative.disabled",
+  "feedback.negative.action.icon.link.disabled.highContrast": "interactive.icon.staticWhite.disabled",
+  "feedback.notice.action.background.primary.default.highContrast": "interactive.background.notice.default",
+  "feedback.notice.action.background.primary.default.lowContrast": "interactive.background.notice.faded",
+  "feedback.notice.action.background.primary.hover.highContrast": "interactive.background.notice.default",
+  "feedback.notice.action.background.primary.hover.lowContrast": "interactive.background.notice.faded",
+  "feedback.notice.action.background.primary.focus.highContrast": "interactive.background.notice.default",
+  "feedback.notice.action.background.primary.focus.lowContrast": "interactive.background.notice.faded",
+  "feedback.notice.action.background.primary.active.highContrast": "interactive.background.notice.default",
+  "feedback.notice.action.background.primary.active.lowContrast": "interactive.background.notice.faded",
+  "feedback.notice.action.background.primary.disabled.highContrast": "interactive.background.notice.disabled",
+  "feedback.notice.action.background.primary.disabled.lowContrast": "interactive.background.notice.disabled",
+  "feedback.notice.action.background.secondary.default.lowContrast": "interactive.background.notice.faded",
+  "feedback.notice.action.background.secondary.hover.lowContrast": "interactive.background.notice.faded",
+  "feedback.notice.action.background.secondary.focus.lowContrast": "interactive.background.notice.faded",
+  "feedback.notice.action.background.secondary.active.lowContrast": "interactive.background.notice.faded",
+  "feedback.notice.action.background.secondary.disabled.lowContrast": "interactive.background.notice.disabled",
+  "feedback.notice.action.border.primary.default.highContrast": "interactive.border.notice.default",
+  "feedback.notice.action.border.primary.default.lowContrast": "interactive.border.notice.default",
+  "feedback.notice.action.border.primary.hover.highContrast": "interactive.border.notice.default",
+  "feedback.notice.action.border.primary.hover.lowContrast": "interactive.border.notice.default",
+  "feedback.notice.action.border.primary.focus.highContrast": "interactive.border.notice.default",
+  "feedback.notice.action.border.primary.focus.lowContrast": "interactive.border.notice.default",
+  "feedback.notice.action.border.primary.active.highContrast": "interactive.border.notice.default",
+  "feedback.notice.action.border.primary.active.lowContrast": "interactive.border.notice.default",
+  "feedback.notice.action.border.primary.disabled.highContrast": "interactive.border.notice.disabled",
+  "feedback.notice.action.border.primary.disabled.lowContrast": "interactive.border.notice.disabled",
+  "feedback.notice.action.border.secondary.default.lowContrast": "interactive.border.notice.faded",
+  "feedback.notice.action.border.secondary.hover.lowContrast": "interactive.border.notice.faded",
+  "feedback.notice.action.border.secondary.focus.lowContrast": "interactive.border.notice.faded",
+  "feedback.notice.action.border.secondary.active.lowContrast": "interactive.border.notice.faded",
+  "feedback.notice.action.border.secondary.disabled.lowContrast": "interactive.border.notice.disabled",
+  "feedback.notice.action.text.primary.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.notice.action.text.primary.default.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.primary.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.notice.action.text.primary.hover.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.primary.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.notice.action.text.primary.focus.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.primary.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.notice.action.text.primary.active.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.primary.disabled.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.notice.action.text.primary.disabled.lowContrast": "interactive.text.notice.disabled",
+  "feedback.notice.action.text.secondary.default.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.secondary.hover.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.secondary.focus.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.secondary.active.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.secondary.disabled.lowContrast": "interactive.text.notice.disabled",
+  "feedback.notice.action.text.link.default.lowContrast": "interactive.text.notice.normal",
+  "feedback.notice.action.text.link.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.notice.action.text.link.hover.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.link.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.notice.action.text.link.focus.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.link.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.notice.action.text.link.active.lowContrast": "interactive.text.notice.subtle",
+  "feedback.notice.action.text.link.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.notice.action.text.link.disabled.lowContrast": "interactive.text.notice.disabled",
+  "feedback.notice.action.text.link.disabled.highContrast": "interactive.text.staticWhite.disabled",
+  "feedback.notice.action.icon.primary.default.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.notice.action.icon.primary.default.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.primary.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.notice.action.icon.primary.hover.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.primary.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.notice.action.icon.primary.focus.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.primary.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.notice.action.icon.primary.active.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.primary.disabled.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.notice.action.icon.primary.disabled.lowContrast": "interactive.icon.notice.disabled",
+  "feedback.notice.action.icon.secondary.default.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.secondary.hover.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.secondary.focus.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.secondary.active.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.secondary.disabled.lowContrast": "interactive.icon.notice.disabled",
+  "feedback.notice.action.icon.link.default.lowContrast": "interactive.icon.notice.normal",
+  "feedback.notice.action.icon.link.default.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.notice.action.icon.link.hover.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.link.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.notice.action.icon.link.focus.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.link.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.notice.action.icon.link.active.lowContrast": "interactive.icon.notice.subtle",
+  "feedback.notice.action.icon.link.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.notice.action.icon.link.disabled.lowContrast": "interactive.icon.notice.disabled",
+  "feedback.notice.action.icon.link.disabled.highContrast": "interactive.icon.staticWhite.disabled",
+  "feedback.information.action.background.primary.default.highContrast": "interactive.background.information.default",
+  "feedback.information.action.background.primary.default.lowContrast": "interactive.background.information.faded",
+  "feedback.information.action.background.primary.hover.highContrast": "interactive.background.information.default",
+  "feedback.information.action.background.primary.hover.lowContrast": "interactive.background.information.faded",
+  "feedback.information.action.background.primary.focus.highContrast": "interactive.background.information.default",
+  "feedback.information.action.background.primary.focus.lowContrast": "interactive.background.information.faded",
+  "feedback.information.action.background.primary.active.highContrast": "interactive.background.information.default",
+  "feedback.information.action.background.primary.active.lowContrast": "interactive.background.information.faded",
+  "feedback.information.action.background.primary.disabled.highContrast": "interactive.background.information.disabled",
+  "feedback.information.action.background.primary.disabled.lowContrast": "interactive.background.information.disabled",
+  "feedback.information.action.background.secondary.default.lowContrast": "interactive.background.information.faded",
+  "feedback.information.action.background.secondary.hover.lowContrast": "interactive.background.information.faded",
+  "feedback.information.action.background.secondary.focus.lowContrast": "interactive.background.information.faded",
+  "feedback.information.action.background.secondary.active.lowContrast": "interactive.background.information.faded",
+  "feedback.information.action.background.secondary.disabled.lowContrast": "interactive.background.information.disabled",
+  "feedback.information.action.border.primary.default.highContrast": "interactive.border.information.default",
+  "feedback.information.action.border.primary.default.lowContrast": "interactive.border.information.faded",
+  "feedback.information.action.border.primary.hover.highContrast": "interactive.border.information.default",
+  "feedback.information.action.border.primary.hover.lowContrast": "interactive.border.information.faded",
+  "feedback.information.action.border.primary.focus.highContrast": "interactive.border.information.default",
+  "feedback.information.action.border.primary.focus.lowContrast": "interactive.border.information.faded",
+  "feedback.information.action.border.primary.active.highContrast": "interactive.border.information.default",
+  "feedback.information.action.border.primary.active.lowContrast": "interactive.border.information.faded",
+  "feedback.information.action.border.primary.disabled.highContrast": "interactive.border.information.disabled",
+  "feedback.information.action.border.primary.disabled.lowContrast": "interactive.border.information.disabled",
+  "feedback.information.action.border.secondary.default.lowContrast": "interactive.border.information.faded",
+  "feedback.information.action.border.secondary.hover.lowContrast": "interactive.border.information.faded",
+  "feedback.information.action.border.secondary.focus.lowContrast": "interactive.border.information.faded",
+  "feedback.information.action.border.secondary.active.lowContrast": "interactive.border.information.faded",
+  "feedback.information.action.border.secondary.disabled.lowContrast": "interactive.border.information.disabled",
+  "feedback.information.action.text.primary.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.information.action.text.primary.default.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.primary.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.information.action.text.primary.hover.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.primary.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.information.action.text.primary.focus.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.primary.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.information.action.text.primary.active.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.primary.disabled.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.information.action.text.primary.disabled.lowContrast": "interactive.text.information.disabled",
+  "feedback.information.action.text.secondary.default.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.secondary.hover.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.secondary.focus.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.secondary.active.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.secondary.disabled.lowContrast": "interactive.text.information.disabled",
+  "feedback.information.action.text.link.default.lowContrast": "interactive.text.information.normal",
+  "feedback.information.action.text.link.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.information.action.text.link.hover.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.link.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.information.action.text.link.focus.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.link.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.information.action.text.link.active.lowContrast": "interactive.text.information.subtle",
+  "feedback.information.action.text.link.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.information.action.text.link.disabled.lowContrast": "interactive.text.information.disabled",
+  "feedback.information.action.text.link.disabled.highContrast": "interactive.text.staticWhite.disabled",
+  "feedback.information.action.icon.primary.default.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.information.action.icon.primary.default.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.primary.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.information.action.icon.primary.hover.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.primary.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.information.action.icon.primary.focus.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.primary.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.information.action.icon.primary.active.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.primary.disabled.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.information.action.icon.primary.disabled.lowContrast": "interactive.icon.information.disabled",
+  "feedback.information.action.icon.secondary.default.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.secondary.hover.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.secondary.focus.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.secondary.active.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.secondary.disabled.lowContrast": "interactive.icon.information.disabled",
+  "feedback.information.action.icon.link.default.lowContrast": "interactive.icon.information.normal",
+  "feedback.information.action.icon.link.default.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.information.action.icon.link.hover.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.link.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.information.action.icon.link.focus.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.link.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.information.action.icon.link.active.lowContrast": "interactive.icon.information.subtle",
+  "feedback.information.action.icon.link.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.information.action.icon.link.disabled.lowContrast": "interactive.icon.information.disabled",
+  "feedback.information.action.icon.link.disabled.highContrast": "interactive.icon.staticWhite.disabled",
+  "feedback.neutral.action.background.primary.default.highContrast": "interactive.background.neutral.default",
+  "feedback.neutral.action.background.primary.default.lowContrast": "interactive.background.neutral.faded",
+  "feedback.neutral.action.background.primary.hover.highContrast": "interactive.background.neutral.default",
+  "feedback.neutral.action.background.primary.hover.lowContrast": "interactive.background.neutral.faded",
+  "feedback.neutral.action.background.primary.focus.highContrast": "interactive.background.neutral.default",
+  "feedback.neutral.action.background.primary.focus.lowContrast": "interactive.background.neutral.faded",
+  "feedback.neutral.action.background.primary.active.highContrast": "interactive.background.neutral.default",
+  "feedback.neutral.action.background.primary.active.lowContrast": "interactive.background.neutral.faded",
+  "feedback.neutral.action.background.primary.disabled.highContrast": "interactive.background.neutral.disabled",
+  "feedback.neutral.action.background.primary.disabled.lowContrast": "interactive.background.neutral.disabled",
+  "feedback.neutral.action.background.secondary.default.lowContrast": "interactive.background.neutral.faded",
+  "feedback.neutral.action.background.secondary.hover.lowContrast": "interactive.background.neutral.faded",
+  "feedback.neutral.action.background.secondary.focus.lowContrast": "interactive.background.neutral.faded",
+  "feedback.neutral.action.background.secondary.active.lowContrast": "interactive.background.neutral.faded",
+  "feedback.neutral.action.background.secondary.disabled.lowContrast": "interactive.background.neutral.disabled",
+  "feedback.neutral.action.border.primary.default.highContrast": "interactive.border.neutral.default",
+  "feedback.neutral.action.border.primary.default.lowContrast": "interactive.border.neutral.faded",
+  "feedback.neutral.action.border.primary.hover.highContrast": "interactive.border.neutral.default",
+  "feedback.neutral.action.border.primary.hover.lowContrast": "interactive.border.neutral.faded",
+  "feedback.neutral.action.border.primary.focus.highContrast": "interactive.border.neutral.default",
+  "feedback.neutral.action.border.primary.focus.lowContrast": "interactive.border.neutral.faded",
+  "feedback.neutral.action.border.primary.active.highContrast": "interactive.border.neutral.default",
+  "feedback.neutral.action.border.primary.active.lowContrast": "interactive.border.neutral.faded",
+  "feedback.neutral.action.border.primary.disabled.highContrast": "interactive.border.neutral.disabled",
+  "feedback.neutral.action.border.primary.disabled.lowContrast": "interactive.border.neutral.disabled",
+  "feedback.neutral.action.border.secondary.default.lowContrast": "interactive.border.neutral.faded",
+  "feedback.neutral.action.border.secondary.hover.lowContrast": "interactive.border.neutral.faded",
+  "feedback.neutral.action.border.secondary.focus.lowContrast": "interactive.border.neutral.faded",
+  "feedback.neutral.action.border.secondary.active.lowContrast": "interactive.border.neutral.faded",
+  "feedback.neutral.action.border.secondary.disabled.lowContrast": "interactive.border.neutral.disabled",
+  "feedback.neutral.action.text.primary.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.neutral.action.text.primary.default.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.primary.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.neutral.action.text.primary.hover.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.primary.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.neutral.action.text.primary.focus.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.primary.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.neutral.action.text.primary.active.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.primary.disabled.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.neutral.action.text.primary.disabled.lowContrast": "interactive.text.neutral.disabled",
+  "feedback.neutral.action.text.secondary.default.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.secondary.hover.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.secondary.focus.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.secondary.active.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.secondary.disabled.lowContrast": "interactive.text.neutral.disabled",
+  "feedback.neutral.action.text.link.default.lowContrast": "interactive.text.neutral.normal",
+  "feedback.neutral.action.text.link.default.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.neutral.action.text.link.hover.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.link.hover.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.neutral.action.text.link.focus.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.link.focus.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.neutral.action.text.link.active.lowContrast": "interactive.text.neutral.subtle",
+  "feedback.neutral.action.text.link.active.highContrast": "interactive.text.staticWhite.normal",
+  "feedback.neutral.action.text.link.disabled.lowContrast": "interactive.text.neutral.disabled",
+  "feedback.neutral.action.text.link.disabled.highContrast": "interactive.text.staticWhite.disabled",
+  "feedback.neutral.action.icon.primary.default.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.neutral.action.icon.primary.default.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.primary.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.neutral.action.icon.primary.hover.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.primary.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.neutral.action.icon.primary.focus.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.primary.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.neutral.action.icon.primary.active.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.primary.disabled.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.neutral.action.icon.primary.disabled.lowContrast": "interactive.icon.neutral.disabled",
+  "feedback.neutral.action.icon.secondary.default.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.secondary.hover.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.secondary.focus.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.secondary.active.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.secondary.disabled.lowContrast": "interactive.icon.neutral.disabled",
+  "feedback.neutral.action.icon.link.default.lowContrast": "interactive.icon.neutral.normal",
+  "feedback.neutral.action.icon.link.default.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.neutral.action.icon.link.hover.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.link.hover.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.neutral.action.icon.link.focus.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.link.focus.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.neutral.action.icon.link.active.lowContrast": "interactive.icon.neutral.subtle",
+  "feedback.neutral.action.icon.link.active.highContrast": "interactive.icon.staticWhite.normal",
+  "feedback.neutral.action.icon.link.disabled.lowContrast": "interactive.icon.neutral.disabled",
+  "feedback.neutral.action.icon.link.disabled.highContrast": "interactive.icon.staticWhite.disabled",
+  "action.background.primary.default": "interactive.background.primary.default",
+  "action.background.primary.hover": "interactive.background.primary.default",
+  "action.background.primary.focus": "interactive.background.primary.default",
+  "action.background.primary.active": "interactive.background.primary.default",
+  "action.background.primary.disabled": "interactive.background.primary.disabled",
+  "action.background.secondary.hover": "interactive.background.primary.faded",
+  "action.background.secondary.focus": "interactive.background.primary.faded",
+  "action.background.secondary.active": "interactive.background.primary.faded",
+  "action.background.tertiary.default": "interactive.background.gray.default",
+  "action.background.tertiary.hover": "interactive.background.gray.default",
+  "action.background.tertiary.focus": "interactive.background.gray.default",
+  "action.background.tertiary.active": "interactive.background.gray.default",
+  "action.background.tertiary.disabled": "interactive.background.gray.disabled",
+  "action.border.secondary.default": "interactive.border.primary.default",
+  "action.border.secondary.hover": "interactive.border.primary.default",
+  "action.border.secondary.focus": "interactive.border.primary.default",
+  "action.border.secondary.active": "interactive.border.primary.default",
+  "action.border.secondary.disabled": "interactive.border.primary.disabled",
+  "action.text.primary.default": "interactive.text.staticWhite.normal",
+  "action.text.primary.hover": "interactive.text.staticWhite.normal",
+  "action.text.primary.focus": "interactive.text.staticWhite.normal",
+  "action.text.primary.active": "interactive.text.staticWhite.normal",
+  "action.text.primary.disabled": "interactive.text.primary.disabled",
+  "action.text.secondary.default": "interactive.text.primary.normal",
+  "action.text.secondary.hover": "interactive.text.primary.normal",
+  "action.text.secondary.focus": "interactive.text.primary.normal",
+  "action.text.secondary.active": "interactive.text.primary.normal",
+  "action.text.secondary.disabled": "interactive.text.primary.disabled",
+  "action.text.tertiary.default": "interactive.text.gray.normal",
+  "action.text.tertiary.hover": "interactive.text.gray.normal",
+  "action.text.tertiary.focus": "interactive.text.gray.normal",
+  "action.text.tertiary.active": "interactive.text.gray.normal",
+  "action.text.tertiary.disabled": "interactive.text.gray.disabled",
+  "action.text.link.default": "interactive.text.primary.subtle",
+  "action.text.link.hover": "interactive.text.primary.normal",
+  "action.text.link.focus": "interactive.text.primary.normal",
+  "action.text.link.active": "interactive.text.primary.normal",
+  "action.text.link.disabled": "interactive.text.primary.disabled",
+  "action.text.link.visited": "interactive.text.primary.disabled",
+  "action.icon.primary.default": "interactive.icon.staticWhite.normal",
+  "action.icon.primary.hover": "interactive.icon.staticWhite.normal",
+  "action.icon.primary.focus": "interactive.icon.staticWhite.normal",
+  "action.icon.primary.active": "interactive.icon.staticWhite.normal",
+  "action.icon.primary.disabled": "interactive.icon.primary.disabled",
+  "action.icon.secondary.default": "interactive.icon.primary.normal",
+  "action.icon.secondary.hover": "interactive.icon.primary.normal",
+  "action.icon.secondary.focus": "interactive.icon.primary.normal",
+  "action.icon.secondary.active": "interactive.icon.primary.normal",
+  "action.icon.secondary.disabled": "interactive.icon.primary.disabled",
+  "action.icon.tertiary.default": "interactive.icon.gray.normal",
+  "action.icon.tertiary.hover": "interactive.icon.gray.normal",
+  "action.icon.tertiary.focus": "interactive.icon.gray.normal",
+  "action.icon.tertiary.active": "interactive.icon.gray.normal",
+  "action.icon.tertiary.disabled": "interactive.icon.gray.disabled",
+  "action.icon.link.default": "interactive.icon.primary.subtle",
+  "action.icon.link.hover": "interactive.icon.primary.normal",
+  "action.icon.link.focus": "interactive.icon.primary.normal",
+  "action.icon.link.active": "interactive.icon.primary.normal",
+  "action.icon.link.disabled": "interactive.icon.primary.disabled",
+  "action.icon.link.visited": "interactive.icon.primary.disabled",
+  "static.white": "interactive.icon.staticWhite.normal",
+  "white.action.background.primary.default": "interactive.background.staticWhite.default",
+  "white.action.background.primary.hover": "interactive.background.staticWhite.default",
+  "white.action.background.primary.focus": "interactive.background.staticWhite.default",
+  "white.action.background.primary.active": "interactive.background.staticWhite.default",
+  "white.action.background.primary.disabled": "interactive.background.staticWhite.disabled",
+  "white.action.background.tertiary.default": "interactive.background.staticWhite.faded",
+  "white.action.background.tertiary.hover": "interactive.background.staticWhite.faded",
+  "white.action.background.tertiary.focus": "interactive.background.staticWhite.faded",
+  "white.action.background.tertiary.active": "interactive.background.staticWhite.faded",
+  "white.action.background.tertiary.disabled": "interactive.background.staticWhite.disabled",
+  "white.action.border.secondary.default": "interactive.border.staticWhite.default",
+  "white.action.border.secondary.hover": "interactive.border.staticWhite.default",
+  "white.action.border.secondary.focus": "interactive.border.staticWhite.default",
+  "white.action.border.secondary.active": "interactive.border.staticWhite.default",
+  "white.action.border.secondary.disabled": "interactive.border.staticWhite.disabled",
+  "white.action.text.primary.default": "interactive.text.gray.normal",
+  "white.action.text.primary.hover": "interactive.text.gray.normal",
+  "white.action.text.primary.focus": "interactive.text.gray.normal",
+  "white.action.text.primary.active": "interactive.text.gray.normal",
+  "white.action.text.primary.disabled": "interactive.text.gray.disabled",
+  "white.action.text.secondary.default": "interactive.text.staticWhite.normal",
+  "white.action.text.secondary.hover": "interactive.text.staticWhite.normal",
+  "white.action.text.secondary.focus": "interactive.text.staticWhite.normal",
+  "white.action.text.secondary.active": "interactive.text.staticWhite.normal",
+  "white.action.text.secondary.disabled": "interactive.text.staticWhite.disabled",
+  "white.action.text.tertiary.default": "interactive.text.staticWhite.normal",
+  "white.action.text.tertiary.hover": "interactive.text.staticWhite.normal",
+  "white.action.text.tertiary.focus": "interactive.text.staticWhite.normal",
+  "white.action.text.tertiary.active": "interactive.text.staticWhite.normal",
+  "white.action.text.tertiary.disabled": "interactive.text.staticWhite.disabled",
+  "white.action.text.link.default": "interactive.text.staticWhite.normal",
+  "white.action.text.link.hover": "interactive.text.staticWhite.subtle",
+  "white.action.text.link.focus": "interactive.text.staticWhite.subtle",
+  "white.action.text.link.active": "interactive.text.staticWhite.subtle",
+  "white.action.text.link.disabled": "interactive.text.staticWhite.disabled",
+  "white.action.text.link.visited": "interactive.text.staticWhite.disabled",
+  "white.action.icon.primary.default": "interactive.icon.gray.normal",
+  "white.action.icon.primary.hover": "interactive.icon.gray.normal",
+  "white.action.icon.primary.focus": "interactive.icon.gray.normal",
+  "white.action.icon.primary.active": "interactive.icon.gray.normal",
+  "white.action.icon.primary.disabled": "interactive.icon.gray.disabled",
+  "white.action.icon.secondary.default": "interactive.icon.staticWhite.normal",
+  "white.action.icon.secondary.hover": "interactive.icon.staticWhite.normal",
+  "white.action.icon.secondary.focus": "interactive.icon.staticWhite.normal",
+  "white.action.icon.secondary.active": "interactive.icon.staticWhite.normal",
+  "white.action.icon.secondary.disabled": "interactive.icon.staticWhite.disabled",
+  "white.action.icon.tertiary.default": "interactive.icon.staticWhite.normal",
+  "white.action.icon.tertiary.hover": "interactive.icon.staticWhite.normal",
+  "white.action.icon.tertiary.focus": "interactive.icon.staticWhite.normal",
+  "white.action.icon.tertiary.active": "interactive.icon.staticWhite.normal",
+  "white.action.icon.tertiary.disabled": "interactive.icon.staticWhite.disabled",
+  "white.action.icon.link.default": "interactive.icon.staticWhite.normal",
+  "white.action.icon.link.hover": "interactive.icon.staticWhite.subtle",
+  "white.action.icon.link.focus": "interactive.icon.staticWhite.subtle",
+  "white.action.icon.link.active": "interactive.icon.staticWhite.subtle",
+  "white.action.icon.link.disabled": "interactive.icon.staticWhite.disabled",
+  "white.action.icon.link.visited": "interactive.icon.staticWhite.disabled",
+  "badge.background.blue.lowContrast": "surface.background.primary.subtle",
+  "badge.background.blue.highContrast": "surface.background.primary.intense",
+  "badge.border.blue.lowContrast": "surface.border.primary.muted",
+  "badge.border.blue.highContrast": "surface.border.primary.normal",
+  "badge.text.blue.lowContrast": "surface.text.primary.normal",
+  "badge.text.blue.highContrast": "surface.text.staticWhite.normal",
+  "badge.icon.blue.lowContrast": "surface.icon.primary.normal",
+  "badge.icon.blue.highContrast": "surface.icon.staticWhite.normal"
+}
diff --git a/packages/blade/codemods/brand-refresh/transformers/index.ts b/packages/blade/codemods/brand-refresh/transformers/index.ts
new file mode 100644
index 00000000000..4b810997526
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/index.ts
@@ -0,0 +1,224 @@
+import type { Transform } from 'jscodeshift';
+import migrateAmountComponent from './migrate-amount';
+import migrateDividerComponent from './migrate-divider';
+import migrateCardComponent from './migrate-card';
+import migrateBadgeComponent from './migrate-badge';
+import migrateContrastIntentAndColorProps from './migrate-contrast-intent-color-props';
+import migrateTypographyComponents from './migrate-typography';
+import migrateActionListAndTable from './migrate-actionlist-and-table';
+import { red, isExpression } from './utils';
+// eslint-disable-next-line import/extensions
+import colorTokensMapping from './colorTokensMapping.json';
+import migrateDropdownComponent from './migrate-dropdown';
+
+const transformer: Transform = (file, api, options) => {
+  // Maps for fontSize, lineHeight, and token prefixes
+  const fontSizeMap = {
+    600: 500,
+    700: 600,
+    800: 600,
+    900: 700,
+    1000: 700,
+    1100: 800,
+    1200: 900,
+    1300: 1000,
+    1600: 1100,
+  };
+
+  const lineHeightMap = {
+    700: 600,
+    800: 700,
+    900: 800,
+    1000: 900,
+    1100: 1000,
+    1500: 1100,
+  };
+
+  const fontTokenPrefix = 'theme.typography.fonts.size';
+  const lineHeightTokenPrefix = 'theme.typography.lineHeights';
+
+  // Replace old color tokens to new color tokens
+  const newSource = file.source
+    .replace(
+      /(brand|feedback|action|static|white|badge|surface)\.?([aA-zZ0-9]+)\.?([aA-zZ0-9]+)\.?([a-z0-9]+)\.?([aA-zZ0-9]+)\.?([aA-zZ0-9]+)\.?([aA-zZ0-9]+)/g,
+      (originalString) => {
+        if (originalString.includes('highContrast') && !originalString.includes('feedback')) {
+          return 'UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN';
+        }
+
+        const replacement = colorTokensMapping[originalString];
+
+        if (!replacement) {
+          return originalString;
+        }
+        return replacement;
+      },
+    )
+    // Replace old font sizes & line height in the source code with new font sizes & line height
+    .replace(
+      // gets both .50 and ['50'] or ["50"]
+      /theme\.typography\.fonts\.size\.?((\w+)|(\W.*\]))/g,
+      (originalString, match) => {
+        const token = match.replace(/\[|\]|'|"/g, '');
+        const replacement = fontSizeMap[token];
+        if (!replacement) {
+          return originalString;
+        }
+        return `${fontTokenPrefix}[${fontSizeMap[token]}]`;
+      },
+    )
+    .replace(
+      // gets both .50 and ['50'] or ["50"]
+      /theme\.typography\.lineHeights\.?((\w+)|(\W.*\]))/g,
+      (originalString, match) => {
+        const token = match.replace(/\[|\]|'|"/g, '');
+        const replacement = lineHeightMap[token];
+        if (!replacement) {
+          return originalString;
+        }
+        return `${lineHeightTokenPrefix}[${lineHeightMap[token]}]`;
+      },
+    );
+
+  // Don't transform if the file doesn't import `@razorapy/blade/components` because it's not using Blade components
+  // Allow the migration test file to be transformed
+  if (!newSource.includes('@razorpay/blade/components') && file.path !== undefined) {
+    return newSource;
+  }
+
+  const j = api.jscodeshift;
+  const root = j.withParser('tsx')(newSource);
+
+  // Update the themeTokens prop in BladeProvider
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'BladeProvider',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'themeTokens',
+        },
+      })
+      .replaceWith(({ node }) => {
+        node.value.expression.name = 'bladeTheme';
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the themeTokens prop in BladeProvider.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Update color token value based on the context
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => /(Text|Title|Code|Display|Heading|Box|Icon)/i.test(name),
+          },
+        },
+      })
+      // Find all color props
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name.toLowerCase().includes('color'),
+        },
+      })
+      .replaceWith((path) => {
+        const { node, parent } = path;
+
+        // If the color prop is an expression, don't bother updating it contextually
+        if (isExpression(node)) {
+          return node;
+        }
+
+        const isBoxComponent = parent.value.name.name === 'Box';
+        const isIconComponent = parent.value.name.name?.includes('Icon');
+        const isBorderColorProp = (node.name.name as string).includes('border');
+        const isColorProp = node.name.name === 'color';
+
+        if (isBoxComponent && isBorderColorProp) {
+          node.value.value = node.value.value
+            .replace('background', 'border')
+            .replace('intense', 'normal');
+        } else if (
+          isIconComponent &&
+          isColorProp &&
+          /surface.(background|text).(gray|staticWhite|positive|negative|notice|information|neutral|primary|staticBlack)/i.test(
+            node.value.value,
+          )
+        ) {
+          node.value.value = node.value.value
+            .replace(/surface.(background|text)/i, 'interactive.icon')
+            .replace('intense', 'normal');
+
+          // Typography components
+        } else if (!isBoxComponent && !isIconComponent && isColorProp) {
+          node.value.value = node.value.value.replace('background', 'text');
+
+          if (!node.value.value.includes('feedback')) {
+            node.value.value = node.value.value.replace('intense', 'normal');
+          }
+        }
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the color token value based on the context.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  migrateTypographyComponents({ root, j, file });
+  migrateContrastIntentAndColorProps({ root, j, file });
+  migrateBadgeComponent({ root, j, file });
+  migrateCardComponent({ root, j, file });
+  migrateAmountComponent({ root, j, file });
+  migrateDividerComponent({ root, j, file });
+  migrateActionListAndTable({ root, j, file });
+  migrateDropdownComponent({ root, j, file });
+
+  // Update ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme"
+  try {
+    root
+      .find(j.ImportDeclaration, {
+        source: {
+          value: '@razorpay/blade/tokens',
+        },
+      })
+      .find(j.ImportSpecifier, {
+        imported: {
+          name: (name) => ['paymentTheme', 'bankingTheme'].includes(name),
+        },
+      })
+      .replaceWith((path) => {
+        path.value.imported.name = 'bladeTheme';
+
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme".`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  return root.toSource(options.printOptions);
+};
+
+export default transformer;
diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts
new file mode 100644
index 00000000000..f4e2ae0c257
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts
@@ -0,0 +1,32 @@
+import { red } from './utils';
+
+function migrateActionListAndTable({ root, j, file }): void {
+  // ActionList & Table components: Remove the `surfaceLevel` prop
+  // <ActionList surfaceLevel={2}> -> <ActionList >
+  // <Table surfaceLevel={2}> -> <Table >
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => ['ActionList', 'Table'].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'surfaceLevel',
+        },
+      })
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while removing the "surfaceLevel" prop from "ActionList"/"Table".`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateActionListAndTable;
diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts
new file mode 100644
index 00000000000..22328760a9e
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts
@@ -0,0 +1,173 @@
+import { red, isExpression } from './utils';
+
+// Amount component: changes to intent, size, & prefix props
+function migrateAmountComponent({ root, j, file }): void {
+  try {
+    // <Amount size=”heading-small-bold”> -> <Amount type=”heading” size=”small” weight=”semibold”>
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => ['Amount', 'CardHeaderAmount'].includes(name),
+          },
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        const sizeAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'size',
+        );
+
+        if (!sizeAttribute) {
+          return node;
+        }
+
+        if (isExpression(sizeAttribute)) {
+          console.warn(
+            red('\n⛔️ Expression found in the "size" attribute, please update manually:'),
+            red(`${file.path}:${sizeAttribute?.loc?.start.line}:${node.loc.start.column}\n`),
+          );
+          return node;
+        }
+
+        const otherAttributes = node.openingElement.attributes.filter(
+          (attribute) => attribute.name?.name !== 'size',
+        );
+
+        const sizeMap = {
+          'body-small': {
+            type: 'body',
+            size: 'small',
+          },
+          'body-small-bold': {
+            type: 'body',
+            size: 'small',
+            weight: 'semibold',
+          },
+          'body-medium': {
+            type: 'body',
+            size: 'medium',
+          },
+          'body-medium-bold': {
+            type: 'body',
+            size: 'medium',
+            weight: 'semibold',
+          },
+          'heading-small': {
+            type: 'body',
+            size: 'large',
+          },
+          'heading-small-bold': {
+            type: 'body',
+            size: 'large',
+            weight: 'semibold',
+          },
+          'heading-large': {
+            type: 'heading',
+            size: 'medium',
+          },
+          'heading-large-bold': {
+            type: 'heading',
+            size: 'medium',
+            weight: 'semibold',
+          },
+          'title-small': {
+            type: 'heading',
+            size: 'large',
+          },
+          'title-medium': {
+            type: 'heading',
+            size: 'xlarge',
+          },
+        };
+
+        const sizeAttributeValue = sizeAttribute.value.value;
+
+        Object.keys(sizeMap[sizeAttribute.value.value]).forEach((key) => {
+          otherAttributes.push(
+            j.jsxAttribute(
+              j.jsxIdentifier(key),
+              j.literal(sizeMap[sizeAttributeValue][key as keyof typeof sizeMap]),
+            ),
+          );
+        });
+
+        node.openingElement.attributes = otherAttributes;
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "size" prop in "Amount" component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // <Amount intent=”positive”> -> <Amount color="feedback.text.positive.intense">
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => ['Amount', 'CardHeaderAmount'].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name === 'intent',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.name.name = 'color';
+        node.value.value = `feedback.text.${node.value.value}.intense`;
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "intent" prop in "Amount" component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // <Amount prefix=”currency-symbol”> -> <Amount currencyIndicator=”currency-symbol”>
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => ['Amount', 'CardHeaderAmount'].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name === 'prefix',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.name.name = 'currencyIndicator';
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "prefix" prop in "Amount" component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateAmountComponent;
diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts
new file mode 100644
index 00000000000..6820da24da5
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts
@@ -0,0 +1,28 @@
+import { red } from './utils';
+
+// Badge component Migration, remove the `fontWeight` prop
+function migrateBadgeComponent({ root, j, file }): void {
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => ['Badge', 'CardHeaderBadge'].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'fontWeight',
+        },
+      })
+      .remove();
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while removing the fontWeight prop.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateBadgeComponent;
diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts
new file mode 100644
index 00000000000..e2e7baa1e0d
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts
@@ -0,0 +1,43 @@
+import { red } from './utils';
+
+// Card components Migration
+// <Card surfaceLevel={2|3} > -> <Card backgroundColor=”surface.background.gray.moderate”|surface.background.gray.intense>
+function migrateCardAndTable({ root, j, file }): void {
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Card',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'surfaceLevel',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        const surfaceLevelMap = {
+          1: 'surface.background.subtle',
+          2: 'surface.background.gray.moderate',
+          3: 'surface.background.gray.intense',
+        };
+
+        node.name.name = 'backgroundColor';
+
+        node.value = j.literal(surfaceLevelMap[node.value.expression.value]);
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Card component.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateCardAndTable;
diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts
new file mode 100644
index 00000000000..576e7973b70
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts
@@ -0,0 +1,298 @@
+import { red } from './utils';
+
+function migrateContrastIntentAndColorProps({ root, j, file }): void {
+  // Break `contrast="high"` prop from Typography & ProgressBar Components
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) =>
+              ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes(
+                name,
+              ),
+          },
+        },
+      })
+      .find(j.JSXAttribute)
+      .filter(
+        (path, index, self) =>
+          ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes(
+            path.parent.value.name.name,
+          ) &&
+          path.node.name.name === 'contrast' &&
+          path.node.value.value === 'high' &&
+          index === self.findIndex((obj) => path.node.start === obj.node.start),
+      )
+      .replaceWith((path) => {
+        path.node.value.value = 'UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN';
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while breaking the "contrast" prop from Typography Components:`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Bade/Counter/IconButton/Alert Components: Change `contrast` prop to `emphasis`
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) =>
+              [
+                'Badge',
+                'Counter',
+                'IconButton',
+                'Alert',
+                'CardHeaderBadge',
+                'CardHeaderCounter',
+              ].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'contrast',
+        },
+      })
+      .replaceWith((path) => {
+        path.node.name.name = 'emphasis';
+
+        const contrastToEmphasisMap = {
+          alert: {
+            low: 'subtle',
+            high: 'intense',
+          },
+          badge: {
+            low: 'subtle',
+            high: 'intense',
+          },
+          counter: {
+            low: 'subtle',
+            high: 'intense',
+          },
+          iconbutton: {
+            low: 'intense',
+            high: 'subtle',
+          },
+        };
+
+        path.node.value.value =
+          contrastToEmphasisMap[path.parent.value.name.name.toLowerCase()][[path.node.value.value]];
+
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "contrast" prop in Bade/Counter/IconButton Components:`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Spinner: Change `contrast` prop to `color`
+  // <Spinner contrast="low|high" /> -> <Spinner color="primary|white" />
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Spinner',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'contrast',
+        },
+      })
+      .replaceWith((path) => {
+        path.node.name.name = 'color';
+
+        const contrastToColorMap = {
+          high: 'white',
+          low: 'primary',
+        };
+
+        path.node.value.value = contrastToColorMap[path.node.value.value];
+
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "contrast" prop in Spinner.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Remove 'contrast' prop from the Skeleton Component
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Skeleton',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'contrast',
+        },
+      })
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while removing the "contrast" prop from Skeleton.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Remove deprecated 'intent'/'variant' props in favor of color
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) =>
+              [
+                'Alert',
+                'Badge',
+                'Counter',
+                'Chip',
+                'ChipGroup',
+                'Indicator',
+                'ProgressBar',
+                'CardHeaderBadge',
+                'CardHeaderCounter',
+              ].includes(name),
+          },
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        const colorAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'color',
+        );
+
+        if (colorAttribute) {
+          node.openingElement.attributes = node.openingElement.attributes.filter(
+            (attribute) => attribute.name?.name !== 'intent' && attribute.name?.name !== 'variant',
+          );
+
+          return node;
+        }
+
+        const variantAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'variant',
+        );
+
+        const intentAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'intent',
+        );
+
+        // If type and contrast are not present, return the node
+        if (!(variantAttribute || intentAttribute)) {
+          return node;
+        }
+
+        const variantValue = variantAttribute?.value.value;
+        const intentValue = intentAttribute?.value.value;
+
+        node.openingElement.attributes?.push(
+          j.jsxAttribute(
+            j.jsxIdentifier('color'),
+            j.literal(
+              ['blue', 'none'].includes(variantValue || intentValue)
+                ? 'primary'
+                : variantValue || intentValue,
+            ),
+          ),
+        );
+
+        return node;
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name === 'intent' || name === 'variant',
+        },
+      })
+      // Remove duplicate intent/variant props
+      .filter(
+        (path, index, self) =>
+          index === self.findIndex((obj) => path.node.start === obj.node.start),
+      )
+      .replaceWith((path) => {
+        if (path.node.value.value === 'blue' || path.node.value.value === 'default') {
+          path.node.value.value = 'primary';
+        }
+
+        return path.node;
+      })
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while removing the deprecated "intent" and "variant" props.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Change color="default" to color="primary" in Button/Link/Badge/Counter/Chip/ChipGroup/Spinner
+  // <Button variant="secondary" color="default"> -> <Button variant="secondary" color="primary">
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) =>
+              [
+                'Button',
+                'Link',
+                'Badge',
+                'Counter',
+                'Chip',
+                'ChipGroup',
+                'CardHeaderBadge',
+                'CardHeaderCounter',
+                'CardHeaderIconButton',
+                'CardHeaderLink',
+                'Spinner',
+              ].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'color',
+        },
+        value: {
+          value: 'default',
+        },
+      })
+      .replaceWith((path) => {
+        path.node.value.value = 'primary';
+
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Button color prop.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateContrastIntentAndColorProps;
diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-divider.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-divider.ts
new file mode 100644
index 00000000000..847d8408af0
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/migrate-divider.ts
@@ -0,0 +1,38 @@
+import { red } from './utils';
+
+// Divider component migration: Change the variant prop value from “normal” to “muted”
+// <Divider variant=”normal”> -> <Divider variant=”muted”>
+function migrateDividerComponent({ root, j, file }): void {
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Divider',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'variant',
+        },
+        value: {
+          value: 'normal',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.value.value = 'muted';
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Divider component.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateDividerComponent;
diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-dropdown.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-dropdown.ts
new file mode 100644
index 00000000000..f166ac8033c
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/migrate-dropdown.ts
@@ -0,0 +1,81 @@
+import { red } from './utils';
+
+function migrateDropdownComponent({ root, j, file }): void {
+  // Dropdown component: Remove onDismiss prop in favor of onOpenChange
+  // <Dropdown onDismiss={() => console.log('dismissed')}> ->
+  // <Dropdown
+  //    onOpenChange={(isOpen) => {
+  //        if (!isOpen) {
+  //         console.log('dismissed');
+  //     }
+  // >
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Dropdown',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'onDismiss',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.name.name = 'onOpenChange';
+
+        // If the onDismiss prop is a function, we need to wrap the function body in an if statement that checks if the dropdown is open or not
+        // If the onDismiss prop is not a function, but a variable reference, we need to call the variable reference without arguments
+        // Following are the different ways the onDismiss prop can be defined:
+        // onDismiss={handleDismiss}
+        //      -> onOpenChange={(isOpen) => { if (!isOpen) { handleDismiss() } }}
+        // onDismiss={() => console.log("Dismissed!!!")}
+        //      -> onOpenChange={(isOpen) => { if (!isOpen) { console.log("Dismissed!!!") } }}
+        // onDismiss={function () { console.log("Dismissed!!!") }}
+        //      -> onOpenChange={(isOpen) => { if (!isOpen) { console.log("Dismissed!!!") } }}
+        // onDismiss={() => { console.log("Dismissed!!!") }}
+        //      -> onOpenChange={(isOpen) => { if (!isOpen) { console.log("Dismissed!!!") } }}
+        let isOpenIfBlockStatement = j.blockStatement([
+          j.expressionStatement(j.callExpression(node.value.expression, [])),
+        ]);
+
+        // If the onDismiss prop is arrow function or function expression
+        if (
+          j.ArrowFunctionExpression.check(node.value.expression) ||
+          j.FunctionExpression.check(node.value.expression)
+        ) {
+          // If the function body is a block statement, we can just use that
+          if (node.value.expression.body.type === 'BlockStatement') {
+            isOpenIfBlockStatement = node.value.expression.body;
+          } else {
+            // If the function body is not a block statement, we need to wrap it in one
+            isOpenIfBlockStatement = j.blockStatement([
+              j.expressionStatement(node.value.expression.body),
+            ]);
+          }
+        }
+
+        node.value.expression = j.arrowFunctionExpression(
+          [j.identifier('isOpen')],
+          j.blockStatement([
+            j.ifStatement(j.unaryExpression('!', j.identifier('isOpen')), isOpenIfBlockStatement),
+          ]),
+        );
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "onDismiss" prop in the "Dropdown" component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateDropdownComponent;
diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-typography.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-typography.ts
new file mode 100644
index 00000000000..93d4ab6f5aa
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/migrate-typography.ts
@@ -0,0 +1,342 @@
+import { red, isExpression } from './utils';
+// eslint-disable-next-line import/extensions
+import colorTokensMapping from './colorTokensMapping.json';
+
+function migrateTypographyComponents({ root, j, file }): void {
+  // Select Typography elements based on their names
+  const typographyJSXElements = root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        name: (name) =>
+          ['Text', 'Title', 'Code', 'Display', 'Heading', 'CardHeaderText'].includes(name),
+      },
+    },
+  });
+
+  // Update <Text variant="caption" size="medium" > to <Text variant="caption" size="small" >
+  try {
+    typographyJSXElements
+      .filter(
+        (path) =>
+          path.value.openingElement.name.name.includes('Text') &&
+          path.value.openingElement.attributes.some(
+            (attribute) =>
+              attribute.name?.name === 'variant' && attribute.value?.value === 'caption',
+          ),
+      )
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'size',
+        },
+        value: {
+          value: 'medium',
+        },
+      })
+      .replaceWith((path) => {
+        path.node.value.value = 'small';
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Text size prop.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Update <Heading size="large|medium"> to <Heading size="medium|small">,
+  // <Heading size="small">, <Heading variant="regular"> to <Text size="large">, and
+  // <Heading variant="subheading"> to <Text size="small">
+  try {
+    typographyJSXElements
+      .filter((path) => path.value.openingElement.name.name === 'Heading')
+      // replace with Heading
+      .replaceWith((path) => {
+        const { node } = path;
+
+        const sizeAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'size',
+        );
+
+        const variantAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'variant',
+        );
+
+        if (isExpression(sizeAttribute) || isExpression(variantAttribute)) {
+          console.warn(
+            red(
+              '\n⛔️ Expression found in the "size"/"variant" attribute, please update manually:',
+            ),
+            red(`${file.path}:${sizeAttribute.loc.start.line}:${node.loc.start.column}\n`),
+          );
+          return node;
+        }
+
+        const otherAttributes = node.openingElement.attributes.filter(
+          (attribute) => attribute.name?.name !== 'variant' && attribute.name?.name !== 'size',
+        );
+
+        const headingSizeMap = {
+          large: 'medium',
+          medium: 'small',
+          small: 'large',
+        };
+
+        // If size is small or variant is subheading, replace with Text
+        if (
+          !sizeAttribute ||
+          (sizeAttribute && sizeAttribute.value.value === 'small') ||
+          (variantAttribute && variantAttribute.value.value === 'subheading')
+        ) {
+          node.openingElement.name.name = 'Text';
+          node.closingElement.name.name = 'Text';
+        }
+
+        if (
+          !sizeAttribute &&
+          (!variantAttribute || (variantAttribute && variantAttribute.value.value === 'regular'))
+        ) {
+          otherAttributes.push(j.jsxAttribute(j.jsxIdentifier('size'), j.literal('large')));
+        } else if (sizeAttribute) {
+          otherAttributes.push(
+            j.jsxAttribute(
+              j.jsxIdentifier('size'),
+              j.literal(headingSizeMap[sizeAttribute.value.value]),
+            ),
+          );
+        } else if (variantAttribute && variantAttribute.value.value === 'subheading') {
+          otherAttributes.push(j.jsxAttribute(j.jsxIdentifier('size'), j.literal('small')));
+        }
+
+        node.openingElement.attributes = otherAttributes;
+
+        return node;
+      })
+      .find(j.JSXAttribute)
+      .filter(
+        (path, index, self) =>
+          path.node.name.name === 'variant' &&
+          index === self.findIndex((obj) => path.node.start === obj.node.start),
+      ) // Filter by name `variant` and remove any duplicates
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the Heading size and variant props.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Replace Title with Heading and update the 'size' attribute
+  // <Title size="medium"> to <Heading size="xlarge">
+  try {
+    typographyJSXElements
+      .filter((path) => path.value.openingElement.name.name === 'Title')
+      // replace with Heading
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.openingElement.name.name = 'Heading';
+        node.closingElement.name.name = 'Heading';
+
+        const sizeAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'size',
+        );
+
+        if (isExpression(sizeAttribute)) {
+          console.warn(
+            red('\n⛔️ Expression found in the "size" attribute, please update manually:'),
+            red(`${file.path}:${sizeAttribute.loc?.start.line}:${node.loc.start.column}\n`),
+          );
+          return node;
+        }
+
+        if (!sizeAttribute) {
+          node.openingElement.attributes.push(
+            j.jsxAttribute(j.jsxIdentifier('size'), j.literal('large')),
+          );
+
+          return node;
+        }
+
+        // Maps to transform Title sizes to Heading sizes
+        const titleToHeadingMap = {
+          xlarge: '2xlarge',
+          large: 'xlarge',
+          medium: 'xlarge',
+          small: 'large',
+        };
+
+        const otherAttributes = node.openingElement.attributes.filter(
+          (attribute) => attribute.name?.name !== 'size',
+        );
+        otherAttributes.push(
+          j.jsxAttribute(
+            j.jsxIdentifier('size'),
+            j.literal(titleToHeadingMap[sizeAttribute.value.value] || 'large'),
+          ),
+        );
+
+        node.openingElement.attributes = otherAttributes;
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while migrating the Title component`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Remove/Update the Title import from "@razorpay/blade/components"
+  try {
+    root
+      .find(j.ImportDeclaration, {
+        source: {
+          value: '@razorpay/blade/components',
+        },
+      })
+      .find(j.ImportSpecifier, {
+        imported: {
+          name: 'Title',
+        },
+      })
+      .replaceWith((path) => {
+        // Check if Heading import is already present
+        const isHeadingImportPresent = path.parent.value.specifiers.some(
+          (node) => node.imported.name === 'Heading',
+        );
+
+        // If Heading import is not present, update the "Title" import to use "Heading"
+        if (!isHeadingImportPresent) {
+          path.value.imported.name = 'Heading';
+        } else {
+          // If "Heading" import is present, remove the "Title" import
+          path.parent.value.specifiers = path.parent.value.specifiers.filter(
+            (node) => node.imported.name !== 'Title',
+          );
+        }
+
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Title import.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Remove `type` and contrast="low" prop from Typography & ProgressBar Components
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) =>
+              ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes(
+                name,
+              ),
+          },
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        // If the node is a ProgressBar, return the node
+        if (node.openingElement.name.name === 'ProgressBar') {
+          return node;
+        }
+
+        const colorAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'color',
+        );
+
+        if (colorAttribute) {
+          node.openingElement.attributes = node.openingElement.attributes.filter(
+            (attribute) => attribute.name?.name !== 'contrast' && attribute.name?.name !== 'type',
+          );
+
+          return node;
+        }
+
+        const typeAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'type',
+        );
+
+        const contrastAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'contrast',
+        );
+
+        // If type and contrast are not present, return the node
+        if (!(typeAttribute || contrastAttribute)) {
+          return node;
+        }
+
+        const typeValue = typeAttribute?.value.value || 'normal';
+        const contrastValue = contrastAttribute?.value.value || 'low';
+
+        const oldColorToken = `surface.text.${typeValue}.${contrastValue}Contrast`;
+        const newColorToken = colorTokensMapping[oldColorToken];
+
+        if (newColorToken) {
+          node.openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('color'), j.literal(newColorToken)),
+          );
+        }
+
+        return node;
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name === 'type' || name === 'contrast',
+        },
+        value: {
+          value: (value) => value !== 'high',
+        },
+      })
+      .filter(
+        (path, index, self) =>
+          index === self.findIndex((obj) => path.node.start === obj.node.start),
+      ) // remove any duplicates
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while removing the "type" prop from Typography Components:`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Change 'weight="bold"' to 'weight="semibold"' in Heading, Text, Display
+  // Code still uses 'weight="bold"' and Title has been modified to the Heading Component
+  try {
+    typographyJSXElements
+      .filter((path) =>
+        ['Heading', 'Text', 'Display', 'CardHeaderText'].includes(
+          path.value.openingElement.name.name,
+        ),
+      )
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'weight',
+        },
+        value: {
+          value: 'bold',
+        },
+      })
+      .replaceWith((path) => {
+        path.node.value.value = 'semibold';
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "weight" prop in Typography Components:`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateTypographyComponents;
diff --git a/packages/blade/codemods/brand-refresh/transformers/utils.ts b/packages/blade/codemods/brand-refresh/transformers/utils.ts
new file mode 100644
index 00000000000..1fc6b3a7efb
--- /dev/null
+++ b/packages/blade/codemods/brand-refresh/transformers/utils.ts
@@ -0,0 +1,7 @@
+import type { JSXAttribute, JSXExpressionContainer } from 'jscodeshift';
+
+export const isExpression = (prop: unknown): prop is JSXExpressionContainer => {
+  return (prop as JSXAttribute)?.value?.type === 'JSXExpressionContainer';
+};
+
+export const red = (message: string): string => `\u001b[1m\u001b[31m${message}\u001b[39m\u001b[22m`;
diff --git a/packages/blade/docs/components/MovingDiv.js b/packages/blade/docs/components/MovingDiv.js
index 5b4529d9e08..149b8c41ddc 100644
--- a/packages/blade/docs/components/MovingDiv.js
+++ b/packages/blade/docs/components/MovingDiv.js
@@ -1,16 +1,18 @@
 import styled from 'styled-components';
+import { makeBorderSize } from '../../src/utils';
 
 const MovingDiv = styled.div`
   height: 40px;
   width: 40px;
-  background-color: ${(props) => props.theme.colors.brand.primary[500]};
+  background-color: ${(props) => props.theme.colors.surface.background.primary.subtle};
+  border-radius: ${(props) => makeBorderSize(props.theme.border.radius.medium)};
   animation: ${(props) => `move 3s ${props.easing || 'linear'}  infinite`};
   @keyframes move {
     0% {
       transform: translateX(0px);
     }
     50% {
-      transform: translateX(100px);
+      transform: translateX(80px);
     }
     100% {
       transform: translateX(0px);
diff --git a/packages/blade/docs/guides/CreateTheme.stories.mdx b/packages/blade/docs/guides/CreateTheme.stories.mdx
index f8ecc339988..7fc4f2e55c1 100644
--- a/packages/blade/docs/guides/CreateTheme.stories.mdx
+++ b/packages/blade/docs/guides/CreateTheme.stories.mdx
@@ -1,3 +1,4 @@
+{/* TODO: Rebranding - Rexpose Theming once we fix white-labeling */}
 import { Meta } from '@storybook/addon-docs';
 import {
   Collapsible,
diff --git a/packages/blade/docs/guides/Installation.stories.mdx b/packages/blade/docs/guides/Installation.stories.mdx
index cedd605b900..6b55c98ebec 100644
--- a/packages/blade/docs/guides/Installation.stories.mdx
+++ b/packages/blade/docs/guides/Installation.stories.mdx
@@ -86,93 +86,80 @@ Blade has a peer dependency on a few libraries, you can skip adding it if you al
 
 Coming Soon
 
-## 🔡 Install Fonts
+## 🔡 Installing Fonts
 
-We are using `Lato` font family which is not a system font so we need to perform some additional steps to download, install and configure it.
+We use 2 fonts. [TASA Orbiter](https://tasatype.localremote.co/) (for our headings), and [Inter](https://rsms.me/inter/) (for other text elements).
 
 ### Web Projects
 
-For web projects, we can either use Google fonts or self-hosted fonts. Self-hosted fonts have certain benefits that you can find [here](https://fontsource.org/docs/getting-started/introduction)
+- To add these fonts to your project, you can import them from blade package in your root entry file.
 
-#### Self-Hosted (Recommended)
-
-We recommend using self-hosted fonts. We'll use [Fontsource](https://fontsource.org/) which provides fonts as npm packages.
-
-- Install `Lato` font
-
-  ```shell
-  yarn add @fontsource/lato
+  ```ts
+  // Somewhere in root index.ts or entryBrowser.tsx file
+  import '@razorpay/blade/fonts.css';
   ```
 
-- Import within your app entry file(eg: `App.tsx`, `entryBrowser.tsx` etc.).
-  ```js
-  import '@fontsource/lato/400.css';
-  import '@fontsource/lato/400-italic.css';
-  import '@fontsource/lato/700.css';
-  import '@fontsource/lato/700-italic.css';
-  ```
+- While Blade handles setting font-family for its own components, you can set font-family globally as well in your global styles for any custom components or exceptions
 
-#### Google Fonts
+  ```ts
+  import { createGlobalStyle } from 'styled-components';
 
-There are downsides to using Google fonts which can be found [here](https://fontsource.org/docs/getting-started/introduction) but still for some reason if you have some use case where Google fonts makes more sense then you can [click this link](https://fonts.google.com/share?selection.family=Lato:ital,wght@0,400;0,700;1,400;1,700) and follow the instructions there to configure `Lato` for your applications.
+  const GlobalStyles = createGlobalStyle`
+  * { 
+    box-sizing: border-box;
+  }
+  
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: ${(props) => props.theme.typography.fonts.family.text}
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-family: ${(props) => props.theme.typography.fonts.family.heading};
+  }
+  `;
+  ```
 
 ### React Native Projects
 
-- Download `Lato` font from [here](https://fonts.google.com/share?selection.family=Lato:ital,wght@0,400;0,700;1,400;1,700)
-- Copy the font files and paste them under the directory `<project_root>/public/fonts`(**create the directory if it doesn't exist**)
-- Create a React Native config file at the root of your project - `<project_root>/react-native.config.js` and add the following content to it
+- Download fonts from <a href="https://github.com/razorpay/blade/tree/master/packages/blade/fonts/blade-fonts-react-native.zip">blade-fonts-react-native.zip</a> and unzip.
 
-  ```js
-  module.exports = {
-    // ... rest of the config
-    assets: ['./public/fonts/'],
-  };
-  ```
+- #### For iOS
 
-#### android
-
-Follow the next steps mentioned below for configuring fonts to work on Android:
-
-- Create a directory `font` under `/android/app/src/main/res/font`
-- Copy the font files `Lato-Regular` and `Lato-Bold` you had downloaded earlier and paste them under `/android/app/src/main/res/font`
-- Rename the font files (**mind the casing and underscores**):
-  - ~~`Lato-Regular.ttf`~~ ➡️ `lato_regular.ttf`
-  - ~~`Lato-RegularItalic.ttf`~~ ➡️ `lato_regular_italic.ttf`
-  - ~~`Lato-Bold.ttf`~~ ➡️`lato_bold.ttf` 
-  - ~~`Lato-BoldItalic.ttf`~~ ➡️ `lato_bold_italic.ttf`
-- Create a file `lato.xml` under `/android/app/src/main/res/font/lato.xml` and copy the following contents to it
-  ```xml
-  <?xml version="1.0" encoding="utf-8"?>
-    <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
-    <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/lato_regular"/>
-    <font app:fontStyle="normal" app:fontWeight="700" app:font="@font/lato_bold" />
-    <font app:fontStyle="italic" app:fontWeight="400" app:font="@font/lato_regular_italic" />
-    <font app:fontStyle="italic" app:fontWeight="700" app:font="@font/lato_bold_italic" />
-  </font-family>
-  ```
-- Navigate to `/android/app/src/main/java/com/<your_package_name>/MainApplication.java` and add the following contents to it
+  - Copy all font files from the `ios-fonts` directory to `<project_root>/public/fonts` (**create the directory if it doesn't exist**)
+  - Create a React Native config file at the root of your project - `<project_root>/react-native.config.js` and add the following content to it
 
-  ```js
-  // add the below import statement after all the import statements
-  import com.facebook.react.views.text.ReactFontManager;
-  ```
+    ```js
+    module.exports = {
+      // ... rest of the config
+      assets: ['./public/fonts/'],
+    };
+    ```
 
-  Now search for `onCreate` method and add the following line to it
+  - Run the following command to link fonts in ios
 
-  ```js
-  public void onCreate() {
-    // add the below line as the first line
-    ReactFontManager.getInstance().addCustomFont(this, "Lato", R.font.lato);
-    // rest of the content of the method
-  }
-  ```
+    ```shell
+    npx react-native-asset -ios-a
+    ```
 
-#### iOS
+- #### For Android
 
-Follow the next steps mentioned below for configuring fonts to work on iOS:
+  - Copy all files from `android-fonts` to `/android/app/src/main/res/font`
+  - Navigate to `/android/app/src/main/java/com/<your_package_name>/MainApplication.java` and add the following contents to it
 
-- Once you've copied the font files under `<project_root>/public/fonts` you need to link it using the following command
+    ```js
+    // add the below import statement after all the import statements
+    import com.facebook.react.views.text.ReactFontManager;
+    ```
 
-  ```shell
-  npx react-native link --platforms ios
-  ```
+  - Now search for `onCreate` method and add the following line to it
+
+    ```js
+    public void onCreate() {
+      // add the below lines as the first lines
+      ReactFontManager.getInstance().addCustomFont(this, "Inter", R.font.inter);
+      ReactFontManager.getInstance().addCustomFont(this, "TASA Orbiter Display", R.font.tasa);
+      // rest of the content of the method
+    }
+    ```
\ No newline at end of file
diff --git a/packages/blade/docs/guides/Intro.stories.mdx b/packages/blade/docs/guides/Intro.stories.mdx
index 25044d4e0ef..54c3849eda8 100644
--- a/packages/blade/docs/guides/Intro.stories.mdx
+++ b/packages/blade/docs/guides/Intro.stories.mdx
@@ -11,25 +11,32 @@ import { Meta } from '@storybook/addon-docs';
   />
 </p>
 <br />
-<p style={{ textAlign: 'center' }}>
+<div style={{ display: 'flex', alignContent: 'center', justifyContent: 'center', gap: '12px' }}>
   <a href="https://npmjs.org/package/@razorpay/blade">
     <img
       alt="Blade Latest Version"
       src="https://img.shields.io/github/package-json/v/razorpay/blade?style=for-the-badge&labelColor=322&logo=npm&label=@razorpay/Blade&color=darkred&filename=packages%2Fblade%2Fpackage.json"
     />
   </a>
-  &nbsp;&nbsp;
   <a href="https://github.com/razorpay/blade/tree/master/CONTRIBUTING.md">
     <img
       alt="Open for Contributions"
       src="https://img.shields.io/badge/Contributions-Open-333333?style=for-the-badge&logo=github&logoColor=ffffff&labelColor=111111"
     />
   </a>
-</p>
+</div>
 <br />
 
 Blade is the Design System that powers [Razorpay](https://razorpay.com/)
 
+## 💫 Blade Rebranded
+
+- This is the new rebranded version of Blade which is under active development
+- We are currently working on migrating all the components from the old version of Blade to this new rebranded version.
+- Read more about the [rebranding & migration steps here](https://docs.google.com/document/d/1PLwUqx8LyfMeDW4u9CjwKHtSCpT1_sYUYtW_jwpLyDA/edit)
+- Check the current [availability status of rebranded components here](http://localhost:9009/?path=/docs/guides-component-status--docs)
+- Refer the older [documentation of Blade (before v11.0.0) here](https://v10--61c19ee8d3d282003ac1d81c.chromatic.com/)
+
 ## 🔗 Links
 
 - [Docs](https://blade.razorpay.com)
diff --git a/packages/blade/docs/guides/ThemePlayground.stories.mdx b/packages/blade/docs/guides/ThemePlayground.stories.mdx
index d1e77658785..82c9cf042d2 100644
--- a/packages/blade/docs/guides/ThemePlayground.stories.mdx
+++ b/packages/blade/docs/guides/ThemePlayground.stories.mdx
@@ -1,3 +1,4 @@
+{/* TODO: Rebranding - Rexpose Theming once we fix white-labeling */}
 import { Meta } from '@storybook/addon-docs';
 import {
   Collapsible,
@@ -12,7 +13,6 @@ import {
 import { ThemePlayground } from '../../src/storybook-recipes/ThemePlayground';
 
 <Meta title="Guides/Theming/Theme Playground" />
-
 # Theme Playground
 
 Play around with the theme and see how it affects the components!
diff --git a/packages/blade/docs/guides/Usage.stories.mdx b/packages/blade/docs/guides/Usage.stories.mdx
index 5f13ce6fbb5..764366381c9 100644
--- a/packages/blade/docs/guides/Usage.stories.mdx
+++ b/packages/blade/docs/guides/Usage.stories.mdx
@@ -17,11 +17,6 @@ import figmaToken from '../images/figma-token.png';
 
 The first step to get all the capabilities of Blade is to wrap your Application root under Blade's Provider.
 
-Blade offers 2 pre-built themes out of the box:
-
-1. `paymentTheme` - To be used in Payment(PG) products.
-2. `bankingTheme` - To be used in RazorpayX products.
-
 The benefits of using `BladeProvider`?
 
 - Your components will automatically become responsive on different breakpoints.
@@ -31,12 +26,12 @@ The benefits of using `BladeProvider`?
 ```jsx
 // App entry point
 import { BladeProvider } from '@razorpay/blade/components';
-import { paymentTheme } from '@razorpay/blade/tokens';
+import { bladeTheme } from '@razorpay/blade/tokens';
 import App from from './App';
 
 function AppWrapper(): JSX.Element {
   return (
-    <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+    <BladeProvider themeTokens={bladeTheme} colorScheme="light">
       <App />
     </BladeProvider>
   );
@@ -47,8 +42,8 @@ export default AppWrapper;
 
 ## iOS Safari Specific Setup
 
-When using BottomSheet or SpotlightPopoverTour, 
-Make sure to set a width/height to the `body` otherwise when they open, the page will get clipped. 
+When using BottomSheet or SpotlightPopoverTour,
+Make sure to set a width/height to the `body` otherwise when they open, the page will get clipped.
 
 This happens due to a bug in iOS safari where it won't compute the height of the body correctly.
 
diff --git a/packages/blade/docs/images/docs-vrsion-switcher.png b/packages/blade/docs/images/docs-vrsion-switcher.png
new file mode 100644
index 00000000000..a75e2b50c48
Binary files /dev/null and b/packages/blade/docs/images/docs-vrsion-switcher.png differ
diff --git a/packages/blade/docs/images/upgrade-v11-workflow.png b/packages/blade/docs/images/upgrade-v11-workflow.png
new file mode 100644
index 00000000000..fc338604df6
Binary files /dev/null and b/packages/blade/docs/images/upgrade-v11-workflow.png differ
diff --git a/packages/blade/docs/tokens/Border.stories.mdx b/packages/blade/docs/tokens/Border.stories.mdx
index 0fe40870739..2c1e8548b46 100644
--- a/packages/blade/docs/tokens/Border.stories.mdx
+++ b/packages/blade/docs/tokens/Border.stories.mdx
@@ -1,29 +1,20 @@
 import { Meta, DocsContainer } from '@storybook/addon-docs';
 import { BladeProvider, useTheme } from '../../src/components';
 import { makeBorderSize } from '../../src/utils';
-import { paymentTheme, bankingTheme } from '../../src/tokens';
+import { bladeTheme } from '../../src/tokens';
 
 <Meta
   title="Tokens/Border"
   parameters={{
     docs: {
       container: ({ children, context }) => {
-        const themeTokenName = context.store.globals.globals.themeTokenName;
         const colorScheme = context.store.globals.globals.colorScheme;
-        const getThemeTokens = () => {
-          if (themeTokenName === 'paymentTheme') {
-            return paymentTheme;
-          }
-          if (themeTokenName === 'bankingTheme') {
-            return bankingTheme;
-          }
-          return null;
-        };
+        
         return (
           <DocsContainer context={context}>
             <BladeProvider
-              key={`${themeTokenName}-${colorScheme}`}
-              themeTokens={getThemeTokens()}
+              key={colorScheme}
+              themeTokens={bladeTheme}
               colorScheme={colorScheme}
             >
               {children}
diff --git a/packages/blade/docs/tokens/Breakpoints.stories.mdx b/packages/blade/docs/tokens/Breakpoints.stories.mdx
index 4eda2ed715b..747efc68898 100644
--- a/packages/blade/docs/tokens/Breakpoints.stories.mdx
+++ b/packages/blade/docs/tokens/Breakpoints.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, DocsContainer } from '@storybook/addon-docs';
 import { Unstyled } from '@storybook/blocks';
 import { useTheme, BladeProvider, Code, Text, Alert } from '../../src/components';
-import { paymentTheme, bankingTheme } from '../../src/tokens';
+import { bladeTheme } from '../../src/tokens';
 import { getMediaQuery } from '../../src/utils';
 
 <Meta
@@ -9,23 +9,14 @@ import { getMediaQuery } from '../../src/utils';
   parameters={{
     docs: {
       container: ({ children, context }) => {
-        const themeTokenName = context.store.globals.globals.themeTokenName;
         const colorScheme = context.store.globals.globals.colorScheme;
-        const getThemeTokens = () => {
-          if (themeTokenName === 'paymentTheme') {
-            return paymentTheme;
-          }
-          if (themeTokenName === 'bankingTheme') {
-            return bankingTheme;
-          }
-          return null;
-        };
+        
         return (
           <DocsContainer context={context}>
             <BladeProvider
-              key={`${themeTokenName}-${colorScheme}`}
-              themeTokens={getThemeTokens()}
-              colorScheme="light"
+              key={colorScheme}
+              themeTokens={bladeTheme}
+              colorScheme={colorScheme}
             >
               {children}
             </BladeProvider>
@@ -85,6 +76,8 @@ export const Breakpoints = () => {
 
 <Breakpoints />
 
+{/* 
+// TODO(Rebranding): remove after alert is migrated
 <Unstyled>
   <Alert
     description="The corresponding screens mentioned in the table are under assumption that you're using min-width query over token values. Internally in Blade we use min-width queries for responsive props in Box and in useBreakpoint hook. If you're importing breakpoint tokens and using some other media query, the corresponding screen may change"
@@ -92,7 +85,7 @@ export const Breakpoints = () => {
     marginY="spacing.6"
     isDismissible={false}
   />
-</Unstyled>
+</Unstyled> */}
 
 ## `useBreakpoint` hook
 
diff --git a/packages/blade/docs/tokens/Colors.stories.mdx b/packages/blade/docs/tokens/Colors.stories.mdx
deleted file mode 100644
index 6042b94ed58..00000000000
--- a/packages/blade/docs/tokens/Colors.stories.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Meta, DocsContainer, ColorPalette, ColorItem } from '@storybook/addon-docs';
-import { useTheme, BladeProvider } from '../../src/components';
-import { paymentTheme, bankingTheme, colors } from '../../src/tokens';
-import flat from 'flat';
-
-<Meta
-  title="Tokens/Colors"
-  parameters={{
-    docs: {
-      container: ({ children, context }) => {
-        const themeTokenName = context.store.globals.globals.themeTokenName;
-        const colorScheme = context.store.globals.globals.colorScheme;
-        const getThemeTokens = () => {
-          if (themeTokenName === 'paymentTheme') {
-            return paymentTheme;
-          }
-          if (themeTokenName === 'bankingTheme') {
-            return bankingTheme;
-          }
-          return null;
-        };
-        return (
-          <DocsContainer context={context}>
-            <BladeProvider
-              key={`${themeTokenName}-${colorScheme}`}
-              themeTokens={getThemeTokens()}
-              colorScheme={colorScheme}
-            >
-              {children}
-            </BladeProvider>
-          </DocsContainer>
-        );
-      },
-    },
-  }}
-/>
-
-# 🎨 Color Palette
-
-## Chromatic Colors
-
-<ColorPalette>
-  {Object.entries(colors.chromatic).map(([category, swatches]) => (
-    <ColorItem key={category} title={category.toUpperCase()} colors={swatches} />
-  ))}
-</ColorPalette>
-
-## Neutral Colors
-
-<ColorPalette>
-  {Object.entries(colors.neutral).map(([category, swatches]) => (
-    <ColorItem key={category} title={category.toUpperCase()} colors={swatches} />
-  ))}
-</ColorPalette>
-
-# 💅🏻 Theme Tokens
-
-export const ThemeTokens = () => {
-  const { theme } = useTheme();
-  const getColorPalette = () => {
-    const colorPalette = [];
-    Object.entries(theme.colors).forEach(([colorBase, colorBaseValues]) => {
-      Object.entries(colorBaseValues).forEach(([colorProperty, colorPropertyValues]) => {
-        if (typeof colorPropertyValues === 'string') {
-          colorPalette.push({
-            base: colorBase,
-            title: `${colorProperty}`,
-            colors: { [colorProperty]: colorPropertyValues },
-          });
-          return;
-        }
-        Object.entries(colorPropertyValues).forEach(([colorVariant, colorVariantValues]) => {
-          colorPalette.push({
-            base: colorBase,
-            title: `${colorProperty}.${colorVariant}`,
-            colors:
-              typeof colorVariantValues === 'string'
-                ? { [colorVariant]: colorVariantValues }
-                : flat(colorVariantValues),
-          });
-        });
-      });
-    });
-    return (
-      <ColorPalette>
-        {colorPalette.map((colorItem) => (
-          <ColorItem
-            key={colorItem.title}
-            title={`theme.colors.${colorItem.base}.${colorItem.title}`}
-            colors={colorItem.colors}
-          />
-        ))}
-      </ColorPalette>
-    );
-  };
-  return getColorPalette();
-};
-
-<ThemeTokens />
diff --git a/packages/blade/docs/tokens/CssVariables.stories.mdx b/packages/blade/docs/tokens/CssVariables.stories.mdx
deleted file mode 100644
index e80e91d3e90..00000000000
--- a/packages/blade/docs/tokens/CssVariables.stories.mdx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { Meta, DocsContainer } from '@storybook/addon-docs';
-import { useTheme, BladeProvider } from '../../src//components';
-import { paymentTheme, bankingTheme } from '../../src//tokens';
-
-<Meta
-  title="Tokens/CSS Variables"
-  parameters={{
-    docs: {
-      container: ({ children, context }) => {
-        const themeTokenName = context.store.globals.globals.themeTokenName;
-        const colorScheme = context.store.globals.globals.colorScheme;
-        const getThemeTokens = () => {
-          if (themeTokenName === 'paymentTheme') {
-            return paymentTheme;
-          }
-          if (themeTokenName === 'bankingTheme') {
-            return bankingTheme;
-          }
-          return null;
-        };
-        return (
-          <DocsContainer context={context}>
-            <BladeProvider
-              key={`${themeTokenName}-${colorScheme}`}
-              themeTokens={getThemeTokens()}
-              colorScheme={colorScheme}
-            >
-              {children}
-            </BladeProvider>
-          </DocsContainer>
-        );
-      },
-    },
-  }}
-/>
-
-# ✨ CSS Variables
-
-All of the Blade tokens are also available as CSS Variables and can be used by projects that do not want to/cannot handle styling with JS
-
-## Available Themes
-
-- Blade supports 2 themes: **Payment** and **Banking**
-- Each of these 2 themes have a `Light` and a `Dark` mode
-- Depending on screen breakpoints, you can also have different tokens for `Mobile` and `Desktop`
-
-Considering these permutations, we have exposed the following CSS files which you can directly import into your projects:
-
-- **paymentThemeLightDesktop**
-- **paymentThemeLightMobile**
-- **paymentThemeDarkDesktop**
-- **paymentThemeDarkMobile**
-- **bankingThemeLightDesktop**
-- **bankingThemeLightMobile**
-- **bankingThemeDarkDesktop**
-- **bankingThemeDarkMobile**
-
-## Usage
-
-1. Import the CSS file inside your project
-
-```jsx
-import '@razorpay/blade/css/paymentThemeLightDesktop.css';
-```
-
-2. Use the tokens in your css
-
-```css
-.text {
-  color: var(--colors-action-text-primary-default);
-  padding: var(--spacing-1);
-  font-size: var(--typography-fonts-size-75);
-}
-```
-
-> **Note:** Since we depend on CSS variables for our tokens, please ensure that you check for the minimum supported browser versions for CSS variables and handle that appropriately.
-> Refer: [caniuse.com/css-variables](https://caniuse.com/css-variables)
-
-## Example
-
-This is an example CSS file for `paymentThemeLightDesktop.css`
-
-> **Note**: This is not the actual `paymentThemeLightDesktop.css` but just a dummy version of it. The actual values of these variables can change over time as we evolve our themes & tokens.
-
-```css
-:root {
-  /* Actual file will contain all the available blade tokens. This is an example of how the variables would look like.*/
-
-  --border-radius-none: 0px;
-  --border-radius-small: 2px;
-  --border-radius-medium: 4px;
-  --border-radius-large: 8px;
-  --colors-overlay-background: hsla(216, 44%, 23%, 0.32);
-  --colors-brand-primary-300: hsla(218, 89%, 51%, 0.09);
-  --colors-brand-primary-400: hsla(218, 89%, 51%, 0.18);
-  --colors-brand-primary-500: hsla(213, 89%, 56%, 1);
-  --colors-brand-primary-600: hsla(218, 89%, 51%, 1);
-  --colors-brand-primary-700: hsla(223, 95%, 48%, 1);
-  --colors-brand-primary-800: hsla(234, 100%, 34%, 1);
-  --colors-brand-gray-200: hsla(220, 27%, 98%, 1);
-  --colors-brand-gray-300: hsla(220, 30%, 96%, 1);
-  --colors-brand-gray-400: hsla(216, 19%, 89%, 1);
-  --colors-brand-gray-500: hsla(214, 18%, 69%, 1);
-  --colors-brand-gray-600: hsla(216, 16%, 60%, 1);
-  --colors-brand-gray-700: hsla(217, 18%, 45%, 1);
-  --colors-brand-secondary-500: hsla(149, 99%, 35%, 1);
-  --motion-delay-2xshort: 70ms;
-  --motion-duration-gentle: 400ms;
-  --motion-duration-xgentle: 600ms;
-  --motion-duration-2xgentle: 900ms;
-  --motion-easing-standard-attentive: cubic-bezier(0.5, 0, 0.3, 1.5);
-  --motion-easing-standard-effective: cubic-bezier(0.3, 0, 0.2, 1);
-  --motion-easing-standard-revealing: cubic-bezier(0.5, 0, 0, 1);
-  --spacing-0: 0px;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --typography-fonts-size-50: 0.6875rem;
-  --typography-fonts-size-75: 0.75rem;
-  --typography-fonts-size-100: 0.875rem;
-  --typography-fonts-size-200: 1rem;
-  --typography-fonts-size-300: 1.125rem;
-  --typography-fonts-size-400: 1.25rem;
-  --typography-fonts-size-500: 1.375rem;
-  --typography-fonts-size-1000: 2.5rem;
-  --typography-fonts-weight-regular: 400;
-  --typography-fonts-weight-bold: 700;
-  --typography-line-heights-s: 1rem;
-  --typography-line-heights-m: 1.125rem;
-  --typography-line-heights-l: 1.25rem;
-  --typography-line-heights-xl: 1.5rem;
-  --typography-line-heights-4xl: 2.375rem;
-}
-```
diff --git a/packages/blade/docs/tokens/Elevation.stories.mdx b/packages/blade/docs/tokens/Elevation.stories.mdx
index 243ec344230..74779ad3f45 100644
--- a/packages/blade/docs/tokens/Elevation.stories.mdx
+++ b/packages/blade/docs/tokens/Elevation.stories.mdx
@@ -1,28 +1,18 @@
 import { Meta, DocsContainer } from '@storybook/addon-docs';
 import { useTheme, BladeProvider } from '../../src/components';
-import { paymentTheme, bankingTheme } from '../../src/tokens';
+import { bladeTheme } from '../../src/tokens';
 
 <Meta
   title="Tokens/Elevation"
   parameters={{
     docs: {
       container: ({ children, context }) => {
-        const themeTokenName = context.store.globals.globals.themeTokenName;
         const colorScheme = context.store.globals.globals.colorScheme;
-        const getThemeTokens = () => {
-          if (themeTokenName === 'paymentTheme') {
-            return paymentTheme;
-          }
-          if (themeTokenName === 'bankingTheme') {
-            return bankingTheme;
-          }
-          return null;
-        };
         return (
           <DocsContainer context={context}>
             <BladeProvider
-              key={`${themeTokenName}-${colorScheme}`}
-              themeTokens={getThemeTokens()}
+              key={colorScheme}
+              themeTokens={bladeTheme}
               colorScheme={colorScheme}
             >
               {children}
@@ -36,9 +26,8 @@ import { paymentTheme, bankingTheme } from '../../src/tokens';
 
 # 🪞 Elevation
 
-export const Border = () => {
+export const Elevation = () => {
   const { theme } = useTheme();
-  console.log(theme.colors.surface.text);
   return (
     <table>
       <tbody>
@@ -46,11 +35,11 @@ export const Border = () => {
           <tr
             key={key}
             style={{
-              backgroundColor: theme.colors.surface.background.level1.lowContrast,
+              backgroundColor: theme.colors.surface.background.gray.moderate,
             }}
           >
             <td
-              style={{ color: theme.colors.surface.text.normal.lowContrast }}
+              style={{ color: theme.colors.surface.text.gray.normal }}
             >{`theme.elevation.${key}`}</td>
             <td style={{ padding: '20px' }}>
               <div
@@ -70,4 +59,4 @@ export const Border = () => {
   );
 };
 
-<Border />
+<Elevation />
diff --git a/packages/blade/docs/tokens/Motion.stories.mdx b/packages/blade/docs/tokens/Motion.stories.mdx
index 03097dfd3ba..16e2a4badd3 100644
--- a/packages/blade/docs/tokens/Motion.stories.mdx
+++ b/packages/blade/docs/tokens/Motion.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, DocsContainer } from '@storybook/addon-docs';
 import styled from 'styled-components';
 import { useTheme, BladeProvider } from '../../src/components';
-import { paymentTheme, bankingTheme } from '../../src/tokens';
+import { bladeTheme } from '../../src/tokens';
 import { makeMotionTime } from '../../src/utils';
 import MovingDiv from '../components/MovingDiv';
 
@@ -10,22 +10,12 @@ import MovingDiv from '../components/MovingDiv';
   parameters={{
     docs: {
       container: ({ children, context }) => {
-        const themeTokenName = context.store.globals.globals.themeTokenName;
         const colorScheme = context.store.globals.globals.colorScheme;
-        const getThemeTokens = () => {
-          if (themeTokenName === 'paymentTheme') {
-            return paymentTheme;
-          }
-          if (themeTokenName === 'bankingTheme') {
-            return bankingTheme;
-          }
-          return null;
-        };
         return (
           <DocsContainer context={context}>
             <BladeProvider
-              key={`${themeTokenName}-${colorScheme}`}
-              themeTokens={getThemeTokens()}
+              key={colorScheme}
+              themeTokens={bladeTheme}
               colorScheme={colorScheme}
             >
               {children}
@@ -76,7 +66,7 @@ export const Motion = () => {
               <td>{`theme.motion.easing.standard.${key}`}</td>
               <td>{value}</td>
               <td style={{ width: '150px' }}>
-                <MovingDiv theme={theme} easing={theme.motion.easing.standard[key]}></MovingDiv>
+                <MovingDiv theme={theme} easing={theme.motion.easing.standard[key]} />
               </td>
             </tr>
           ))}
@@ -90,7 +80,7 @@ export const Motion = () => {
               <td>{`theme.motion.easing.entrance.${key}`}</td>
               <td>{value}</td>
               <td style={{ width: '150px' }}>
-                <MovingDiv theme={theme} easing={theme.motion.easing.entrance[key]}></MovingDiv>
+                <MovingDiv theme={theme} easing={theme.motion.easing.entrance[key]} />
               </td>
             </tr>
           ))}
@@ -104,7 +94,7 @@ export const Motion = () => {
               <td>{`theme.motion.easing.exit.${key}`}</td>
               <td>{value}</td>
               <td style={{ width: '150px' }}>
-                <MovingDiv theme={theme} easing={theme.motion.easing.exit[key]}></MovingDiv>
+                <MovingDiv theme={theme} easing={theme.motion.easing.exit[key]} />
               </td>
             </tr>
           ))}
@@ -120,7 +110,7 @@ export const MotionExample = () => {
     height: 50px;
     width: 50px;
     border-radius: 25px;
-    background-color: ${(props) => props.theme.colors.brand.primary[500]};
+    background-color: ${(props) => props.theme.colors.surface.background.primary.subtle};
     animation: ${(props) =>
       `resize ${makeMotionTime(props.theme.motion.duration.xgentle)} ${
         props.theme.motion.easing.standard.effective
@@ -137,7 +127,7 @@ export const MotionExample = () => {
       }
     }
   `;
-  return <ExampleDiv theme={theme} easing={theme.motion.easing.standard.effective}></ExampleDiv>;
+  return <ExampleDiv theme={theme} easing={theme.motion.easing.standard.effective} />;
 };
 
 <Motion />
@@ -158,7 +148,9 @@ const ExampleDiv = styled.div`
   height: 50px;
   width: 50px;
   border-radius: 25px;
-  background-color: ${(props) => props.theme.colors.brand.primary[500]};
+  background-color: ${(props) =>
+    console.log('from example div', props.theme) ||
+    props.theme.colors.surface.background.primary.subtle};
   animation: ${(props) =>
     `resize ${makeMotionTime(props.theme.motion.duration.xgentle)} ${
       props.theme.motion.easing.standard.effective
diff --git a/packages/blade/docs/tokens/Spacing.stories.mdx b/packages/blade/docs/tokens/Spacing.stories.mdx
index a318ee2a98b..84a4c9c0280 100644
--- a/packages/blade/docs/tokens/Spacing.stories.mdx
+++ b/packages/blade/docs/tokens/Spacing.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, DocsContainer } from '@storybook/addon-docs';
 import { useTheme, BladeProvider } from '../../src/components';
-import { paymentTheme, bankingTheme } from '../../src/tokens';
+import { bladeTheme } from '../../src/tokens';
 import { makeSpace } from '../../src/utils';
 
 <Meta
@@ -8,22 +8,12 @@ import { makeSpace } from '../../src/utils';
   parameters={{
     docs: {
       container: ({ children, context }) => {
-        const themeTokenName = context.store.globals.globals.themeTokenName;
         const colorScheme = context.store.globals.globals.colorScheme;
-        const getThemeTokens = () => {
-          if (themeTokenName === 'paymentTheme') {
-            return paymentTheme;
-          }
-          if (themeTokenName === 'bankingTheme') {
-            return bankingTheme;
-          }
-          return null;
-        };
         return (
           <DocsContainer context={context}>
             <BladeProvider
-              key={`${themeTokenName}-${colorScheme}`}
-              themeTokens={getThemeTokens()}
+              key={colorScheme}
+              themeTokens={bladeTheme}
               colorScheme={colorScheme}
             >
               {children}
diff --git a/packages/blade/docs/tokens/ThemeExplorer.stories.mdx b/packages/blade/docs/tokens/ThemeExplorer.stories.mdx
new file mode 100644
index 00000000000..26601e28e69
--- /dev/null
+++ b/packages/blade/docs/tokens/ThemeExplorer.stories.mdx
@@ -0,0 +1,70 @@
+import { Meta, DocsContainer } from '@storybook/addon-docs';
+import { JSONTree } from 'react-json-tree';
+import { useTheme, BladeProvider, Box, Text } from '../../src/components';
+import { bladeTheme } from '../../src/tokens';
+
+<Meta
+  title="Tokens/Theme"
+  parameters={{
+    docs: {
+      container: ({ children, context }) => {
+        const colorScheme = context.store.globals.globals.colorScheme;
+        return (
+          <DocsContainer context={context}>
+            <BladeProvider key={colorScheme} themeTokens={bladeTheme} colorScheme={colorScheme}>
+              {children}
+            </BladeProvider>
+          </DocsContainer>
+        );
+      },
+    },
+  }}
+/>
+
+# 🔭 Blade's Theme
+
+Explore Blade's theme tokens.
+
+export const ThemeExplorer = () => {
+  const { theme } = useTheme();
+  return (
+    <Box paddingX="spacing.5" paddingY="spacing.2" backgroundColor="surface.background.gray.moderate">
+      <JSONTree
+        data={theme}
+        hideRoot
+        valueRenderer={(valueAsString, value) => {
+          if (value?.startsWith?.('hsla')) {
+            return (
+              <Box display="inline-flex" gap="spacing.5">
+                <div style={{ backgroundColor: value, height: '20px', width: '20px' }} />
+                <Text>{value}</Text>
+              </Box>
+            );
+          }
+          return <Text display="inline">{value}</Text>;
+        }}
+        theme={{
+          scheme: 'Material Lighter',
+          base00: theme.colors.surface.background.gray.moderate,
+          base01: '#f0f0f1',
+          base02: '#e5e5e6',
+          base03: theme.colors.surface.text.gray.muted,
+          base04: '#696c77',
+          base05: '#383a42',
+          base06: '#202227',
+          base07: '#090a0b',
+          base08: '#ca1243',
+          base09: '#d75f00',
+          base0A: '#c18401',
+          base0B: theme.colors.feedback.text.positive.intense,
+          base0C: '#0184bc',
+          base0D: theme.colors.interactive.text.primary.default,
+          base0E: '#a626a4',
+          base0F: '#986801',
+        }}
+      />
+    </Box>
+  );
+};
+
+<ThemeExplorer />
diff --git a/packages/blade/docs/tokens/Typography.stories.mdx b/packages/blade/docs/tokens/Typography.stories.mdx
index 66f888194ef..4b1143f92a7 100644
--- a/packages/blade/docs/tokens/Typography.stories.mdx
+++ b/packages/blade/docs/tokens/Typography.stories.mdx
@@ -1,29 +1,20 @@
 import { Meta, DocsContainer } from '@storybook/addon-docs';
-import { useTheme, BladeProvider } from '../../src//components';
-import { paymentTheme, bankingTheme } from '../../src/tokens';
+import { useTheme, BladeProvider, Box } from '../../src//components';
+import { bladeTheme } from '../../src/tokens';
 import { makeTypographySize } from '../../src/utils';
+import FigmaEmbed from '../../src/utils/storybook/FigmaEmbed';
 
 <Meta
   title="Tokens/Typography"
   parameters={{
     docs: {
       container: ({ children, context }) => {
-        const themeTokenName = context.store.globals.globals.themeTokenName;
         const colorScheme = context.store.globals.globals.colorScheme;
-        const getThemeTokens = () => {
-          if (themeTokenName === 'paymentTheme') {
-            return paymentTheme;
-          }
-          if (themeTokenName === 'bankingTheme') {
-            return bankingTheme;
-          }
-          return null;
-        };
         return (
           <DocsContainer context={context}>
             <BladeProvider
-              key={`${themeTokenName}-${colorScheme}`}
-              themeTokens={getThemeTokens()}
+              key={colorScheme}
+              themeTokens={bladeTheme}
               colorScheme={colorScheme}
             >
               {children}
@@ -39,6 +30,10 @@ import { makeTypographySize } from '../../src/utils';
 
 > These tokens should be used along with the [makeTypographySize util](?path=/story/utils-maketypographysize--page).
 
+<Box paddingY="spacing.6">
+  <FigmaEmbed src="https://www.figma.com/file/5BZsOpNjbUHqgVh850yPBW/%5BResearch%5D-Typography-%26-Spacing-Refresh?type=design&node-id=101-99618&mode=design&t=KdVVWtntizpKmsBt-0" />
+</Box>
+
 export const Typography = () => {
   const { theme } = useTheme();
   return (
diff --git a/packages/blade/docs/utils/useTheme.stories.mdx b/packages/blade/docs/utils/useTheme.stories.mdx
index 2cc3688e90f..d71e8d3a802 100644
--- a/packages/blade/docs/utils/useTheme.stories.mdx
+++ b/packages/blade/docs/utils/useTheme.stories.mdx
@@ -18,12 +18,26 @@ import { Meta } from '@storybook/addon-docs';
 
 The `useTheme` hook returns a `ThemeContext` object that contains the following properties:
 
-| Property         | Type                                                               | Description                                                                                                            |
-| ---------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| `theme`          | [`Theme`](#theme)                                                  | The current theme object, which contains the values for various design tokens such as colors, typography, and spacing. |
-| `colorScheme`    | [`ColorScheme`](#colorscheme)                                      | The current color scheme of the application, which can be either 'light' or 'dark'.                                    |
-| `platform`       | [`Platform`](#platform)                                            | The current platform of the application, which can be either 'onDesktop' or 'onMobile'.                                |
-| `setColorScheme` | `(colorScheme: `[`ColorSchemeInput`](#colorschemeinput)`) => void` | A function that allows you to set the color scheme of the application.                                                 |
+```ts
+type ThemeContext = {
+  /**
+   * The current theme object, which contains the values for various design tokens such as colors, typography, and spacing.
+   */
+  theme: Theme;
+  /**
+   * The current color scheme of the application, which can be either 'light' or 'dark'.
+   */
+  colorScheme: ColorSchemeNames;
+  /**
+   * The current platform of the application, which can be either 'onDesktop' or 'onMobile'.
+   */
+  platform: Platform;
+  /**
+   * A function that allows you to set the color scheme of the application.
+   */
+  setColorScheme: (colorScheme: ColorSchemeInput) => void;
+}
+```
 
 ### Usage
 
@@ -57,7 +71,7 @@ export default MyComponent;
 
 ```tsx
 type Theme = {
-  name: 'paymentTheme' | 'bankingTheme';
+  name: 'bladeTheme';
   border: Border;
   breakpoints: Breakpoints;
   colors: Colors;
@@ -78,13 +92,13 @@ To further explore the tokens in Theme, you can navigate to their respective doc
 - [Elevation](?path=/story/tokens-elevation--page)
 - [Typography](?path=/story/tokens-typography--page)
 
-#### `ColorScheme`
+#### `ColorSchemeNames`
 
 The current color scheme of the application. Can be either `'dark'` or `'light'`.
 If color scheme is set to 'system' using `setColorScheme`, the colorScheme property will return `'dark'` or `'light'` based on the user's system preferences.
 
 ```tsx
-type ColorScheme = 'dark' | 'light';
+type ColorSchemeNames = 'dark' | 'light';
 ```
 
 #### `Platform`
diff --git a/packages/blade/fonts.css b/packages/blade/fonts.css
new file mode 100644
index 00000000000..daaf53b0cb1
--- /dev/null
+++ b/packages/blade/fonts.css
@@ -0,0 +1,82 @@
+@font-face {
+  font-family: 'TASA Orbiter';
+  src: url('./fonts/tasa-orbiter.woff2') format('woff2-variations');
+  font-weight: 125 950;
+  font-stretch: 75% 125%;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* inter-cyrillic-ext-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-cyrillic-extra.woff2) format('woff2-variations');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-cyrillic.woff2) format('woff2-variations');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* inter-greek-ext-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-greek-extra.woff2) format('woff2-variations');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* inter-greek-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-greek.woff2) format('woff2-variations');
+  unicode-range: U+0370-03FF;
+}
+
+/* inter-vietnamese-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-vietnamese.woff2) format('woff2-variations');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
+    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* inter-latin-extra-rzp: custom font which excludes common to razorpay latin symbols */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-latin-blade-extra.woff2) format('woff2-variations');
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF,
+    U+2020, U+20C1-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* inter-latin-rzp */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-latin-blade.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20A0-20AF, U+20B0-20BF, U+20C0,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/packages/blade/fonts/blade-fonts-react-native.zip b/packages/blade/fonts/blade-fonts-react-native.zip
new file mode 100644
index 00000000000..94d9ed2bf48
Binary files /dev/null and b/packages/blade/fonts/blade-fonts-react-native.zip differ
diff --git a/packages/blade/fonts/inter-variable/inter-cyrillic-extra.woff2 b/packages/blade/fonts/inter-variable/inter-cyrillic-extra.woff2
new file mode 100644
index 00000000000..a61a0be57fb
Binary files /dev/null and b/packages/blade/fonts/inter-variable/inter-cyrillic-extra.woff2 differ
diff --git a/packages/blade/fonts/inter-variable/inter-cyrillic.woff2 b/packages/blade/fonts/inter-variable/inter-cyrillic.woff2
new file mode 100644
index 00000000000..b655a438842
Binary files /dev/null and b/packages/blade/fonts/inter-variable/inter-cyrillic.woff2 differ
diff --git a/packages/blade/fonts/inter-variable/inter-greek-extra.woff2 b/packages/blade/fonts/inter-variable/inter-greek-extra.woff2
new file mode 100644
index 00000000000..9117b5b040d
Binary files /dev/null and b/packages/blade/fonts/inter-variable/inter-greek-extra.woff2 differ
diff --git a/packages/blade/fonts/inter-variable/inter-greek.woff2 b/packages/blade/fonts/inter-variable/inter-greek.woff2
new file mode 100644
index 00000000000..eb38b38ea07
Binary files /dev/null and b/packages/blade/fonts/inter-variable/inter-greek.woff2 differ
diff --git a/packages/blade/fonts/inter-variable/inter-latin-blade-extra.woff2 b/packages/blade/fonts/inter-variable/inter-latin-blade-extra.woff2
new file mode 100644
index 00000000000..84d96fd33bc
Binary files /dev/null and b/packages/blade/fonts/inter-variable/inter-latin-blade-extra.woff2 differ
diff --git a/packages/blade/fonts/inter-variable/inter-latin-blade.woff2 b/packages/blade/fonts/inter-variable/inter-latin-blade.woff2
new file mode 100644
index 00000000000..550cbda8203
Binary files /dev/null and b/packages/blade/fonts/inter-variable/inter-latin-blade.woff2 differ
diff --git a/packages/blade/fonts/inter-variable/inter-vietnamese.woff2 b/packages/blade/fonts/inter-variable/inter-vietnamese.woff2
new file mode 100644
index 00000000000..ce21ca172ea
Binary files /dev/null and b/packages/blade/fonts/inter-variable/inter-vietnamese.woff2 differ
diff --git a/packages/blade/fonts/tasa-orbiter.woff2 b/packages/blade/fonts/tasa-orbiter.woff2
new file mode 100644
index 00000000000..212dedfc26b
Binary files /dev/null and b/packages/blade/fonts/tasa-orbiter.woff2 differ
diff --git a/packages/blade/ios/blade.xcodeproj/project.pbxproj b/packages/blade/ios/blade.xcodeproj/project.pbxproj
index 2ed3c8b7666..83a888d00b9 100644
--- a/packages/blade/ios/blade.xcodeproj/project.pbxproj
+++ b/packages/blade/ios/blade.xcodeproj/project.pbxproj
@@ -8,15 +8,18 @@
 
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* bladeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* bladeTests.m */; };
+		096B3CF46B7A474F807F3A37 /* Inter-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B567457C213041FE86C04D20 /* Inter-Medium.ttf */; };
+		1289679BF617003603E1D96C /* libPods-blade.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 05289D6BAC570B921A90C6BE /* libPods-blade.a */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		266F8222282194C84355FB43 /* libPods-blade.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A14C4DCE8FBCAD8DAD09818D /* libPods-blade.a */; };
+		213025F0817F1328F31B381D /* libPods-blade-bladeTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 8B27F5BC67AB2B3FEF8CAA36 /* libPods-blade-bladeTests.a */; };
+		2DDA884D7B694E66B1FA25E8 /* TASAOrbiterDisplay-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = E8E92216E4A7480899561D98 /* TASAOrbiterDisplay-Medium.otf */; };
+		3ACA67F067244DEB99783E06 /* Inter-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F7902B25200F4FEFA8929693 /* Inter-Regular.ttf */; };
+		3C6D9471A17E415FBA813B6A /* TASAOrbiterDisplay-SemiBold.otf in Resources */ = {isa = PBXBuildFile; fileRef = C52015C732D640A597B8A769 /* TASAOrbiterDisplay-SemiBold.otf */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
-		B99D16E7788AF691EA9E6E1A /* libPods-blade-bladeTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = BDF7CC2C2C0866401CC832E2 /* libPods-blade-bladeTests.a */; };
-		BE94BDCFE4A742E89E116690 /* Lato-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4C0A80DCDFF54BF28ED33285 /* Lato-Regular.ttf */; };
-		DD50086558394F9D8B0F07DA /* Lato-Italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A2D9B3E1EEE34EC9AD42AA9C /* Lato-Italic.ttf */; };
-		F31095E142B84AD0A9E345EB /* Lato-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 856B36C0CBEA4725AD05BF92 /* Lato-Bold.ttf */; };
+		BB8E5D4B741B4FE6809D0474 /* Inter-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A16BDE98C023436FB6B67991 /* Inter-SemiBold.ttf */; };
+		C165FFDEB65E4E1F81E5B86F /* TASAOrbiterDisplay-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = B3C7EB8E12344CD381BF5029 /* TASAOrbiterDisplay-Regular.otf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -33,23 +36,26 @@
 		00E356EE1AD99517003FC87E /* bladeTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = bladeTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* bladeTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = bladeTests.m; sourceTree = "<group>"; };
+		05289D6BAC570B921A90C6BE /* libPods-blade.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-blade.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07F961A680F5B00A75B9A /* blade.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = blade.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = blade/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.mm; path = blade/AppDelegate.mm; sourceTree = "<group>"; };
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = blade/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = blade/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = blade/main.m; sourceTree = "<group>"; };
-		4C0A80DCDFF54BF28ED33285 /* Lato-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Lato-Regular.ttf"; path = "../public/fonts/Lato-Regular.ttf"; sourceTree = "<group>"; };
+		4CA022869B459976685D7670 /* Pods-blade-bladeTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-blade-bladeTests.debug.xcconfig"; path = "Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests.debug.xcconfig"; sourceTree = "<group>"; };
+		546399717616CEBC1ACF3EA7 /* Pods-blade-bladeTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-blade-bladeTests.release.xcconfig"; path = "Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests.release.xcconfig"; sourceTree = "<group>"; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = blade/LaunchScreen.storyboard; sourceTree = "<group>"; };
-		856B36C0CBEA4725AD05BF92 /* Lato-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Lato-Bold.ttf"; path = "../public/fonts/Lato-Bold.ttf"; sourceTree = "<group>"; };
-		9B55C243E3A89932C0E9E7DB /* Pods-blade-bladeTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-blade-bladeTests.release.xcconfig"; path = "Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests.release.xcconfig"; sourceTree = "<group>"; };
-		9DFE3CEDD36C82CC4702A8EA /* Pods-blade.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-blade.debug.xcconfig"; path = "Target Support Files/Pods-blade/Pods-blade.debug.xcconfig"; sourceTree = "<group>"; };
-		A14C4DCE8FBCAD8DAD09818D /* libPods-blade.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-blade.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		A2D9B3E1EEE34EC9AD42AA9C /* Lato-Italic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Lato-Italic.ttf"; path = "../public/fonts/Lato-Italic.ttf"; sourceTree = "<group>"; };
-		BDF7CC2C2C0866401CC832E2 /* libPods-blade-bladeTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-blade-bladeTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		C4487C58CEC69308BD915E38 /* Pods-blade.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-blade.release.xcconfig"; path = "Target Support Files/Pods-blade/Pods-blade.release.xcconfig"; sourceTree = "<group>"; };
-		C8AEEE4D40BD6854CCC4C971 /* Pods-blade-bladeTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-blade-bladeTests.debug.xcconfig"; path = "Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests.debug.xcconfig"; sourceTree = "<group>"; };
+		8B27F5BC67AB2B3FEF8CAA36 /* libPods-blade-bladeTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-blade-bladeTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		9B3F7FB86949F4F060531826 /* Pods-blade.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-blade.debug.xcconfig"; path = "Target Support Files/Pods-blade/Pods-blade.debug.xcconfig"; sourceTree = "<group>"; };
+		9F077C2F232E774BBB581EA4 /* Pods-blade.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-blade.release.xcconfig"; path = "Target Support Files/Pods-blade/Pods-blade.release.xcconfig"; sourceTree = "<group>"; };
+		A16BDE98C023436FB6B67991 /* Inter-SemiBold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBold.ttf"; path = "../public/fonts/Inter-SemiBold.ttf"; sourceTree = "<group>"; };
+		B3C7EB8E12344CD381BF5029 /* TASAOrbiterDisplay-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "TASAOrbiterDisplay-Regular.otf"; path = "../public/fonts/TASAOrbiterDisplay-Regular.otf"; sourceTree = "<group>"; };
+		B567457C213041FE86C04D20 /* Inter-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Medium.ttf"; path = "../public/fonts/Inter-Medium.ttf"; sourceTree = "<group>"; };
+		C52015C732D640A597B8A769 /* TASAOrbiterDisplay-SemiBold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "TASAOrbiterDisplay-SemiBold.otf"; path = "../public/fonts/TASAOrbiterDisplay-SemiBold.otf"; sourceTree = "<group>"; };
+		E8E92216E4A7480899561D98 /* TASAOrbiterDisplay-Medium.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "TASAOrbiterDisplay-Medium.otf"; path = "../public/fonts/TASAOrbiterDisplay-Medium.otf"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		F7902B25200F4FEFA8929693 /* Inter-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Regular.ttf"; path = "../public/fonts/Inter-Regular.ttf"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -57,7 +63,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				B99D16E7788AF691EA9E6E1A /* libPods-blade-bladeTests.a in Frameworks */,
+				213025F0817F1328F31B381D /* libPods-blade-bladeTests.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -65,7 +71,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				266F8222282194C84355FB43 /* libPods-blade.a in Frameworks */,
+				1289679BF617003603E1D96C /* libPods-blade.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -106,8 +112,8 @@
 			isa = PBXGroup;
 			children = (
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
-				A14C4DCE8FBCAD8DAD09818D /* libPods-blade.a */,
-				BDF7CC2C2C0866401CC832E2 /* libPods-blade-bladeTests.a */,
+				05289D6BAC570B921A90C6BE /* libPods-blade.a */,
+				8B27F5BC67AB2B3FEF8CAA36 /* libPods-blade-bladeTests.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -115,9 +121,12 @@
 		5C22DD5EE2B54E989C844E5B /* Resources */ = {
 			isa = PBXGroup;
 			children = (
-				856B36C0CBEA4725AD05BF92 /* Lato-Bold.ttf */,
-				4C0A80DCDFF54BF28ED33285 /* Lato-Regular.ttf */,
-				A2D9B3E1EEE34EC9AD42AA9C /* Lato-Italic.ttf */,
+				B567457C213041FE86C04D20 /* Inter-Medium.ttf */,
+				F7902B25200F4FEFA8929693 /* Inter-Regular.ttf */,
+				A16BDE98C023436FB6B67991 /* Inter-SemiBold.ttf */,
+				E8E92216E4A7480899561D98 /* TASAOrbiterDisplay-Medium.otf */,
+				B3C7EB8E12344CD381BF5029 /* TASAOrbiterDisplay-Regular.otf */,
+				C52015C732D640A597B8A769 /* TASAOrbiterDisplay-SemiBold.otf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -157,10 +166,10 @@
 		E233CBF5F47BEE60B243DCF8 /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				9DFE3CEDD36C82CC4702A8EA /* Pods-blade.debug.xcconfig */,
-				C4487C58CEC69308BD915E38 /* Pods-blade.release.xcconfig */,
-				C8AEEE4D40BD6854CCC4C971 /* Pods-blade-bladeTests.debug.xcconfig */,
-				9B55C243E3A89932C0E9E7DB /* Pods-blade-bladeTests.release.xcconfig */,
+				9B3F7FB86949F4F060531826 /* Pods-blade.debug.xcconfig */,
+				9F077C2F232E774BBB581EA4 /* Pods-blade.release.xcconfig */,
+				4CA022869B459976685D7670 /* Pods-blade-bladeTests.debug.xcconfig */,
+				546399717616CEBC1ACF3EA7 /* Pods-blade-bladeTests.release.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -172,12 +181,12 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "bladeTests" */;
 			buildPhases = (
-				D9AE1A6B87F4CD816890EE58 /* [CP] Check Pods Manifest.lock */,
+				1DF7F3379B3F51D44E75BDA5 /* [CP] Check Pods Manifest.lock */,
 				00E356EA1AD99517003FC87E /* Sources */,
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
-				62ABD0FE541C5F2531367596 /* [CP] Embed Pods Frameworks */,
-				35AA50DCE8D216A77D691FF0 /* [CP] Copy Pods Resources */,
+				6E61FA71D9B33780785A1438 /* [CP] Embed Pods Frameworks */,
+				689CD505EA156628807C2C72 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -193,14 +202,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "blade" */;
 			buildPhases = (
-				0203E7B3A024BEDE79D0DED8 /* [CP] Check Pods Manifest.lock */,
+				12D360FF56354CCE860E23E8 /* [CP] Check Pods Manifest.lock */,
 				FD10A7F022414F080027D42C /* Start Packager */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
-				86915FD5D34C99E6603B4762 /* [CP] Embed Pods Frameworks */,
-				D37E8685467072B11E9C281A /* [CP] Copy Pods Resources */,
+				0E0CD05091892B62D37F2E47 /* [CP] Embed Pods Frameworks */,
+				2D9B15AA36ED5E0C58C812D5 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -261,9 +270,12 @@
 			files = (
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
-				F31095E142B84AD0A9E345EB /* Lato-Bold.ttf in Resources */,
-				BE94BDCFE4A742E89E116690 /* Lato-Regular.ttf in Resources */,
-				DD50086558394F9D8B0F07DA /* Lato-Italic.ttf in Resources */,
+				096B3CF46B7A474F807F3A37 /* Inter-Medium.ttf in Resources */,
+				3ACA67F067244DEB99783E06 /* Inter-Regular.ttf in Resources */,
+				BB8E5D4B741B4FE6809D0474 /* Inter-SemiBold.ttf in Resources */,
+				2DDA884D7B694E66B1FA25E8 /* TASAOrbiterDisplay-Medium.otf in Resources */,
+				C165FFDEB65E4E1F81E5B86F /* TASAOrbiterDisplay-Regular.otf in Resources */,
+				3C6D9471A17E415FBA813B6A /* TASAOrbiterDisplay-SemiBold.otf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -284,116 +296,116 @@
 			shellPath = /bin/sh;
 			shellScript = "set -e\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n\nexport NODE_BINARY=node\nexport ENTRY_FILE=.storybook/react-native/Storybook.tsx\nexport FRAMEWORK=REACT_NATIVE\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
 		};
-		0203E7B3A024BEDE79D0DED8 /* [CP] Check Pods Manifest.lock */ = {
+		0E0CD05091892B62D37F2E47 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
+			name = "[CP] Embed Pods Frameworks";
 			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-blade-checkManifestLockResult.txt",
+				"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-frameworks-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		35AA50DCE8D216A77D691FF0 /* [CP] Copy Pods Resources */ = {
+		12D360FF56354CCE860E23E8 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			name = "[CP] Copy Pods Resources";
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
 			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-resources-${CONFIGURATION}-output-files.xcfilelist",
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-blade-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-resources.sh\"\n";
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		62ABD0FE541C5F2531367596 /* [CP] Embed Pods Frameworks */ = {
+		1DF7F3379B3F51D44E75BDA5 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			name = "[CP] Embed Pods Frameworks";
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
 			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-frameworks-${CONFIGURATION}-output-files.xcfilelist",
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-blade-bladeTests-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-frameworks.sh\"\n";
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		86915FD5D34C99E6603B4762 /* [CP] Embed Pods Frameworks */ = {
+		2D9B15AA36ED5E0C58C812D5 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-frameworks-${CONFIGURATION}-input-files.xcfilelist",
+				"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			name = "[CP] Embed Pods Frameworks";
+			name = "[CP] Copy Pods Resources";
 			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-frameworks-${CONFIGURATION}-output-files.xcfilelist",
+				"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-resources-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-frameworks.sh\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		D37E8685467072B11E9C281A /* [CP] Copy Pods Resources */ = {
+		689CD505EA156628807C2C72 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-resources-${CONFIGURATION}-input-files.xcfilelist",
+				"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-resources-${CONFIGURATION}-output-files.xcfilelist",
+				"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-resources-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-blade/Pods-blade-resources.sh\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		D9AE1A6B87F4CD816890EE58 /* [CP] Check Pods Manifest.lock */ = {
+		6E61FA71D9B33780785A1438 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
+			name = "[CP] Embed Pods Frameworks";
 			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-blade-bladeTests-checkManifestLockResult.txt",
+				"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-frameworks-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-blade-bladeTests/Pods-blade-bladeTests-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
 		FD10A7F022414F080027D42C /* Start Packager */ = {
@@ -448,7 +460,7 @@
 /* Begin XCBuildConfiguration section */
 		00E356F61AD99517003FC87E /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = C8AEEE4D40BD6854CCC4C971 /* Pods-blade-bladeTests.debug.xcconfig */;
+			baseConfigurationReference = 4CA022869B459976685D7670 /* Pods-blade-bladeTests.debug.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -475,7 +487,7 @@
 		};
 		00E356F71AD99517003FC87E /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 9B55C243E3A89932C0E9E7DB /* Pods-blade-bladeTests.release.xcconfig */;
+			baseConfigurationReference = 546399717616CEBC1ACF3EA7 /* Pods-blade-bladeTests.release.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				COPY_PHASE_STRIP = NO;
@@ -499,7 +511,7 @@
 		};
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 9DFE3CEDD36C82CC4702A8EA /* Pods-blade.debug.xcconfig */;
+			baseConfigurationReference = 9B3F7FB86949F4F060531826 /* Pods-blade.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
@@ -525,7 +537,7 @@
 		};
 		13B07F951A680F5B00A75B9A /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = C4487C58CEC69308BD915E38 /* Pods-blade.release.xcconfig */;
+			baseConfigurationReference = 9F077C2F232E774BBB581EA4 /* Pods-blade.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
diff --git a/packages/blade/ios/blade.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/packages/blade/ios/blade.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
new file mode 100644
index 00000000000..18d981003d6
--- /dev/null
+++ b/packages/blade/ios/blade.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
diff --git a/packages/blade/ios/blade/Info.plist b/packages/blade/ios/blade/Info.plist
index c140a535ae4..e8e51d90828 100644
--- a/packages/blade/ios/blade/Info.plist
+++ b/packages/blade/ios/blade/Info.plist
@@ -39,9 +39,12 @@
 	<string/>
 	<key>UIAppFonts</key>
 	<array>
-		<string>Lato-Bold.ttf</string>
-		<string>Lato-Regular.ttf</string>
-		<string>Lato-Italic.ttf</string>
+		<string>Inter-Medium.ttf</string>
+		<string>Inter-Regular.ttf</string>
+		<string>Inter-SemiBold.ttf</string>
+		<string>TASAOrbiterDisplay-Medium.otf</string>
+		<string>TASAOrbiterDisplay-Regular.otf</string>
+		<string>TASAOrbiterDisplay-SemiBold.otf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
diff --git a/packages/blade/ios/link-assets-manifest.json b/packages/blade/ios/link-assets-manifest.json
new file mode 100644
index 00000000000..7bcd1d7345e
--- /dev/null
+++ b/packages/blade/ios/link-assets-manifest.json
@@ -0,0 +1,29 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "public/fonts/Inter-Medium.ttf",
+      "sha1": "126d31d9fbb0d742763c266a1c2ace71b106e34a"
+    },
+    {
+      "path": "public/fonts/Inter-Regular.ttf",
+      "sha1": "5c95e5d66572aeca303512ba41a8dde0cea92c80"
+    },
+    {
+      "path": "public/fonts/Inter-SemiBold.ttf",
+      "sha1": "d48310d2f04c57af1bce0851e053be7b58b25dca"
+    },
+    {
+      "path": "public/fonts/TASAOrbiterDisplay-Medium.otf",
+      "sha1": "8654f4d9102bf662bba51400d0d7b0620f0fe02b"
+    },
+    {
+      "path": "public/fonts/TASAOrbiterDisplay-Regular.otf",
+      "sha1": "d0a82c67a1c5f2885eec09d1880ce67ec8e7c477"
+    },
+    {
+      "path": "public/fonts/TASAOrbiterDisplay-SemiBold.otf",
+      "sha1": "11e3f961d67d495814c3eab7c6ce6712f2ce4da6"
+    }
+  ]
+}
diff --git a/packages/blade/package.json b/packages/blade/package.json
index 3d412c5dc3e..de9c6375d00 100644
--- a/packages/blade/package.json
+++ b/packages/blade/package.json
@@ -24,6 +24,8 @@
     "tokens.native.js",
     "utils.d.ts",
     "utils.js",
+    "fonts",
+    "fonts.css",
     "utils.native.js",
     "coverageUtils.d.ts"
   ],
@@ -35,6 +37,9 @@
     "blade"
   ],
   "exports": {
+    "./fonts.css": {
+      "default": "./fonts.css"
+    },
     "./components": {
       "react-native": {
         "types": "./components.d.ts",
@@ -82,7 +87,7 @@
     "typecheck": "run-p types:typecheck:*",
     "test": "run-p test:*",
     "prepare": "yarn build",
-    "build": "run-s build:clean build:generate-types build:react-prod build:react-dev build:react-native build:clean-declarations build:generate-root-imports build:generate-css-variables build:clean-theme-bundle",
+    "build": "run-s build:clean build:generate-types build:react-prod build:react-dev build:react-native build:clean-declarations build:generate-root-imports build:clean-theme-bundle",
     "clearCache": "jest --clearCache",
     "build:clean": "rm -rf build",
     "build:generate-types": "run-s types:generate-types:*",
@@ -99,7 +104,6 @@
     "build:react-prod": "cross-env FRAMEWORK=REACT NODE_ENV=production rollup -c",
     "build:react-native": "cross-env FRAMEWORK=REACT_NATIVE rollup -c",
     "build:clean-theme-bundle": "rm -rf build/js-bundle-for-css",
-    "build:generate-css-variables": "cross-env GENERATE_CSS_VARIABLES=true FRAMEWORK=REACT rollup -c && node ./scripts/generateCssThemeVariables.js",
     "react-native:get-stories": "sb-rn-get-stories --config-path=./.storybook/react-native && yarn prettier --write ./.storybook/react-native/storybook.requires.js",
     "react-native:storybook:android": "yarn react-native:get-stories && cross-env FRAMEWORK=REACT_NATIVE react-native run-android",
     "react-native:storybook:ios": "yarn react-native:get-stories && cross-env FRAMEWORK=REACT_NATIVE react-native run-ios",
@@ -160,6 +164,7 @@
     "@floating-ui/react-native": "0.10.0",
     "react-native-tab-view": "3.5.2",
     "react-native-pager-view": "6.2.1",
+    "@hypermod/utils": "0.4.2",
     "@react-native/metro-config": "0.72.9",
     "@react-native-async-storage/async-storage": "1.19.1",
     "@react-native-community/datetimepicker": "5.0.1",
@@ -256,6 +261,7 @@
     "postinstall-postinstall": "2.1.0",
     "react-refresh": "0.11.0",
     "react-docgen-typescript-plugin": "1.0.5",
+    "react-json-tree": "0.18.0",
     "metro-config": "0.66.2",
     "@babel/plugin-proposal-class-static-block": "7.21.0",
     "react-native-safe-area-context": "3.4.1",
@@ -334,7 +340,7 @@
       "name": "Import Button only",
       "path": "./build/lib/web/production/components/index.js",
       "import": "{ Button }",
-      "limit": "30 kb",
+      "limit": "31 kb",
       "running": false
     },
     {
diff --git a/packages/blade/public/fonts/Inter-Medium.ttf b/packages/blade/public/fonts/Inter-Medium.ttf
new file mode 100644
index 00000000000..93427308530
Binary files /dev/null and b/packages/blade/public/fonts/Inter-Medium.ttf differ
diff --git a/packages/blade/public/fonts/Inter-Regular.ttf b/packages/blade/public/fonts/Inter-Regular.ttf
new file mode 100644
index 00000000000..c544be47844
Binary files /dev/null and b/packages/blade/public/fonts/Inter-Regular.ttf differ
diff --git a/packages/blade/public/fonts/Inter-SemiBold.ttf b/packages/blade/public/fonts/Inter-SemiBold.ttf
new file mode 100644
index 00000000000..a32e2b8d219
Binary files /dev/null and b/packages/blade/public/fonts/Inter-SemiBold.ttf differ
diff --git a/packages/blade/public/fonts/Lato-Bold.ttf b/packages/blade/public/fonts/Lato-Bold.ttf
deleted file mode 100755
index b63a14d6aee..00000000000
Binary files a/packages/blade/public/fonts/Lato-Bold.ttf and /dev/null differ
diff --git a/packages/blade/public/fonts/Lato-Italic.ttf b/packages/blade/public/fonts/Lato-Italic.ttf
deleted file mode 100644
index 0d0f69ea039..00000000000
Binary files a/packages/blade/public/fonts/Lato-Italic.ttf and /dev/null differ
diff --git a/packages/blade/public/fonts/Lato-Regular.ttf b/packages/blade/public/fonts/Lato-Regular.ttf
deleted file mode 100755
index 33eba8b1923..00000000000
Binary files a/packages/blade/public/fonts/Lato-Regular.ttf and /dev/null differ
diff --git a/packages/blade/public/fonts/TASAOrbiterDisplay-Medium.otf b/packages/blade/public/fonts/TASAOrbiterDisplay-Medium.otf
new file mode 100644
index 00000000000..8235c6e4760
Binary files /dev/null and b/packages/blade/public/fonts/TASAOrbiterDisplay-Medium.otf differ
diff --git a/packages/blade/public/fonts/TASAOrbiterDisplay-Regular.otf b/packages/blade/public/fonts/TASAOrbiterDisplay-Regular.otf
new file mode 100644
index 00000000000..e70caf9a9b0
Binary files /dev/null and b/packages/blade/public/fonts/TASAOrbiterDisplay-Regular.otf differ
diff --git a/packages/blade/public/fonts/TASAOrbiterDisplay-SemiBold.otf b/packages/blade/public/fonts/TASAOrbiterDisplay-SemiBold.otf
new file mode 100644
index 00000000000..6eae2a0a59e
Binary files /dev/null and b/packages/blade/public/fonts/TASAOrbiterDisplay-SemiBold.otf differ
diff --git a/packages/blade/rollup.config.mjs b/packages/blade/rollup.config.mjs
index 020ce2ed70f..90ae580f8f2 100644
--- a/packages/blade/rollup.config.mjs
+++ b/packages/blade/rollup.config.mjs
@@ -214,6 +214,8 @@ const getDeclarationsConfig = ({ exportCategory, isNative }) => {
   ).config.compilerOptions;
   const compilerOptions = {
     ...currentTsConfig,
+    // @TODO: remove this after rebranding when all components pass typecheck
+    include: ['src'],
     moduleSuffixes: [`.${platform}`, ''],
   };
 
@@ -238,35 +240,8 @@ const getDeclarationsConfig = ({ exportCategory, isNative }) => {
   };
 };
 
-const getCSSVariablesConfig = ({ exportCategory }) => ({
-  input: `src/${exportCategory}/index.ts`,
-  output: {
-    file: `${outputRootDirectory}/js-bundle-for-css/${exportCategory}Bundle.js`,
-    format: 'cjs',
-  },
-  plugins: [
-    pluginPeerDepsExternal(),
-    pluginResolve({ extensions: webExtensions }),
-    pluginCommonjs(),
-    pluginBabel({
-      exclude: 'node_modules/**',
-      babelHelpers: 'runtime',
-      envName: 'production',
-      extensions: webExtensions,
-    }),
-    aliases,
-  ],
-});
-
 const config = () => {
   const framework = process.env.FRAMEWORK;
-  const generateCSSVariables = process.env.GENERATE_CSS_VARIABLES;
-
-  if (generateCSSVariables == 'true' && framework === 'REACT') {
-    return themeBundleCategories
-      .map((exportCategory) => [getCSSVariablesConfig({ exportCategory })])
-      .flat();
-  }
 
   const components = 'src/components/index.ts';
   const tokens = 'src/tokens/index.ts';
diff --git a/packages/blade/scripts/generateCssThemeVariables.js b/packages/blade/scripts/generateCssThemeVariables.js
deleted file mode 100644
index 5cbcbc3bbf7..00000000000
--- a/packages/blade/scripts/generateCssThemeVariables.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const { getLeaves } = require('any-leaf');
-const StyleDictionary = require('style-dictionary');
-const set = require('lodash/set');
-const cloneDeep = require('lodash/cloneDeep');
-
-const { paymentTheme, bankingTheme } = require('../build/js-bundle-for-css/tokensBundle');
-const {
-  makeBorderSize,
-  makeMotionTime,
-  makeSpace,
-  makeTypographySize,
-  makeSize,
-} = require('../build/js-bundle-for-css/utilsBundle');
-
-const getThemeFromTokens = ({ onColorMode, onDeviceType, themeTokens }) => {
-  return {
-    ...themeTokens,
-    colors: themeTokens.colors[onColorMode],
-    elevation: themeTokens.elevation[onColorMode],
-    typography: themeTokens.typography[onDeviceType],
-  };
-};
-
-const getStyledDictionaryConfig = ({ outputFileName, tokens }) => {
-  return {
-    tokens,
-    platforms: {
-      css: {
-        transformGroup: 'css',
-        buildPath: 'build/css/',
-        files: [
-          {
-            destination: `${outputFileName}.css`,
-            format: 'css/variables',
-          },
-        ],
-      },
-    },
-  };
-};
-
-const makeValue = ({ path, value }) => {
-  if (path.includes('border.radius') || path.includes('border.width')) {
-    value = makeBorderSize(value);
-  } else if (path.includes('motion.duration') || path.includes('motion.delay')) {
-    value = makeMotionTime(value);
-  } else if (path.includes('breakpoints')) {
-    value = makeSize(value);
-  } else if (path.includes('spacing')) {
-    value = makeSpace(value);
-  } else if (path.includes('fonts.size') || path.includes('lineHeights')) {
-    value = makeTypographySize(value);
-  }
-  return value;
-};
-
-const convertToStyledDictionarySchema = ({ themeTokens }) => {
-  const newTokens = cloneDeep(themeTokens);
-  const leafNodes = getLeaves(newTokens);
-
-  leafNodes.forEach(({ path, value }) => {
-    value = makeValue({ path, value });
-    set(newTokens, path, { value });
-  });
-  return newTokens;
-};
-
-const getThemeFromTokensCSSTokens = () => {
-  try {
-    const styledDictionaryPaymentTheme = convertToStyledDictionarySchema({
-      themeTokens: paymentTheme,
-    });
-    const styledDictionaryBankingTheme = convertToStyledDictionarySchema({
-      themeTokens: bankingTheme,
-    });
-
-    // Payment Light Desktop
-
-    StyleDictionary.extend(
-      getStyledDictionaryConfig({
-        outputFileName: 'paymentThemeLightDesktop',
-        tokens: getThemeFromTokens({
-          onColorMode: 'onLight',
-          onDeviceType: 'onDesktop',
-          themeTokens: styledDictionaryPaymentTheme,
-        }),
-      }),
-    ).buildAllPlatforms();
-
-    // Payment Dark Desktop
-
-    StyleDictionary.extend(
-      getStyledDictionaryConfig({
-        outputFileName: 'paymentThemeDarkDesktop',
-        tokens: getThemeFromTokens({
-          onColorMode: 'onDark',
-          onDeviceType: 'onDesktop',
-          themeTokens: styledDictionaryPaymentTheme,
-        }),
-      }),
-    ).buildAllPlatforms();
-
-    // Payment Light Mobile
-
-    StyleDictionary.extend(
-      getStyledDictionaryConfig({
-        outputFileName: 'paymentThemeLightMobile',
-        tokens: getThemeFromTokens({
-          onColorMode: 'onLight',
-          onDeviceType: 'onMobile',
-          themeTokens: styledDictionaryPaymentTheme,
-        }),
-      }),
-    ).buildAllPlatforms();
-
-    // Payment Dark Mobile
-
-    StyleDictionary.extend(
-      getStyledDictionaryConfig({
-        outputFileName: 'paymentThemeDarkMobile',
-        tokens: getThemeFromTokens({
-          onColorMode: 'onDark',
-          onDeviceType: 'onMobile',
-          themeTokens: styledDictionaryPaymentTheme,
-        }),
-      }),
-    ).buildAllPlatforms();
-
-    // Banking Light Desktop
-
-    StyleDictionary.extend(
-      getStyledDictionaryConfig({
-        outputFileName: 'bankingThemeLightDesktop',
-        tokens: getThemeFromTokens({
-          onColorMode: 'onLight',
-          onDeviceType: 'onDesktop',
-          themeTokens: styledDictionaryBankingTheme,
-        }),
-      }),
-    ).buildAllPlatforms();
-
-    // Banking Dark Desktop
-
-    StyleDictionary.extend(
-      getStyledDictionaryConfig({
-        outputFileName: 'bankingThemeDarkDesktop',
-        tokens: getThemeFromTokens({
-          onColorMode: 'onDark',
-          onDeviceType: 'onDesktop',
-          themeTokens: styledDictionaryBankingTheme,
-        }),
-      }),
-    ).buildAllPlatforms();
-
-    // Banking Light Mobile
-
-    StyleDictionary.extend(
-      getStyledDictionaryConfig({
-        outputFileName: 'bankingThemeLightMobile',
-        tokens: getThemeFromTokens({
-          onColorMode: 'onLight',
-          onDeviceType: 'onMobile',
-          themeTokens: styledDictionaryBankingTheme,
-        }),
-      }),
-    ).buildAllPlatforms();
-
-    // Banking Dark Mobile
-
-    StyleDictionary.extend(
-      getStyledDictionaryConfig({
-        outputFileName: 'bankingThemeDarkMobile',
-        tokens: getThemeFromTokens({
-          onColorMode: 'onDark',
-          onDeviceType: 'onMobile',
-          themeTokens: styledDictionaryBankingTheme,
-        }),
-      }),
-    ).buildAllPlatforms();
-  } catch (error) {
-    throw new Error(`Error while generating CSS theme variables:`, error);
-  }
-};
-
-getThemeFromTokensCSSTokens();
diff --git a/packages/blade/src/components/Accordion/Accordion.stories.tsx b/packages/blade/src/components/Accordion/Accordion.stories.tsx
index 89039e30bd2..c83df59a0f0 100644
--- a/packages/blade/src/components/Accordion/Accordion.stories.tsx
+++ b/packages/blade/src/components/Accordion/Accordion.stories.tsx
@@ -20,12 +20,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentName="Accordion"
       componentDescription="An accordion is used to allow users to toggle between different content sections in a compact vertical stack."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?type=design&node-id=16868-832623&t=rK6ydo54uVejIH9p-0',
-      }}
+      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
diff --git a/packages/blade/src/components/Accordion/AccordionButton.native.tsx b/packages/blade/src/components/Accordion/AccordionButton.native.tsx
index ae12fe94959..b924fe6b54a 100644
--- a/packages/blade/src/components/Accordion/AccordionButton.native.tsx
+++ b/packages/blade/src/components/Accordion/AccordionButton.native.tsx
@@ -6,7 +6,7 @@ import { StyledAccordionButton } from './StyledAccordionButton.native';
 import type { AccordionButtonProps } from './types';
 import { useAccordion } from './AccordionContext';
 import { getBackgroundColor, getTransitionDuration, getTransitionEasing } from './commonStyles';
-import { Heading } from '~components/Typography';
+import { Text } from '~components/Typography';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
 import { castNativeType } from '~utils';
@@ -62,9 +62,9 @@ const _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps)
   const _showNumberPrefix = typeof index === 'number' && showNumberPrefix;
 
   const _index = _showNumberPrefix ? (
-    <Heading size="small" marginRight="spacing.2">
+    <Text size="large" weight="semibold" marginRight="spacing.2">
       {index + 1}.
-    </Heading>
+    </Text>
   ) : null;
 
   const a11yLabel = _showNumberPrefix ? `${index + 1}. ${children}` : children;
@@ -72,12 +72,16 @@ const _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps)
   const renderChildren: PressableProps['children'] = ({ pressed }) => {
     isPressed.value = pressed;
 
-    const iconColor: IconProps['color'] = pressed
-      ? 'surface.action.icon.focus.lowContrast'
-      : 'surface.action.icon.default.lowContrast';
+    const iconColor: IconProps['color'] =
+      pressed || isExpanded ? 'interactive.icon.gray.subtle' : 'interactive.icon.gray.muted';
 
     const _icon = Icon && (
-      <Icon size="medium" color={iconColor} marginRight="spacing.3" marginY="spacing.2" />
+      <Icon
+        size="medium"
+        color="surface.icon.gray.muted"
+        marginRight="spacing.3"
+        marginY="spacing.2"
+      />
     );
 
     if (__DEV__) {
@@ -111,7 +115,9 @@ const _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps)
         >
           {_index}
           {_icon}
-          <Heading size="small">{children}</Heading>
+          <Text size="large" weight="semibold">
+            {children}
+          </Text>
         </BaseBox>
         <BaseBox>
           <CollapsibleChevronIcon color={iconColor} size="large" />
diff --git a/packages/blade/src/components/Accordion/AccordionButton.web.tsx b/packages/blade/src/components/Accordion/AccordionButton.web.tsx
index db6aeb466ef..4276c6c939d 100644
--- a/packages/blade/src/components/Accordion/AccordionButton.web.tsx
+++ b/packages/blade/src/components/Accordion/AccordionButton.web.tsx
@@ -4,7 +4,7 @@ import type { AccordionButtonProps } from './types';
 import { useAccordion } from './AccordionContext';
 import { BaseBox } from '~components/Box/BaseBox';
 import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
-import { Heading } from '~components/Typography';
+import { Text } from '~components/Typography';
 import { useCollapsible } from '~components/Collapsible/CollapsibleContext';
 import { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';
 import { makeAccessible } from '~utils/makeAccessible';
@@ -20,13 +20,18 @@ const _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps)
 
   const _index =
     typeof index === 'number' && showNumberPrefix ? (
-      <Heading size="small" marginRight="spacing.2" as="span">
+      <Text size="large" weight="semibold" marginRight="spacing.2" as="span">
         {index + 1}.
-      </Heading>
+      </Text>
     ) : null;
 
   const _icon = Icon && (
-    <Icon size="medium" color="currentColor" marginRight="spacing.3" marginY="spacing.2" />
+    <Icon
+      size="medium"
+      color="surface.icon.gray.muted"
+      marginRight="spacing.3"
+      marginY="spacing.2"
+    />
   );
 
   if (__DEV__) {
@@ -55,9 +60,9 @@ const _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps)
         <BaseBox display="flex" flexDirection="row" alignItems="flex-start" marginRight="spacing.4">
           {_index}
           {_icon}
-          <Heading size="small" as="span">
+          <Text size="large" weight="semibold" as="span">
             {children}
-          </Heading>
+          </Text>
         </BaseBox>
         <CollapsibleChevronIcon color="currentColor" size="large" />
       </StyledAccordionButton>
diff --git a/packages/blade/src/components/Accordion/AccordionItem.tsx b/packages/blade/src/components/Accordion/AccordionItem.tsx
index 927a046f1e5..3a7a5caffba 100644
--- a/packages/blade/src/components/Accordion/AccordionItem.tsx
+++ b/packages/blade/src/components/Accordion/AccordionItem.tsx
@@ -68,7 +68,9 @@ const AccordionItem = ({
   const isExpanded = expandedIndex === _index;
   const isDefaultExpanded = defaultExpandedIndex === _index;
 
-  const _description = description && <Text type="subtle">{description}</Text>;
+  const _description = description && (
+    <Text color="interactive.text.gray.subtle">{description}</Text>
+  );
   const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {
     if (isExpanded && typeof _index !== 'undefined') {
       onExpandChange(_index);
diff --git a/packages/blade/src/components/Accordion/StyledAccordionButton.web.tsx b/packages/blade/src/components/Accordion/StyledAccordionButton.web.tsx
index 93314d6730d..f1cdce34ccf 100644
--- a/packages/blade/src/components/Accordion/StyledAccordionButton.web.tsx
+++ b/packages/blade/src/components/Accordion/StyledAccordionButton.web.tsx
@@ -7,6 +7,7 @@ import {
   getTransitionEasing,
 } from './commonStyles';
 import { castWebType } from '~utils';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 
 const StyledAccordionButton = styled.button<StyledAccordionButtonProps>((props) => {
   const { theme, isExpanded } = props;
@@ -18,25 +19,19 @@ const StyledAccordionButton = styled.button<StyledAccordionButtonProps>((props)
     transitionDuration: castWebType(getTransitionDuration(theme)),
     transitionTimingFunction: castWebType(getTransitionEasing(theme)),
     cursor: 'pointer',
-    color: theme.colors.surface.action.icon.default.lowContrast,
+    color: theme.colors.interactive.icon.gray[isExpanded ? 'subtle' : 'muted'],
     width: '100%',
     border: 'none',
     textAlign: 'left',
 
     '&:hover, &:focus-visible': {
       backgroundColor: getBackgroundColor({ theme, isExpanded, isActive: true }),
+      color: theme.colors.interactive.icon.gray.subtle,
     },
-
-    '&:hover': {
-      color: theme.colors.surface.action.icon.hover.lowContrast,
-    },
-
     '&:focus-visible': {
-      outline: 'none',
-      boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,
+      ...getFocusRingStyles({ theme }),
       // only need border radius on the focus ring
       borderRadius: theme.border.radius.small,
-      color: theme.colors.surface.action.icon.focus.lowContrast,
     },
   };
 });
diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap
index 4d8bbccb36d..34f5cdac2e0 100644
--- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap
+++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap
@@ -168,23 +168,23 @@ exports[`<Accordion /> should render 1`] = `
                   }
                 >
                   <Text
-                    accessibilityRole="header"
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
-                    data-blade-component="heading"
+                    color="surface.text.gray.normal"
+                    data-blade-component="text"
                     fontFamily="text"
                     fontSize={200}
                     fontStyle="normal"
-                    fontWeight="bold"
-                    lineHeight={300}
+                    fontWeight="semibold"
+                    lineHeight={200}
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 16,
                           "fontStyle": "normal",
-                          "fontWeight": "700",
+                          "fontWeight": "600",
+                          "letterSpacing": 0,
                           "lineHeight": 24,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -267,7 +267,7 @@ exports[`<Accordion /> should render 1`] = `
                         <RNSVGPath
                           clipRule={0}
                           d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
-                          fill={4288851646}
+                          fill={4285959847}
                           fillRule={0}
                           propList={
                             [
@@ -343,7 +343,7 @@ exports[`<Accordion /> should render 1`] = `
                     >
                       <Text
                         accessible={true}
-                        color="surface.text.subtle.lowContrast"
+                        color="interactive.text.gray.subtle"
                         data-blade-component="text"
                         fontFamily="text"
                         fontSize={100}
@@ -353,11 +353,12 @@ exports[`<Accordion /> should render 1`] = `
                         style={
                           [
                             {
-                              "color": "hsla(216, 27%, 36%, 1)",
-                              "fontFamily": "Lato",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
                               "fontWeight": "400",
+                              "letterSpacing": 0,
                               "lineHeight": 20,
                               "marginBottom": 0,
                               "marginLeft": 0,
@@ -396,7 +397,7 @@ exports[`<Accordion /> should render 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -406,11 +407,12 @@ exports[`<Accordion /> should render 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -436,22 +438,21 @@ exports[`<Accordion /> should render 1`] = `
           </View>
         </View>
         <View
-          borderBottomColor="surface.border.normal.lowContrast"
+          borderBottomColor="surface.border.gray.muted"
           borderPosition="borderBottom"
-          borderWidth="none"
           data-blade-component="divider"
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
             [
               {
-                "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                "borderStyle": "solid",
-                "borderWidth": 0,
+                "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                "borderBottomStyle": "solid",
               },
               {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
+                "borderWidth": 0,
                 "flexGrow": 1,
               },
             ]
@@ -584,23 +585,23 @@ exports[`<Accordion /> should render 1`] = `
                   }
                 >
                   <Text
-                    accessibilityRole="header"
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
-                    data-blade-component="heading"
+                    color="surface.text.gray.normal"
+                    data-blade-component="text"
                     fontFamily="text"
                     fontSize={200}
                     fontStyle="normal"
-                    fontWeight="bold"
-                    lineHeight={300}
+                    fontWeight="semibold"
+                    lineHeight={200}
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 16,
                           "fontStyle": "normal",
-                          "fontWeight": "700",
+                          "fontWeight": "600",
+                          "letterSpacing": 0,
                           "lineHeight": 24,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -683,7 +684,7 @@ exports[`<Accordion /> should render 1`] = `
                         <RNSVGPath
                           clipRule={0}
                           d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
-                          fill={4288851646}
+                          fill={4285959847}
                           fillRule={0}
                           propList={
                             [
@@ -759,7 +760,7 @@ exports[`<Accordion /> should render 1`] = `
                     >
                       <Text
                         accessible={true}
-                        color="surface.text.subtle.lowContrast"
+                        color="interactive.text.gray.subtle"
                         data-blade-component="text"
                         fontFamily="text"
                         fontSize={100}
@@ -769,11 +770,12 @@ exports[`<Accordion /> should render 1`] = `
                         style={
                           [
                             {
-                              "color": "hsla(216, 27%, 36%, 1)",
-                              "fontFamily": "Lato",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
                               "fontWeight": "400",
+                              "letterSpacing": 0,
                               "lineHeight": 20,
                               "marginBottom": 0,
                               "marginLeft": 0,
@@ -812,7 +814,7 @@ exports[`<Accordion /> should render 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -822,11 +824,12 @@ exports[`<Accordion /> should render 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -852,22 +855,21 @@ exports[`<Accordion /> should render 1`] = `
           </View>
         </View>
         <View
-          borderBottomColor="surface.border.normal.lowContrast"
+          borderBottomColor="surface.border.gray.muted"
           borderPosition="borderBottom"
-          borderWidth="none"
           data-blade-component="divider"
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
             [
               {
-                "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                "borderStyle": "solid",
-                "borderWidth": 0,
+                "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                "borderBottomStyle": "solid",
               },
               {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
+                "borderWidth": 0,
                 "flexGrow": 1,
               },
             ]
@@ -1000,23 +1002,23 @@ exports[`<Accordion /> should render 1`] = `
                   }
                 >
                   <Text
-                    accessibilityRole="header"
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
-                    data-blade-component="heading"
+                    color="surface.text.gray.normal"
+                    data-blade-component="text"
                     fontFamily="text"
                     fontSize={200}
                     fontStyle="normal"
-                    fontWeight="bold"
-                    lineHeight={300}
+                    fontWeight="semibold"
+                    lineHeight={200}
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 16,
                           "fontStyle": "normal",
-                          "fontWeight": "700",
+                          "fontWeight": "600",
+                          "letterSpacing": 0,
                           "lineHeight": 24,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -1099,7 +1101,7 @@ exports[`<Accordion /> should render 1`] = `
                         <RNSVGPath
                           clipRule={0}
                           d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
-                          fill={4288851646}
+                          fill={4285959847}
                           fillRule={0}
                           propList={
                             [
@@ -1175,7 +1177,7 @@ exports[`<Accordion /> should render 1`] = `
                     >
                       <Text
                         accessible={true}
-                        color="surface.text.subtle.lowContrast"
+                        color="interactive.text.gray.subtle"
                         data-blade-component="text"
                         fontFamily="text"
                         fontSize={100}
@@ -1185,11 +1187,12 @@ exports[`<Accordion /> should render 1`] = `
                         style={
                           [
                             {
-                              "color": "hsla(216, 27%, 36%, 1)",
-                              "fontFamily": "Lato",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
                               "fontWeight": "400",
+                              "letterSpacing": 0,
                               "lineHeight": 20,
                               "marginBottom": 0,
                               "marginLeft": 0,
@@ -1228,7 +1231,7 @@ exports[`<Accordion /> should render 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -1238,11 +1241,12 @@ exports[`<Accordion /> should render 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -1268,22 +1272,21 @@ exports[`<Accordion /> should render 1`] = `
           </View>
         </View>
         <View
-          borderBottomColor="surface.border.normal.lowContrast"
+          borderBottomColor="surface.border.gray.muted"
           borderPosition="borderBottom"
-          borderWidth="none"
           data-blade-component="divider"
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
             [
               {
-                "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                "borderStyle": "solid",
-                "borderWidth": 0,
+                "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                "borderBottomStyle": "solid",
               },
               {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
+                "borderWidth": 0,
                 "flexGrow": 1,
               },
             ]
diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
index 3ea2044cdc3..ea2d700c18d 100644
--- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 bekHjN"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO iFUkNH" data-blade-component="heading">How can I setup Route?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 bekHjN"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO iFUkNH" data-blade-component="heading">How can I setup QR Codes?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 bekHjN"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO iFUkNH" data-blade-component="heading">How can I setup Subscriptions?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="text">Just use Razorpay.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div></div></div></div></div>"`;
+exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup Route?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup QR Codes?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup Subscriptions?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Just use Razorpay.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div></div></div>"`;
 
 exports[`<Accordion /> should render Accordion on server 2`] = `
 .c3.c3.c3.c3.c3 {
@@ -28,7 +28,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   cursor: pointer;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   width: 100%;
   border: none;
   text-align: left;
@@ -36,18 +36,20 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
 
 .c3.c3.c3.c3.c3:hover,
 .c3.c3.c3.c3.c3:focus-visible {
-  background-color: hsla(216,15%,54%,0.09);
-}
-
-.c3.c3.c3.c3.c3:hover {
-  color: hsla(217,18%,45%,1);
+  background-color: hsla(211,20%,52%,0.12);
+  color: hsla(211,26%,34%,1);
 }
 
 .c3.c3.c3.c3.c3:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   border-radius: 2px;
-  color: hsla(217,18%,45%,1);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -109,33 +111,40 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
 }
 
 .c11.c11.c11.c11.c11 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -165,6 +174,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
 }
 
 .c12.c12.c12.c12.c12 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -209,31 +219,31 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
 
 @media screen and (min-width:320px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -278,7 +288,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
                 >
                   <span
                     class="c5"
-                    data-blade-component="heading"
+                    data-blade-component="text"
                   >
                     How can I setup Route?
                   </span>
@@ -375,7 +385,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
                 >
                   <span
                     class="c5"
-                    data-blade-component="heading"
+                    data-blade-component="text"
                   >
                     How can I setup QR Codes?
                   </span>
@@ -472,7 +482,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `
                 >
                   <span
                     class="c5"
-                    data-blade-component="heading"
+                    data-blade-component="text"
                   >
                     How can I setup Subscriptions?
                   </span>
diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
index 207abf54a23..2b1dfe68eb1 100644
--- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
+++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`<Accordion /> should render 1`] = `
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   cursor: pointer;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   width: 100%;
   border: none;
   text-align: left;
@@ -34,18 +34,20 @@ exports[`<Accordion /> should render 1`] = `
 
 .c3.c3.c3.c3.c3:hover,
 .c3.c3.c3.c3.c3:focus-visible {
-  background-color: hsla(216,15%,54%,0.09);
-}
-
-.c3.c3.c3.c3.c3:hover {
-  color: hsla(217,18%,45%,1);
+  background-color: hsla(211,20%,52%,0.12);
+  color: hsla(211,26%,34%,1);
 }
 
 .c3.c3.c3.c3.c3:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   border-radius: 2px;
-  color: hsla(217,18%,45%,1);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -107,33 +109,40 @@ exports[`<Accordion /> should render 1`] = `
 }
 
 .c11.c11.c11.c11.c11 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -163,6 +172,7 @@ exports[`<Accordion /> should render 1`] = `
 }
 
 .c12.c12.c12.c12.c12 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -207,31 +217,31 @@ exports[`<Accordion /> should render 1`] = `
 
 @media screen and (min-width:320px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c11.c11.c11.c11.c11 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -274,7 +284,7 @@ exports[`<Accordion /> should render 1`] = `
                 >
                   <span
                     class="c5"
-                    data-blade-component="heading"
+                    data-blade-component="text"
                   >
                     How can I setup Route?
                   </span>
@@ -371,7 +381,7 @@ exports[`<Accordion /> should render 1`] = `
                 >
                   <span
                     class="c5"
-                    data-blade-component="heading"
+                    data-blade-component="text"
                   >
                     How can I setup QR Codes?
                   </span>
@@ -468,7 +478,7 @@ exports[`<Accordion /> should render 1`] = `
                 >
                   <span
                     class="c5"
-                    data-blade-component="heading"
+                    data-blade-component="text"
                   >
                     How can I setup Subscriptions?
                   </span>
diff --git a/packages/blade/src/components/Accordion/commonStyles.ts b/packages/blade/src/components/Accordion/commonStyles.ts
index aa8946ad2da..3c622527876 100644
--- a/packages/blade/src/components/Accordion/commonStyles.ts
+++ b/packages/blade/src/components/Accordion/commonStyles.ts
@@ -18,17 +18,14 @@ const getBackgroundColor = ({
   isExpanded: boolean;
   isActive: boolean;
 }): string => {
-  const { gray } = theme.colors.brand;
+  const { gray } = theme.colors.interactive.background;
 
   if (isActive) {
-    if (isExpanded) {
-      return gray.a100.lowContrast;
-    }
-    return gray.a50.lowContrast;
+    return gray.faded;
   }
 
   if (isExpanded) {
-    return gray.a50.lowContrast;
+    return gray.default;
   }
 
   const TRANSPARENT = 'hsla(0, 0%, 100%, 0)';
diff --git a/packages/blade/src/components/ActionList/ActionList.stories.tsx b/packages/blade/src/components/ActionList/ActionList.stories.tsx
index 54a33d5911a..f6c0ddf7097 100644
--- a/packages/blade/src/components/ActionList/ActionList.stories.tsx
+++ b/packages/blade/src/components/ActionList/ActionList.stories.tsx
@@ -50,7 +50,7 @@ const Page = (): React.ReactElement => {
 
           function App(): React.ReactElement {
               return (
-                  <Box backgroundColor="surface.background.level2.lowContrast">
+                  <Box backgroundColor="surface.background.gray.intense">
                   <ActionList>
                     <ActionListItem
                       title="Profile"
@@ -105,7 +105,7 @@ export default {
 
 const ActionListExample: StoryFn<typeof ActionListComponent> = () => (
   <BaseBox display="flex" flexDirection="column">
-    <Box backgroundColor="surface.background.level2.lowContrast">
+    <Box backgroundColor="surface.background.gray.intense">
       <ActionListComponent>
         <ActionListItem title="Item 1" value="item1" />
         <ActionListItem title="Item 2" value="item2" />
@@ -126,7 +126,7 @@ ActionList.parameters = {
 const ActionListWithLeadingComponentsExample: StoryFn<typeof ActionListComponent> = () => {
   return (
     <BaseBox display="flex" flexDirection="column">
-      <Box backgroundColor="surface.background.level2.lowContrast">
+      <Box backgroundColor="surface.background.gray.intense">
         <ActionListComponent>
           <ActionListItem
             leading={<ActionListItemIcon icon={SettingsIcon} />}
@@ -161,7 +161,7 @@ ActionListWithLeadingComponents.parameters = {
 const ActionListWithTrailingComponentsExample: StoryFn<typeof ActionListComponent> = () => {
   return (
     <BaseBox display="flex" flexDirection="column">
-      <Box backgroundColor="surface.background.level2.lowContrast">
+      <Box backgroundColor="surface.background.gray.intense">
         <ActionListComponent>
           <ActionListItem
             title="Bank Settings"
@@ -191,7 +191,7 @@ ActionListWithTrailingComponents.parameters = {
 const ActionListWithSectionsExample: StoryFn<typeof ActionListComponent> = () => {
   return (
     <BaseBox display="flex" flexDirection="column">
-      <Box backgroundColor="surface.background.level2.lowContrast">
+      <Box backgroundColor="surface.background.gray.intense">
         <ActionListComponent>
           <ActionListItem
             title="Profile"
@@ -234,7 +234,7 @@ ActionListWithSections.parameters = {
 const ActionListWithCustomItemsExample: StoryFn<typeof ActionListComponent> = () => {
   return (
     <BaseBox display="flex" flexDirection="column">
-      <Box backgroundColor="surface.background.level2.lowContrast">
+      <Box backgroundColor="surface.background.gray.intense">
         <ActionListComponent>
           <ActionListSection title="Account">
             <ActionListItem
diff --git a/packages/blade/src/components/ActionList/ActionList.tsx b/packages/blade/src/components/ActionList/ActionList.tsx
index 42a239f2283..0e0f726b949 100644
--- a/packages/blade/src/components/ActionList/ActionList.tsx
+++ b/packages/blade/src/components/ActionList/ActionList.tsx
@@ -10,41 +10,15 @@ import { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContex
 import { makeAccessible } from '~utils/makeAccessible';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import type { TestID } from '~utils/types';
-import type { SurfaceLevels } from '~tokens/theme/theme';
 import BaseBox from '~components/Box/BaseBox';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
-import { throwBladeError } from '~utils/logger';
 import { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';
 
-type ActionListContextProp = Pick<ActionListProps, 'surfaceLevel'>;
-const ActionListContext = React.createContext<ActionListContextProp>({ surfaceLevel: 2 });
-const useActionListContext = (): ActionListContextProp => {
-  const context = React.useContext(ActionListContext);
-
-  if (__DEV__) {
-    if (!context) {
-      throwBladeError({
-        message: 'useActionListContext has to be called inside ActionListContext.Provider',
-        moduleName: 'ActionList',
-      });
-    }
-  }
-  return context;
-};
-
 type ActionListProps = {
   children: React.ReactNode[];
-  /**
-   * Decides the backgroundColor of ActionList
-   */
-  surfaceLevel?: Exclude<SurfaceLevels, 1>;
 } & TestID;
 
-const _ActionList = ({
-  children,
-  surfaceLevel = 2,
-  testID,
-}: ActionListProps): React.ReactElement => {
+const _ActionList = ({ children, testID }: ActionListProps): React.ReactElement => {
   const {
     setOptions,
     actionListItemRef,
@@ -66,7 +40,6 @@ const _ActionList = ({
     setOptions(actionListOptions);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actionListOptions]);
-  const actionListContextValue = React.useMemo(() => ({ surfaceLevel }), [surfaceLevel]);
 
   if (
     filteredValues.length <= 0 &&
@@ -87,38 +60,34 @@ const _ActionList = ({
   // 1. We don't render the box wrapper styles which includes shadows, padding, border etc
   // 2. to ensure GorhomBottomSheetSectionList works as expected, if we add extra wrappers GorhomBottomSheet won't render the content inside
   // NOTE: That this also means inside BottomSheet, ActionList won't render any ActionListHeader or Footer.
-  return (
-    <ActionListContext.Provider value={actionListContextValue}>
-      {isInBottomSheet ? (
-        <ActionListBox
-          isInBottomSheet={isInBottomSheet}
-          actionListItemWrapperRole={actionListItemWrapperRole}
-          childrenWithId={childrenWithId}
-          sectionData={sectionData}
-          isMultiSelectable={isMultiSelectable}
-          ref={actionListItemRef as any}
-        />
-      ) : (
-        <BaseBox
-          id={`${dropdownBaseId}-actionlist`}
-          {...makeAccessible({
-            role: actionListContainerRole,
-            multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,
-            labelledBy: `${dropdownBaseId}-label`,
-          })}
-          {...metaAttribute({ name: MetaConstants.ActionList, testID })}
-        >
-          <ActionListBox
-            isInBottomSheet={isInBottomSheet}
-            actionListItemWrapperRole={actionListItemWrapperRole}
-            childrenWithId={childrenWithId}
-            sectionData={sectionData}
-            isMultiSelectable={isMultiSelectable}
-            ref={actionListItemRef as any}
-          />
-        </BaseBox>
-      )}
-    </ActionListContext.Provider>
+  return isInBottomSheet ? (
+    <ActionListBox
+      isInBottomSheet={isInBottomSheet}
+      actionListItemWrapperRole={actionListItemWrapperRole}
+      childrenWithId={childrenWithId}
+      sectionData={sectionData}
+      isMultiSelectable={isMultiSelectable}
+      ref={actionListItemRef as any}
+    />
+  ) : (
+    <BaseBox
+      id={`${dropdownBaseId}-actionlist`}
+      {...makeAccessible({
+        role: actionListContainerRole,
+        multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,
+        labelledBy: `${dropdownBaseId}-label`,
+      })}
+      {...metaAttribute({ name: MetaConstants.ActionList, testID })}
+    >
+      <ActionListBox
+        isInBottomSheet={isInBottomSheet}
+        actionListItemWrapperRole={actionListItemWrapperRole}
+        childrenWithId={childrenWithId}
+        sectionData={sectionData}
+        isMultiSelectable={isMultiSelectable}
+        ref={actionListItemRef as any}
+      />
+    </BaseBox>
   );
 };
 
@@ -159,4 +128,4 @@ const ActionList = assignWithoutSideEffects(React.memo(_ActionList), {
 });
 
 export type { ActionListProps };
-export { ActionList, useActionListContext };
+export { ActionList };
diff --git a/packages/blade/src/components/ActionList/ActionListBox.native.tsx b/packages/blade/src/components/ActionList/ActionListBox.native.tsx
index 64ccaff8706..89dfd26a464 100644
--- a/packages/blade/src/components/ActionList/ActionListBox.native.tsx
+++ b/packages/blade/src/components/ActionList/ActionListBox.native.tsx
@@ -10,6 +10,7 @@ import { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContex
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { makeAccessible } from '~utils/makeAccessible';
 import { Divider } from '~components/Divider';
+import { makeSize } from '~utils';
 
 type ActionListBoxProps = {
   childrenWithId?: React.ReactNode[] | null;
@@ -49,7 +50,7 @@ const _ActionListBox = React.forwardRef<SectionList, ActionListBoxProps>(
         isInBottomSheet={Boolean(isInBottomSheet)}
         // Setting footerHeight as bottom margin for ActionListBox
         // otherwise the footer hides few list items under it, this will offset it
-        marginBottom={footerHeight}
+        marginBottom={makeSize(footerHeight)}
         sections={sectionData}
         windowSize={5}
         keyExtractor={(item: any) => {
diff --git a/packages/blade/src/components/ActionList/ActionListItem.tsx b/packages/blade/src/components/ActionList/ActionListItem.tsx
index be6b9e28cfd..9ea1128091f 100644
--- a/packages/blade/src/components/ActionList/ActionListItem.tsx
+++ b/packages/blade/src/components/ActionList/ActionListItem.tsx
@@ -6,12 +6,11 @@ import { componentIds } from './componentIds';
 import type { StyledActionListItemProps } from './styles/getBaseActionListItemStyles';
 import { validateActionListItemProps, getNormalTextColor } from './actionListUtils';
 import { getActionListItemRole, getActionListSectionRole, isRoleMenu } from './getA11yRoles';
-import { useActionListContext } from './ActionList';
 import { Divider } from '~components/Divider';
 import BaseBox from '~components/Box/BaseBox';
 import type { IconComponent } from '~components/Icons';
 import { useDropdown } from '~components/Dropdown/useDropdown';
-import type { Feedback } from '~tokens/theme/theme';
+import type { FeedbackColors } from '~tokens/theme/theme';
 import { Text } from '~components/Typography';
 import { isReactNative } from '~utils';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
@@ -67,7 +66,7 @@ type ActionListItemProps = {
    */
   titleSuffix?: React.ReactElement;
   isDisabled?: boolean;
-  intent?: Extract<Feedback, 'negative'>;
+  intent?: Extract<FeedbackColors, 'negative'>;
   /**
    * Can be used in combination of `onClick` to highlight item as selected in Button Triggers.
    *
@@ -117,7 +116,6 @@ const _ActionListSection = ({
   _hideDivider,
   _sectionChildValues,
 }: ActionListSectionProps): React.ReactElement => {
-  const { surfaceLevel } = useActionListContext();
   const { hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, filteredValues } = useDropdown();
   const hasAutoComplete =
     hasAutoCompleteInBottomSheetHeader ||
@@ -146,13 +144,12 @@ const _ActionListSection = ({
         role: getActionListSectionRole(),
         label: title,
       })}
-      backgroundColor={`surface.background.level${surfaceLevel}.lowContrast`}
       {...metaAttribute({ name: MetaConstants.ActionListSection, testID })}
     >
       {/* We're announcing title as group label so we can hide this */}
       {isSectionVisible ? (
         <StyledActionListSectionTitle {...makeAccessible({ hidden: true })}>
-          <Text color="surface.text.muted.lowContrast" size="small" weight="bold">
+          <Text color="surface.text.gray.muted" size="small" weight="semibold">
             {title}
           </Text>
         </StyledActionListSectionTitle>
@@ -180,12 +177,13 @@ const ActionListSection = assignWithoutSideEffects(_ActionListSection, {
 const _ActionListItemIcon = ({ icon }: { icon: IconComponent }): React.ReactElement => {
   const Icon = icon;
   const { intent, isDisabled } = React.useContext(ActionListItemContext);
+  const iconState = isDisabled ? 'disabled' : 'muted';
   return (
     <Icon
       color={
         intent === 'negative'
-          ? 'feedback.icon.negative.lowContrast'
-          : getNormalTextColor(isDisabled, { isMuted: true })
+          ? 'feedback.icon.negative.intense'
+          : `interactive.icon.gray.${iconState}`
       }
       size="medium"
     />
@@ -313,7 +311,7 @@ const _ActionListItemBody = ({
             truncateAfterLines={1}
             color={
               intent === 'negative'
-                ? 'feedback.text.negative.lowContrast'
+                ? 'feedback.text.negative.intense'
                 : getNormalTextColor(isDisabled)
             }
           >
diff --git a/packages/blade/src/components/ActionList/ActionListNoResults.tsx b/packages/blade/src/components/ActionList/ActionListNoResults.tsx
index 40e273de6bb..565ebf4e7ab 100644
--- a/packages/blade/src/components/ActionList/ActionListNoResults.tsx
+++ b/packages/blade/src/components/ActionList/ActionListNoResults.tsx
@@ -11,11 +11,11 @@ const ActionListNoResults = (): React.ReactElement => {
       justifyContent="center"
       padding="spacing.5"
     >
-      <SearchIcon size="xlarge" color="surface.text.normal.lowContrast" />
-      <Text marginTop="spacing.5" weight="bold">
+      <SearchIcon size="xlarge" color="surface.icon.gray.muted" />
+      <Text marginTop="spacing.5" weight="semibold">
         No Search Result Found
       </Text>
-      <Text marginTop="spacing.3" size="small" type="subtle">
+      <Text color="surface.text.gray.subtle" marginTop="spacing.3" size="small">
         Try searching for a different value
       </Text>
     </Box>
diff --git a/packages/blade/src/components/ActionList/actionListUtils.ts b/packages/blade/src/components/ActionList/actionListUtils.ts
index 0ab264643d6..be447cb64aa 100644
--- a/packages/blade/src/components/ActionList/actionListUtils.ts
+++ b/packages/blade/src/components/ActionList/actionListUtils.ts
@@ -233,19 +233,17 @@ const getNormalTextColor = (
   { isMuted }: { isMuted?: boolean } = {},
 ): Extract<
   BaseTextProps['color'],
-  | 'surface.text.placeholder.lowContrast'
-  | 'surface.text.muted.lowContrast'
-  | 'surface.text.normal.lowContrast'
+  'interactive.text.gray.disabled' | 'interactive.text.gray.muted' | 'interactive.text.gray.normal'
 > => {
   if (isDisabled) {
-    return 'surface.text.placeholder.lowContrast';
+    return 'interactive.text.gray.disabled';
   }
 
   if (isMuted) {
-    return 'surface.text.muted.lowContrast';
+    return 'interactive.text.gray.muted';
   }
 
-  return 'surface.text.normal.lowContrast';
+  return 'interactive.text.gray.normal';
 };
 
 export { getActionListProperties, validateActionListItemProps, getNormalTextColor };
diff --git a/packages/blade/src/components/ActionList/docs/ActionListDocs.tsx b/packages/blade/src/components/ActionList/docs/ActionListDocs.tsx
index 060ce0428a6..29046bb14bf 100644
--- a/packages/blade/src/components/ActionList/docs/ActionListDocs.tsx
+++ b/packages/blade/src/components/ActionList/docs/ActionListDocs.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ActionList, ActionListItem, ActionListSection, Playground } from './stories';
 import { actionListPropsTables } from './propsTable';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
-import { Code, Text, Title } from '~components/Typography';
+import { Code, Text, Heading } from '~components/Typography';
 import { Sandbox, VerticalSandbox } from '~utils/storybook/Sandbox/SandpackEditor';
 import { Box } from '~components/Box';
 import BaseBox from '~components/Box/BaseBox';
@@ -18,28 +18,23 @@ const ActionListDocs = (): React.ReactElement => {
       showStorybookControls={false}
       imports=""
       note="ActionList is meant to be used only inside the Dropdown component. Things will not work as expected if you are using this without Dropdown"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=30043-576428',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=15113-508481',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=30043-576428"
     >
       <Box as="section">
-        <Title size="medium">Playground</Title>
+        <Heading size="xlarge">Playground</Heading>
         <Sandbox editorHeight={400}>{Playground}</Sandbox>
       </Box>
       <Box as="section" paddingBottom="spacing.9">
-        <Title size="medium">ActionList</Title>
+        <Heading size="xlarge">ActionList</Heading>
         <VerticalSandbox code={ActionList} />
         <ArgsTable data={actionListPropsTables.ActionList} />
       </Box>
       <BaseBox as="section" paddingBottom="spacing.9" id="actionlistitem">
-        <Title size="medium">ActionListItem</Title>
+        <Heading size="large">ActionListItem</Heading>
         <VerticalSandbox code={ActionListItem} />
         <ArgsTable data={actionListPropsTables.ActionListItem} />
         <BaseBox id="actionlistitemicon">
-          <Title size="small">ActionListItemIcon</Title>
+          <Heading size="large">ActionListItemIcon</Heading>
           <ArgsTable
             data={{
               icon: <Code>IconComponent</Code>,
@@ -47,15 +42,15 @@ const ActionListDocs = (): React.ReactElement => {
           />
         </BaseBox>
         <BaseBox id="actionlistitemtext">
-          <Title size="small">ActionListItemText</Title>
+          <Heading size="large">ActionListItemText</Heading>
           <ArgsTable data={{ children: 'string' }} />
         </BaseBox>
         <BaseBox id="actionlistitemasset">
-          <Title size="small">ActionListItemAsset</Title>
+          <Heading size="large">ActionListItemAsset</Heading>
           <ArgsTable data={{ href: 'string', alt: 'string' }} />
         </BaseBox>
         <BaseBox id="actionlistitembadgegroup">
-          <Title size="small">ActionListItemBadgeGroup</Title>
+          <Heading size="large">ActionListItemBadgeGroup</Heading>
           <ArgsTable
             data={{
               children: (
@@ -65,7 +60,7 @@ const ActionListDocs = (): React.ReactElement => {
           />
         </BaseBox>
         <BaseBox id="actionlistitembadge">
-          <Title size="small">ActionListItemBadge</Title>
+          <Heading size="large">ActionListItemBadge</Heading>
           <Text marginTop="spacing.3">
             Shares same props as <Link href="/?path=/docs/components-badge--badge">Badge</Link>
           </Text>
@@ -79,7 +74,7 @@ const ActionListDocs = (): React.ReactElement => {
         </BaseBox>
       </BaseBox>
       <BaseBox as="section" id="actionlistsection">
-        <Title size="medium">ActionListSection</Title>
+        <Heading size="xlarge">ActionListSection</Heading>
         <VerticalSandbox minHeight="250px" code={ActionListSection} />
         <ArgsTable data={actionListPropsTables.ActionListSection} />
       </BaseBox>
diff --git a/packages/blade/src/components/ActionList/docs/propsTable.tsx b/packages/blade/src/components/ActionList/docs/propsTable.tsx
index ec8717e1360..903810fb716 100644
--- a/packages/blade/src/components/ActionList/docs/propsTable.tsx
+++ b/packages/blade/src/components/ActionList/docs/propsTable.tsx
@@ -13,7 +13,6 @@ const actionListPropsTables: {
   ActionListSection: PropsTableType<ActionListSectionProps>;
 } = {
   ActionList: {
-    surfaceLevel: '2 | 3',
     children: (
       <>
         <ScrollLink href="#actionlistitem">&lt;ActionListItem[] /&gt;</ScrollLink> |{' '}
diff --git a/packages/blade/src/components/ActionList/styles/StyledActionListItem.native.tsx b/packages/blade/src/components/ActionList/styles/StyledActionListItem.native.tsx
index 459155c3c8a..63472cbfc43 100644
--- a/packages/blade/src/components/ActionList/styles/StyledActionListItem.native.tsx
+++ b/packages/blade/src/components/ActionList/styles/StyledActionListItem.native.tsx
@@ -10,7 +10,7 @@ const StyledActionListItem = styled(TouchableOpacity)<StyledActionListItemProps>
     // React Native specific styles
     backgroundColor:
       props.isSelected && props.selectionType === 'single'
-        ? props.theme.colors.brand.primary[300]
+        ? props.theme.colors.interactive.background.primary.faded
         : undefined,
   };
 });
diff --git a/packages/blade/src/components/ActionList/styles/StyledActionListItem.web.tsx b/packages/blade/src/components/ActionList/styles/StyledActionListItem.web.tsx
index 86f4ba7ba00..4e3c3cd23f8 100644
--- a/packages/blade/src/components/ActionList/styles/StyledActionListItem.web.tsx
+++ b/packages/blade/src/components/ActionList/styles/StyledActionListItem.web.tsx
@@ -12,15 +12,22 @@ const StyledActionListItem = styled(BaseBox)<StyledActionListItemProps>((props)
     '&:hover:not([aria-disabled=true])': {
       backgroundColor:
         props.intent === 'negative'
-          ? props.theme.colors.feedback.background.negative.lowContrast
-          : props.theme.colors.brand.gray.a50.lowContrast,
+          ? props.theme.colors.interactive.background.negative.faded
+          : props.theme.colors.interactive.background.gray.default,
     },
     '&.active-focus': {
-      borderColor: props.isKeydownPressed ? props.theme.colors.brand.primary[300] : undefined,
+      borderColor: props.isKeydownPressed
+        ? props.theme.colors.surface.border.primary.muted
+        : undefined,
     },
     '&[aria-selected=true]': {
       backgroundColor:
-        props.selectionType === 'single' ? props.theme.colors.brand.primary[300] : undefined,
+        props.selectionType === 'single'
+          ? props.theme.colors.interactive.background.primary.faded
+          : undefined,
+    },
+    '&[aria-selected=true]:hover': {
+      backgroundColor: props.theme.colors.interactive.background.primary.fadedHighlighted,
     },
   };
 });
diff --git a/packages/blade/src/components/ActionList/styles/getBaseActionListStyles.ts b/packages/blade/src/components/ActionList/styles/getBaseActionListStyles.ts
index 62009af1e07..705156fe510 100644
--- a/packages/blade/src/components/ActionList/styles/getBaseActionListStyles.ts
+++ b/packages/blade/src/components/ActionList/styles/getBaseActionListStyles.ts
@@ -1,24 +1,19 @@
 import type { CSSObject } from 'styled-components';
-import type { ActionListProps } from '../ActionList';
 import type { Theme } from '~components/BladeProvider';
 import { makeSize } from '~utils/makeSize';
 import { castWebType, isReactNative } from '~utils';
 
 type StyledActionListProps = {
-  surfaceLevel: ActionListProps['surfaceLevel'];
   id?: string;
   isInBottomSheet?: boolean;
 };
 
 const getBaseActionListStyles = (props: StyledActionListProps & { theme: Theme }): CSSObject => {
-  const { theme, surfaceLevel = 2, isInBottomSheet } = props;
-
-  const backgroundColor = theme.colors.surface.background[`level${surfaceLevel}`].lowContrast;
+  const { theme, isInBottomSheet } = props;
 
   return {
-    backgroundColor,
     borderWidth: isInBottomSheet ? undefined : theme.border.width.thin,
-    borderColor: theme.colors.surface.border.normal.lowContrast,
+    borderColor: theme.colors.surface.border.gray.normal,
     borderStyle: isInBottomSheet ? undefined : 'solid',
     borderRadius: makeSize(theme.border.radius.medium),
     boxShadow:
diff --git a/packages/blade/src/components/Alert/Alert.stories.tsx b/packages/blade/src/components/Alert/Alert.stories.tsx
index dee298e99f4..8a2ec1690ea 100644
--- a/packages/blade/src/components/Alert/Alert.stories.tsx
+++ b/packages/blade/src/components/Alert/Alert.stories.tsx
@@ -1,7 +1,6 @@
 import type { StoryFn, Meta } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
 import type { ReactElement } from 'react';
-
 import type { AlertProps } from './Alert';
 import { Alert as AlertComponent } from './Alert';
 import BaseBox from '~components/Box/BaseBox';
@@ -14,12 +13,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentName="Alert"
       componentDescription="Alerts are messages that communicate information to users about any significant changes or explanations inside the system in a prominent way."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=6922%3A17789',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=11098%3A286031',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=6922%3A17789"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
@@ -65,8 +59,8 @@ const meta: Meta<AlertProps> = {
       'Currently you can only accept payments in international currencies using PayPal. You cannot accept payments in INR (₹) using PayPal.',
     isFullWidth: false,
     isDismissible: true,
-    contrast: 'low',
-    intent: 'information',
+    emphasis: 'subtle',
+    color: 'information',
     actions: {
       primary: {
         text: 'Primary Action',
@@ -102,15 +96,15 @@ const AlertTemplate: StoryFn<typeof AlertComponent> = ({ ...args }) => {
 
 export const Default = AlertTemplate.bind({});
 
-export const HighContrast = AlertTemplate.bind({});
-HighContrast.args = {
-  contrast: 'high',
-  intent: 'notice',
+export const HighEmphasis = AlertTemplate.bind({});
+HighEmphasis.args = {
+  emphasis: 'intense',
+  color: 'notice',
 };
-HighContrast.parameters = {
+HighEmphasis.parameters = {
   docs: {
     description: {
-      story: 'A high contrast Alert for more prominent look',
+      story: 'A high emphasis Alert for more prominent look',
     },
   },
 };
@@ -143,7 +137,7 @@ export const DescriptionOnly = AlertTemplate.bind({});
 DescriptionOnly.args = {
   description:
     'The payment was made 6 months ago, therefore you can’t issue refund to this merchant.',
-  intent: 'notice',
+  color: 'notice',
   actions: undefined,
   title: undefined,
 };
@@ -159,7 +153,7 @@ export const PrimaryActionOnly = AlertTemplate.bind({});
 PrimaryActionOnly.args = {
   description:
     'There was some internal error while fetching the merchants list, this might also be due to the poor internet connection.',
-  intent: 'negative',
+  color: 'negative',
   actions: {
     primary: {
       text: 'Try Refetching',
@@ -189,7 +183,7 @@ export const FullWidth: StoryFn<typeof AlertComponent> = ({ ...args }) => {
 };
 FullWidth.args = {
   description: 'Currently you can only accept payments in international currencies using PayPal.',
-  intent: 'notice',
+  color: 'notice',
   actions: undefined,
   title: undefined,
   isFullWidth: true,
@@ -214,7 +208,7 @@ export const FullWidthWithActions: StoryFn<typeof AlertComponent> = ({ ...args }
 };
 FullWidthWithActions.args = {
   description: 'Currently you can only accept payments in international currencies using PayPal.',
-  intent: 'negative',
+  color: 'negative',
   isFullWidth: true,
 };
 FullWidthWithActions.parameters = {
diff --git a/packages/blade/src/components/Alert/Alert.tsx b/packages/blade/src/components/Alert/Alert.tsx
index 35ecd90fa72..11be0553aaa 100644
--- a/packages/blade/src/components/Alert/Alert.tsx
+++ b/packages/blade/src/components/Alert/Alert.tsx
@@ -15,16 +15,13 @@ import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { IconButton } from '~components/Button/IconButton';
 import BaseBox from '~components/Box/BaseBox';
-import { Heading, Text } from '~components/Typography';
+import { Text } from '~components/Typography';
 import BaseButton from '~components/Button/BaseButton';
 import { BaseLink } from '~components/Link/BaseLink';
-import type { ColorContrastTypes, Feedback } from '~tokens/theme/theme';
+import type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';
 import { useTheme } from '~components/BladeProvider';
 import type { DotNotationSpacingStringToken, TestID } from '~utils/types';
 import { makeAccessible } from '~utils/makeAccessible';
-import { throwBladeError } from '~utils/logger';
-
-type Nullable<Type> = Type | null;
 
 type PrimaryAction = {
   text: string;
@@ -73,11 +70,11 @@ type AlertProps = {
   onDismiss?: () => void;
 
   /**
-   * Can be set to `high` for a more prominent look. Not to be confused with a11y contrast.
+   * Can be set to `high` for a more prominent look. Not to be confused with a11y emphasis.
    *
-   * @default low
+   * @default subtle
    */
-  contrast?: ColorContrastTypes;
+  emphasis?: SubtleOrIntense;
 
   /**
    * Makes the Alert span the entire container width, instead of the default max width of `584px`.
@@ -87,18 +84,10 @@ type AlertProps = {
    */
   isFullWidth?: boolean;
 
-  /**
-   * This prop is deprecated in favor of the `color` prop.
-   *
-   * @deprecated Use `color` instead
-   * @default neutral
-   */
-  intent?: Feedback;
-
   /**
    * Sets the color tone
    */
-  color?: Feedback;
+  color?: FeedbackColors;
 
   /**
    * Renders a primary action button and a secondary action link button
@@ -107,8 +96,7 @@ type AlertProps = {
     /**
      * Renders a button (should **always** be present if `secondary` action is being used)
      */
-    primary: PrimaryAction;
-
+    primary?: PrimaryAction;
     /**
      * Renders a Link button
      */
@@ -135,35 +123,21 @@ const Alert = ({
   title,
   isDismissible = true,
   onDismiss,
-  contrast = 'low',
+  emphasis = 'subtle',
   isFullWidth = false,
-  // TODO: Remove intent prop in favor of color in the next major release
-  intent = 'neutral',
-  color,
+  color = 'neutral',
   actions,
   testID,
   ...styledProps
 }: AlertProps): ReactElement | null => {
-  if (__DEV__) {
-    if (!actions?.primary && actions?.secondary) {
-      throwBladeError({
-        message: 'SecondaryAction is allowed only when PrimaryAction is defined.',
-        moduleName: 'Alert',
-      });
-    }
-  }
   const { theme } = useTheme();
   const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });
+  const [isVisible, setIsVisible] = useState(true);
+
   const isDesktop = matchedDeviceType === 'desktop';
   const isMobile = !isDesktop;
 
-  const [isVisible, setIsVisible] = useState(true);
-  const contrastType = `${contrast}Contrast` as const;
-  const iconSize = isFullWidth ? 'large' : 'medium';
-  const textSize = isFullWidth ? 'medium' : 'small';
-  const alertColor = color ?? intent;
-
-  const Icon = intentIconMap[alertColor];
+  const Icon = intentIconMap[color];
   let iconOffset: DotNotationSpacingStringToken = 'spacing.1';
 
   // certain special cases below needs special care for near perfect alignment
@@ -182,32 +156,40 @@ const Alert = ({
       iconOffset = 'spacing.2';
     }
   } else if (isFullWidth) {
-    iconOffset = 'spacing.0';
+    iconOffset = 'spacing.1';
   }
 
+  const shouldCenterAlign = isFullWidth && !title;
+  let alignment: 'center' | 'flex-start' = 'flex-start';
+  if (!isFullWidth) alignment = 'flex-start';
+  if (shouldCenterAlign) alignment = 'center';
+
   const icon = (
-    <BaseBox marginTop={iconOffset} display="flex">
-      <Icon color={`feedback.icon.${alertColor}.${contrastType}`} size={iconSize} />
+    <BaseBox display="flex" alignSelf={alignment} marginTop={iconOffset}>
+      <Icon
+        color={
+          emphasis === 'intense'
+            ? 'surface.icon.staticWhite.normal'
+            : `feedback.icon.${color}.${emphasis === 'subtle' ? 'intense' : 'subtle'}`
+        }
+        size="medium"
+      />
     </BaseBox>
   );
 
+  const textColor =
+    emphasis === 'intense' ? 'surface.text.staticWhite.normal' : 'surface.text.gray.subtle';
   const _title = title ? (
     <BaseBox marginBottom="spacing.2">
-      {isFullWidth ? (
-        <Heading type="subtle" size="small" contrast={contrast}>
-          {title}
-        </Heading>
-      ) : (
-        <Text type="subtle" weight="bold" contrast={contrast}>
-          {title}
-        </Text>
-      )}
+      <Text color={textColor} size="medium" weight="semibold">
+        {title}
+      </Text>
     </BaseBox>
   ) : null;
 
   const _description = (
     <BaseBox marginTop={title || isReactNative ? 'spacing.0' : 'spacing.1'}>
-      <Text type="subtle" size={textSize} contrast={contrast}>
+      <Text color={textColor} size="small">
         {description}
       </Text>
     </BaseBox>
@@ -219,17 +201,17 @@ const Alert = ({
       display={isReactNative ? castNativeType('flex') : castWebType('inline-flex')}
     >
       <BaseButton
-        size={textSize}
+        size="small"
         onClick={actions.primary.onClick}
-        color={alertColor}
-        variant={contrast === 'high' ? 'primary' : 'secondary'}
+        color={emphasis === 'intense' ? 'white' : color}
+        variant="secondary"
       >
         {actions.primary.text}
       </BaseButton>
     </BaseBox>
   ) : null;
 
-  const secondaryActionParams: Nullable<Partial<SecondaryActionLinkButton>> = actions?.secondary
+  const secondaryActionParams: Partial<SecondaryActionLinkButton> | null = actions?.secondary
     ? {
         onClick: actions.secondary.onClick,
       }
@@ -246,14 +228,12 @@ const Alert = ({
     secondaryActionParams.target = actions.secondary.target;
     secondaryActionParams.rel = actions.secondary.rel;
   }
+
   const secondaryAction = actions?.secondary ? (
-    <BaseBox
-      marginRight="spacing.4"
-      display={isReactNative ? castNativeType('flex') : castWebType('inline-flex')}
-    >
+    <BaseBox marginRight="spacing.4" display={(isReactNative ? 'flex' : 'inline-flex') as never}>
       <BaseLink
-        size={textSize}
-        color={contrast === 'high' ? 'white' : alertColor}
+        size="small"
+        color={emphasis === 'intense' ? 'white' : color}
         {...secondaryActionParams}
       >
         {actions.secondary.text}
@@ -291,8 +271,8 @@ const Alert = ({
       <IconButton
         accessibilityLabel="Dismiss alert"
         onClick={onClickDismiss}
-        contrast={contrast}
-        size={iconSize}
+        emphasis={emphasis === 'intense' ? 'subtle' : 'intense'}
+        size="large"
         icon={CloseIcon}
       />
     </CloseButtonWrapper>
@@ -300,10 +280,9 @@ const Alert = ({
 
   const a11yProps = makeAccessible({
     // React Native doesn't has status as role
-    role:
-      isReactNative || alertColor === 'negative' || alertColor === 'notice' ? 'alert' : 'status',
+    role: isReactNative || color === 'negative' || color === 'notice' ? 'alert' : 'status',
     // override the implicit live region of role `alert`
-    ...(alertColor === 'notice' && { liveRegion: 'polite' }),
+    ...(color === 'notice' && { liveRegion: 'polite' }),
   });
 
   if (!isVisible) {
@@ -317,8 +296,8 @@ const Alert = ({
       {...getStyledProps(styledProps)}
     >
       <StyledAlert
-        color={alertColor}
-        contrastType={contrastType}
+        color={color}
+        emphasis={emphasis}
         isFullWidth={isFullWidth}
         isDesktop={isDesktop}
         textAlign={'left' as never}
diff --git a/packages/blade/src/components/Alert/__tests__/Alert.native.test.tsx b/packages/blade/src/components/Alert/__tests__/Alert.native.test.tsx
index b0625670bae..0fed0828a44 100644
--- a/packages/blade/src/components/Alert/__tests__/Alert.native.test.tsx
+++ b/packages/blade/src/components/Alert/__tests__/Alert.native.test.tsx
@@ -11,11 +11,11 @@ describe('<Alert />', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render positive intent and full width', () => {
+  it('should render positive color and full width', () => {
     const { toJSON } = renderWithTheme(
       <Alert
         description="Currently you can only accept payments in international currencies using PayPal."
-        intent="positive"
+        color="positive"
         isFullWidth
       />,
     );
@@ -60,7 +60,7 @@ describe('<Alert />', () => {
     const { getByLabelText, getByRole, queryByRole } = renderWithTheme(
       <Alert
         description="Currently you can only accept payments in international currencies using PayPal."
-        intent="notice"
+        color="notice"
       />,
     );
     const closeButton = getByLabelText('Dismiss alert');
@@ -86,7 +86,7 @@ describe('<Alert />', () => {
     const { getByRole } = renderWithTheme(
       <Alert
         description="Currently you can only accept payments in international currencies using PayPal."
-        intent="negative"
+        color="negative"
       />,
     );
     const alert = getByRole('alert');
@@ -94,21 +94,6 @@ describe('<Alert />', () => {
     expect(alert).toBeTruthy();
   });
 
-  it('should throw an error if secondary action is defined without primary action', () => {
-    const onClickSecondary = jest.fn();
-    expect(() =>
-      renderWithTheme(
-        <Alert
-          description="Currently you can only accept payments in international currencies using PayPal."
-          // @ts-expect-error testing failure case when there is no primary action passed
-          actions={{
-            secondary: { text: 'Link', onClick: onClickSecondary },
-          }}
-        />,
-      ),
-    ).toThrow(`[Blade: Alert]: SecondaryAction is allowed only when PrimaryAction is defined.`);
-  });
-
   it('should accept testID', () => {
     const { getByTestId } = renderWithTheme(<Alert description="Test" testID="alert-test" />);
 
diff --git a/packages/blade/src/components/Alert/__tests__/Alert.ssr.test.tsx b/packages/blade/src/components/Alert/__tests__/Alert.ssr.test.tsx
index 1f26ca6bccd..848ffe1c5a8 100644
--- a/packages/blade/src/components/Alert/__tests__/Alert.ssr.test.tsx
+++ b/packages/blade/src/components/Alert/__tests__/Alert.ssr.test.tsx
@@ -7,7 +7,7 @@ describe('<Alert />', () => {
     const { container } = renderWithSSR(
       <Alert
         description="Currently you can only accept payments in international currencies using PayPal."
-        intent="positive"
+        color="positive"
         actions={{
           primary: { text: 'Primary', onClick: () => {} },
           secondary: { text: 'Link', onClick: () => {} },
diff --git a/packages/blade/src/components/Alert/__tests__/Alert.web.test.tsx b/packages/blade/src/components/Alert/__tests__/Alert.web.test.tsx
index da6e2356c67..874b2df9181 100644
--- a/packages/blade/src/components/Alert/__tests__/Alert.web.test.tsx
+++ b/packages/blade/src/components/Alert/__tests__/Alert.web.test.tsx
@@ -13,11 +13,11 @@ describe('<Alert />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should render positive intent and full width', () => {
+  it('should render positive color and full width', () => {
     const { container } = renderWithTheme(
       <Alert
         description="Currently you can only accept payments in international currencies using PayPal."
-        intent="positive"
+        color="positive"
         isFullWidth
       />,
     );
@@ -64,7 +64,7 @@ describe('<Alert />', () => {
     const { getByLabelText, getByRole, queryByRole } = renderWithTheme(
       <Alert
         description="Currently you can only accept payments in international currencies using PayPal."
-        intent="notice"
+        color="notice"
       />,
     );
     const closeButton = getByLabelText('Dismiss alert');
@@ -84,7 +84,7 @@ describe('<Alert />', () => {
     const { getByRole } = renderWithTheme(
       <Alert
         description="Currently you can only accept payments in international currencies using PayPal."
-        intent="notice"
+        color="notice"
       />,
     );
     const alert = getByRole('alert');
@@ -96,7 +96,7 @@ describe('<Alert />', () => {
     const { getByRole } = renderWithTheme(
       <Alert
         description="Currently you can only accept payments in international currencies using PayPal."
-        intent="positive"
+        color="positive"
       />,
     );
     const alert = getByRole('status');
@@ -104,23 +104,6 @@ describe('<Alert />', () => {
     await assertAccessible(alert);
   });
 
-  it('should throw an error if secondary action is defined without primary action', () => {
-    const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
-    const onClickSecondary = jest.fn();
-    expect(() =>
-      renderWithTheme(
-        <Alert
-          description="Currently you can only accept payments in international currencies using PayPal."
-          // @ts-expect-error testing failure case when there is no primary action passed
-          actions={{
-            secondary: { text: 'Link', onClick: onClickSecondary },
-          }}
-        />,
-      ),
-    ).toThrow(`[Blade: Alert]: SecondaryAction is allowed only when PrimaryAction is defined.`);
-    mockConsoleError.mockRestore();
-  });
-
   it('should accept testID', () => {
     const { getByTestId } = renderWithTheme(<Alert description="Test" testID="alert-test" />);
 
diff --git a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap
index 50a11fa3a2a..d5d15c39c94 100644
--- a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap
+++ b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap
@@ -20,8 +20,8 @@ exports[`<Alert /> should render 1`] = `
   >
     <View
       color="neutral"
-      contrastType="lowContrast"
       data-blade-component="base-box"
+      emphasis="subtle"
       isDesktop={false}
       isFullWidth={false}
       style={
@@ -31,30 +31,29 @@ exports[`<Alert /> should render 1`] = `
           },
           {
             "alignItems": "flex-start",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-            "borderColor": "hsla(216, 15%, 54%, 0.32)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 4,
-            "borderStyle": "solid",
-            "borderWidth": 1,
             "boxSizing": "border-box",
             "display": "flex",
             "flexDirection": "row",
             "maxWidth": 584,
             "paddingBottom": 12,
-            "paddingLeft": 8,
-            "paddingRight": 8,
-            "paddingTop": 8,
+            "paddingLeft": 12,
+            "paddingRight": 12,
+            "paddingTop": 12,
           },
         ]
       }
       textAlign="left"
     >
       <View
+        alignSelf="flex-start"
         data-blade-component="base-box"
         display="flex"
         style={
           [
             {
+              "alignSelf": "flex-start",
               "display": "flex",
               "marginTop": 0,
             },
@@ -104,7 +103,7 @@ exports[`<Alert /> should render 1`] = `
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4282603381}
+              fill={4280563015}
               propList={
                 [
                   "fill",
@@ -113,7 +112,7 @@ exports[`<Alert /> should render 1`] = `
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4282603381}
+              fill={4280563015}
               propList={
                 [
                   "fill",
@@ -123,7 +122,7 @@ exports[`<Alert /> should render 1`] = `
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4282603381}
+              fill={4280563015}
               fillRule={0}
               propList={
                 [
@@ -161,22 +160,23 @@ exports[`<Alert /> should render 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subtle.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(216, 27%, 36%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -224,7 +224,7 @@ exports[`<Alert /> should render 1`] = `
           }
           accessible={true}
           collapsable={false}
-          contrast="low"
+          emphasis="intense"
           focusable={true}
           onBlur={[Function]}
           onClick={[Function]}
@@ -246,12 +246,12 @@ exports[`<Alert /> should render 1`] = `
           <RNSVGSvgView
             accessibilityElementsHidden={true}
             align="xMidYMid"
-            bbHeight="16px"
-            bbWidth="16px"
+            bbHeight="20px"
+            bbWidth="20px"
             data-blade-component="icon"
             fill="none"
             focusable={false}
-            height="16px"
+            height="20px"
             importantForAccessibility="no-hide-descendants"
             meetOrSlice={0}
             minX={0}
@@ -267,14 +267,14 @@ exports[`<Alert /> should render 1`] = `
                 ],
                 {
                   "flex": 0,
-                  "height": 16,
-                  "width": 16,
+                  "height": 20,
+                  "width": 20,
                 },
               ]
             }
             vbHeight={24}
             vbWidth={24}
-            width="16px"
+            width="20px"
           >
             <RNSVGGroup
               fill={null}
@@ -286,7 +286,7 @@ exports[`<Alert /> should render 1`] = `
             >
               <RNSVGPath
                 d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                fill={4288851646}
+                fill={4285959847}
                 propList={
                   [
                     "fill",
@@ -322,8 +322,8 @@ exports[`<Alert /> should render positive color and full width 1`] = `
   >
     <View
       color="positive"
-      contrastType="lowContrast"
       data-blade-component="base-box"
+      emphasis="subtle"
       isDesktop={false}
       isFullWidth={true}
       style={
@@ -333,18 +333,15 @@ exports[`<Alert /> should render positive color and full width 1`] = `
           },
           {
             "alignItems": "flex-start",
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-            "borderColor": "hsla(155, 100%, 31%, 0.32)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
             "borderRadius": 0,
-            "borderStyle": "solid",
-            "borderWidth": 0,
             "boxSizing": "border-box",
             "display": "flex",
             "flexDirection": "row",
             "maxWidth": "auto",
             "paddingBottom": 12,
-            "paddingLeft": 16,
-            "paddingRight": 16,
+            "paddingLeft": 12,
+            "paddingRight": 12,
             "paddingTop": 12,
             "width": "100%",
           },
@@ -353,11 +350,13 @@ exports[`<Alert /> should render positive color and full width 1`] = `
       textAlign="left"
     >
       <View
+        alignSelf="center"
         data-blade-component="base-box"
         display="flex"
         style={
           [
             {
+              "alignSelf": "center",
               "display": "flex",
               "marginTop": 2,
             },
@@ -367,12 +366,12 @@ exports[`<Alert /> should render positive color and full width 1`] = `
         <RNSVGSvgView
           accessibilityElementsHidden={true}
           align="xMidYMid"
-          bbHeight="20px"
-          bbWidth="20px"
+          bbHeight="16px"
+          bbWidth="16px"
           data-blade-component="icon"
           fill="none"
           focusable={false}
-          height="20px"
+          height="16px"
           importantForAccessibility="no-hide-descendants"
           meetOrSlice={0}
           minX={0}
@@ -388,14 +387,14 @@ exports[`<Alert /> should render positive color and full width 1`] = `
               ],
               {
                 "flex": 0,
-                "height": 20,
-                "width": 20,
+                "height": 16,
+                "width": 16,
               },
             ]
           }
           vbHeight={24}
           vbWidth={24}
-          width="20px"
+          width="16px"
         >
           <RNSVGGroup
             fill={null}
@@ -410,7 +409,7 @@ exports[`<Alert /> should render positive color and full width 1`] = `
             >
               <RNSVGPath
                 d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z"
-                fill={4278224216}
+                fill={4278225477}
                 propList={
                   [
                     "fill",
@@ -419,7 +418,7 @@ exports[`<Alert /> should render positive color and full width 1`] = `
               />
               <RNSVGPath
                 d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z"
-                fill={4278224216}
+                fill={4278225477}
                 propList={
                   [
                     "fill",
@@ -474,22 +473,23 @@ exports[`<Alert /> should render positive color and full width 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subtle.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
-            fontSize={100}
+            fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={100}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(216, 27%, 36%, 1)",
-                  "fontFamily": "Lato",
-                  "fontSize": 14,
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 20,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -537,7 +537,7 @@ exports[`<Alert /> should render positive color and full width 1`] = `
           }
           accessible={true}
           collapsable={false}
-          contrast="low"
+          emphasis="intense"
           focusable={true}
           onBlur={[Function]}
           onClick={[Function]}
@@ -599,7 +599,7 @@ exports[`<Alert /> should render positive color and full width 1`] = `
             >
               <RNSVGPath
                 d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                fill={4288851646}
+                fill={4285959847}
                 propList={
                   [
                     "fill",
@@ -615,7 +615,7 @@ exports[`<Alert /> should render positive color and full width 1`] = `
 </View>
 `;
 
-exports[`<Alert /> should render positive intent and full width 1`] = `
+exports[`<Alert /> should render positive color and full width 2`] = `
 <View
   style={
     {
@@ -635,8 +635,8 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
   >
     <View
       color="positive"
-      contrastType="lowContrast"
       data-blade-component="base-box"
+      emphasis="subtle"
       isDesktop={false}
       isFullWidth={true}
       style={
@@ -646,18 +646,15 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
           },
           {
             "alignItems": "flex-start",
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-            "borderColor": "hsla(155, 100%, 31%, 0.32)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
             "borderRadius": 0,
-            "borderStyle": "solid",
-            "borderWidth": 0,
             "boxSizing": "border-box",
             "display": "flex",
             "flexDirection": "row",
             "maxWidth": "auto",
             "paddingBottom": 12,
-            "paddingLeft": 16,
-            "paddingRight": 16,
+            "paddingLeft": 12,
+            "paddingRight": 12,
             "paddingTop": 12,
             "width": "100%",
           },
@@ -666,11 +663,13 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
       textAlign="left"
     >
       <View
+        alignSelf="center"
         data-blade-component="base-box"
         display="flex"
         style={
           [
             {
+              "alignSelf": "center",
               "display": "flex",
               "marginTop": 2,
             },
@@ -680,12 +679,12 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
         <RNSVGSvgView
           accessibilityElementsHidden={true}
           align="xMidYMid"
-          bbHeight="20px"
-          bbWidth="20px"
+          bbHeight="16px"
+          bbWidth="16px"
           data-blade-component="icon"
           fill="none"
           focusable={false}
-          height="20px"
+          height="16px"
           importantForAccessibility="no-hide-descendants"
           meetOrSlice={0}
           minX={0}
@@ -701,14 +700,14 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
               ],
               {
                 "flex": 0,
-                "height": 20,
-                "width": 20,
+                "height": 16,
+                "width": 16,
               },
             ]
           }
           vbHeight={24}
           vbWidth={24}
-          width="20px"
+          width="16px"
         >
           <RNSVGGroup
             fill={null}
@@ -723,7 +722,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
             >
               <RNSVGPath
                 d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z"
-                fill={4278224216}
+                fill={4278225477}
                 propList={
                   [
                     "fill",
@@ -732,7 +731,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
               />
               <RNSVGPath
                 d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z"
-                fill={4278224216}
+                fill={4278225477}
                 propList={
                   [
                     "fill",
@@ -787,22 +786,23 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subtle.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
-            fontSize={100}
+            fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={100}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(216, 27%, 36%, 1)",
-                  "fontFamily": "Lato",
-                  "fontSize": 14,
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
+                  "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 20,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -850,7 +850,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
           }
           accessible={true}
           collapsable={false}
-          contrast="low"
+          emphasis="intense"
           focusable={true}
           onBlur={[Function]}
           onClick={[Function]}
@@ -912,7 +912,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
             >
               <RNSVGPath
                 d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                fill={4288851646}
+                fill={4285959847}
                 propList={
                   [
                     "fill",
diff --git a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.ssr.test.tsx.snap b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.ssr.test.tsx.snap
index afdff605b4b..8f4c80bd62b 100644
--- a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Alert /> should render Alert on server 1`] = `"<div id="root"><div role="status" data-blade-component="alert" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledAlert-sc-1dcpe4h-0 edNXIx fvZuAv"><div data-blade-component="base-box" class="BaseBox-bmPWx dFcqBl"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><g clip-path="url(#clip0_60_208)" data-blade-component="svg-g"><path d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z" fill="hsla(160, 100%, 26%, 1)" data-blade-component="svg-path"></path><path d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z" fill="hsla(160, 100%, 26%, 1)" data-blade-component="svg-path"></path></g><defs data-blade-component="svg-defs"><clipPath id="clip0_60_208" data-blade-component="svg-clippath"><rect data-blade-component="svg-rect" height="24" width="24" fill="white"></rect></clipPath></defs></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx csAaGy"><div data-blade-component="base-box" class="BaseBox-bmPWx kipYPx"><p class="StyledBaseText-dVBfTO hwHLce" data-blade-component="text">Currently you can only accept payments in international currencies using PayPal.</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx ghjKxw"><div data-blade-component="base-box" class="BaseBox-bmPWx hggoXP"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 cfGYvN"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div class="StyledBaseText-dVBfTO ctPzMx" data-blade-component="base-text">Primary</div></div></button></div><div data-blade-component="base-box" class="BaseBox-bmPWx cplkfv"><a data-blade-component="link" class="StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 csnivf" role="link" aria-disabled="false"><span class="BaseBox-bmPWx fAEwZa content-container" data-blade-component="base-box"><span class="StyledBaseText-dVBfTO ctPzMx" data-blade-component="base-text">Link</span></span></a></div></div></div><button type="button" aria-label="Dismiss alert" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 dOswfI"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div>"`;
+exports[`<Alert /> should render Alert on server 1`] = `"<div id="root"><div role="status" data-blade-component="alert" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledAlert-sc-1dcpe4h-0 edNXIx tUExz"><div data-blade-component="base-box" class="BaseBox-bmPWx bqifXC"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><g clip-path="url(#clip0_60_208)" data-blade-component="svg-g"><path d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z" fill="hsla(150, 100%, 27%, 1)" data-blade-component="svg-path"></path><path d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z" fill="hsla(150, 100%, 27%, 1)" data-blade-component="svg-path"></path></g><defs data-blade-component="svg-defs"><clipPath id="clip0_60_208" data-blade-component="svg-clippath"><rect data-blade-component="svg-rect" height="24" width="24" fill="white"></rect></clipPath></defs></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx csAaGy"><div data-blade-component="base-box" class="BaseBox-bmPWx kipYPx"><p class="StyledBaseText-dVBfTO bLchiZ" data-blade-component="text">Currently you can only accept payments in international currencies using PayPal.</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx ghjKxw"><div data-blade-component="base-box" class="BaseBox-bmPWx hggoXP"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctwkUZ"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO SzFCk" data-blade-component="base-text">Primary</div></div></button></div><div data-blade-component="base-box" class="BaseBox-bmPWx cplkfv"><a data-blade-component="link" class="StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 eEDbkf" role="link" aria-disabled="false"><span class="BaseBox-bmPWx fAEwZa content-container" data-blade-component="base-box"><span class="StyledBaseText-dVBfTO bMehCe" data-blade-component="base-text">Link</span></span></a></div></div></div><button type="button" aria-label="Dismiss alert" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jCUyST"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div>"`;
 
 exports[`<Alert /> should render Alert on server 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -12,6 +12,9 @@ exports[`<Alert /> should render Alert on server 2`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   margin-top: 2px;
 }
 
@@ -65,6 +68,7 @@ exports[`<Alert /> should render Alert on server 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c12.c12.c12.c12.c12 {
@@ -90,12 +94,9 @@ exports[`<Alert /> should render Alert on server 2`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background: hsla(155,100%,31%,0.09);
-  padding: 8px 8px 12px 8px;
+  background: hsla(150,100%,32%,0.09);
+  padding: 12px;
   border-radius: 4px;
-  border-color: hsla(155,100%,31%,0.32);
-  border-width: 1px;
-  border-style: solid;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -111,7 +112,7 @@ exports[`<Alert /> should render Alert on server 2`] = `
   box-sizing: border-box;
 }
 
-.c15.c15.c15.c15.c15 {
+.c16.c16.c16.c16.c16 {
   border: none;
   cursor: pointer;
   padding: 0;
@@ -129,7 +130,7 @@ exports[`<Alert /> should render Alert on server 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -138,42 +139,74 @@ exports[`<Alert /> should render Alert on server 2`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c15.c15.c15.c15.c15:hover {
-  color: hsla(217,18%,45%,1);
+.c16.c16.c16.c16.c16:hover {
+  color: hsla(211,26%,34%,1);
 }
 
-.c15.c15.c15.c15.c15:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+.c16.c16.c16.c16.c16:focus-visible {
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
-.c15.c15.c15.c15.c15:active {
-  color: hsla(217,18%,45%,1);
+.c16.c16.c16.c16.c16:active {
+  color: hsla(211,26%,34%,1);
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.c15.c15.c15.c15.c15 {
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -183,10 +216,10 @@ exports[`<Alert /> should render Alert on server 2`] = `
   min-height: 32px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -202,6 +235,7 @@ exports[`<Alert /> should render Alert on server 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -216,25 +250,25 @@ exports[`<Alert /> should render Alert on server 2`] = `
 }
 
 .c8.c8.c8.c8.c8:hover {
-  background-color: hsla(155,100%,31%,0.18);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(150,100%,32%,0.18);
+  border-color: hsla(150,100%,32%,1);
 }
 
 .c8.c8.c8.c8.c8:active {
-  background-color: hsla(155,100%,31%,0.32);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(150,100%,32%,0.18);
+  border-color: hsla(150,100%,32%,1);
 }
 
 .c8.c8.c8.c8.c8:focus-visible {
-  background-color: hsla(155,100%,31%,0.32);
-  border-color: hsla(155,100%,31%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(150,100%,32%,0.18);
+  border-color: hsla(150,100%,32%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c8.c8.c8.c8.c8 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -271,7 +305,7 @@ exports[`<Alert /> should render Alert on server 2`] = `
 }
 
 .c13.c13.c13.c13.c13:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c13.c13.c13.c13.c13 * {
@@ -315,12 +349,12 @@ exports[`<Alert /> should render Alert on server 2`] = `
             <path
               d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z"
               data-blade-component="svg-path"
-              fill="hsla(160, 100%, 26%, 1)"
+              fill="hsla(150, 100%, 27%, 1)"
             />
             <path
               d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z"
               data-blade-component="svg-path"
-              fill="hsla(160, 100%, 26%, 1)"
+              fill="hsla(150, 100%, 27%, 1)"
             />
           </g>
           <defs
@@ -397,7 +431,7 @@ exports[`<Alert /> should render Alert on server 2`] = `
                 data-blade-component="base-box"
               >
                 <span
-                  class="c11"
+                  class="c15"
                   data-blade-component="base-text"
                 >
                   Link
@@ -409,7 +443,7 @@ exports[`<Alert /> should render Alert on server 2`] = `
       </div>
       <button
         aria-label="Dismiss alert"
-        class="c15"
+        class="c16"
         data-blade-component="icon-button"
         type="button"
       >
@@ -418,9 +452,9 @@ exports[`<Alert /> should render Alert on server 2`] = `
           class="Svgweb__StyledSvg-vcmjs8-0"
           data-blade-component="icon"
           fill="none"
-          height="16px"
+          height="20px"
           viewBox="0 0 24 24"
-          width="16px"
+          width="20px"
         >
           <path
             d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
diff --git a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.web.test.tsx.snap b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.web.test.tsx.snap
index 488db070945..f6fd62f32fd 100644
--- a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.web.test.tsx.snap
+++ b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.web.test.tsx.snap
@@ -10,6 +10,9 @@ exports[`<Alert /> should render 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   margin-top: 2px;
 }
 
@@ -26,12 +29,9 @@ exports[`<Alert /> should render 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background: hsla(216,15%,54%,0.09);
-  padding: 8px 8px 12px 8px;
+  background: hsla(211,20%,52%,0.09);
+  padding: 12px;
   border-radius: 4px;
-  border-color: hsla(216,15%,54%,0.32);
-  border-width: 1px;
-  border-style: solid;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -65,7 +65,7 @@ exports[`<Alert /> should render 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -75,28 +75,38 @@ exports[`<Alert /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c6.c6.c6.c6.c6:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -127,18 +137,18 @@ exports[`<Alert /> should render 1`] = `
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(216, 27%, 36%, 1)"
+            fill="hsla(211, 33%, 21%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(216, 27%, 36%, 1)"
+            fill="hsla(211, 33%, 21%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(216, 27%, 36%, 1)"
+            fill="hsla(211, 33%, 21%, 1)"
             fill-rule="evenodd"
           />
         </svg>
@@ -170,9 +180,9 @@ exports[`<Alert /> should render 1`] = `
           class="Svgweb__StyledSvg-vcmjs8-0"
           data-blade-component="icon"
           fill="none"
-          height="16px"
+          height="20px"
           viewBox="0 0 24 24"
-          width="16px"
+          width="20px"
         >
           <path
             d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
@@ -196,7 +206,10 @@ exports[`<Alert /> should render positive color and full width 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  margin-top: 0px;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  margin-top: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
@@ -212,12 +225,9 @@ exports[`<Alert /> should render positive color and full width 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background: hsla(155,100%,31%,0.09);
-  padding: 12px 16px;
+  background: hsla(150,100%,32%,0.09);
+  padding: 12px;
   border-radius: 0px;
-  border-color: hsla(155,100%,31%,0.32);
-  border-width: 0px;
-  border-style: solid;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -252,7 +262,7 @@ exports[`<Alert /> should render positive color and full width 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -262,28 +272,38 @@ exports[`<Alert /> should render positive color and full width 1`] = `
 }
 
 .c6.c6.c6.c6.c6:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c6.c6.c6.c6.c6:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.25rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -307,9 +327,9 @@ exports[`<Alert /> should render positive color and full width 1`] = `
           class="Svgweb__StyledSvg-vcmjs8-0"
           data-blade-component="icon"
           fill="none"
-          height="20px"
+          height="16px"
           viewBox="0 0 24 24"
-          width="20px"
+          width="16px"
         >
           <g
             clip-path="url(#clip0_60_208)"
@@ -318,12 +338,12 @@ exports[`<Alert /> should render positive color and full width 1`] = `
             <path
               d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z"
               data-blade-component="svg-path"
-              fill="hsla(160, 100%, 26%, 1)"
+              fill="hsla(150, 100%, 27%, 1)"
             />
             <path
               d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z"
               data-blade-component="svg-path"
-              fill="hsla(160, 100%, 26%, 1)"
+              fill="hsla(150, 100%, 27%, 1)"
             />
           </g>
           <defs
@@ -386,7 +406,7 @@ exports[`<Alert /> should render positive color and full width 1`] = `
 </div>
 `;
 
-exports[`<Alert /> should render positive intent and full width 1`] = `
+exports[`<Alert /> should render positive color and full width 2`] = `
 .c0.c0.c0.c0.c0 {
   text-align: left;
 }
@@ -396,7 +416,10 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  margin-top: 0px;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  margin-top: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
@@ -412,12 +435,9 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background: hsla(155,100%,31%,0.09);
-  padding: 12px 16px;
+  background: hsla(150,100%,32%,0.09);
+  padding: 12px;
   border-radius: 0px;
-  border-color: hsla(155,100%,31%,0.32);
-  border-width: 0px;
-  border-style: solid;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -452,7 +472,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -462,28 +482,38 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
 }
 
 .c6.c6.c6.c6.c6:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c6.c6.c6.c6.c6:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.25rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -507,9 +537,9 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
           class="Svgweb__StyledSvg-vcmjs8-0"
           data-blade-component="icon"
           fill="none"
-          height="20px"
+          height="16px"
           viewBox="0 0 24 24"
-          width="20px"
+          width="16px"
         >
           <g
             clip-path="url(#clip0_60_208)"
@@ -518,12 +548,12 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
             <path
               d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z"
               data-blade-component="svg-path"
-              fill="hsla(160, 100%, 26%, 1)"
+              fill="hsla(150, 100%, 27%, 1)"
             />
             <path
               d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z"
               data-blade-component="svg-path"
-              fill="hsla(160, 100%, 26%, 1)"
+              fill="hsla(150, 100%, 27%, 1)"
             />
           </g>
           <defs
diff --git a/packages/blade/src/components/Alert/styles.ts b/packages/blade/src/components/Alert/styles.ts
index 6b8a0b12866..f8e755b25eb 100644
--- a/packages/blade/src/components/Alert/styles.ts
+++ b/packages/blade/src/components/Alert/styles.ts
@@ -9,23 +9,14 @@ import { size } from '~tokens/global';
 const MAX_WIDTH = size[584];
 
 export const getCommonStyles = (props: StyledProps<StyledAlertProps>): CSSObject => {
-  const { theme, contrastType, color, isFullWidth, isDesktop } = props;
-
-  const feedbackColors = theme.colors.feedback;
+  const { theme, emphasis, color, isFullWidth, isDesktop } = props;
 
   return {
-    background: feedbackColors.background[color][contrastType],
-    padding: isFullWidth
-      ? `${makeSpace(theme.spacing[4])} ${makeSpace(theme.spacing[5])}`
-      : `${makeSpace(theme.spacing[3])} ${makeSpace(theme.spacing[3])} ${makeSpace(
-          theme.spacing[4],
-        )} ${makeSpace(theme.spacing[3])}`,
+    background: theme.colors.feedback.background[color][emphasis],
+    padding: makeSpace(theme.spacing[4]),
     borderRadius: makeBorderSize(
       isFullWidth ? theme.border.radius.none : theme.border.radius.medium,
     ),
-    borderColor: feedbackColors.border[color][contrastType],
-    borderWidth: makeBorderSize(isFullWidth ? theme.border.width.none : theme.border.width.thin),
-    borderStyle: 'solid',
     display: 'flex',
     flexDirection: 'row',
     maxWidth: isFullWidth ? 'auto' : makeSize(MAX_WIDTH),
diff --git a/packages/blade/src/components/Alert/types.ts b/packages/blade/src/components/Alert/types.ts
index 87ef05318b8..186ca850585 100644
--- a/packages/blade/src/components/Alert/types.ts
+++ b/packages/blade/src/components/Alert/types.ts
@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react';
 
-import type { ColorContrast, Feedback } from '~tokens/theme/theme';
+import type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 
 export type StyledAlertProps = {
   children: ReactNode;
-  contrastType: keyof ColorContrast;
-  color: Feedback;
+  emphasis: SubtleOrIntense;
+  color: FeedbackColors;
   isFullWidth: boolean;
   isDesktop: boolean;
 } & StyledPropsBlade;
diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx
index a18c402ec45..e74dae5a3e2 100644
--- a/packages/blade/src/components/Amount/Amount.stories.tsx
+++ b/packages/blade/src/components/Amount/Amount.stories.tsx
@@ -2,22 +2,20 @@ import type { StoryFn, Meta } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
 import type { AmountProps } from './Amount';
 import { Amount as AmountComponent } from './Amount';
-import { currencyPrefixMapping } from './amountTokens';
+import type { AmountHeadingProps, AmountDisplayProps, AmountBodyProps } from './amountTokens';
+import { currencyIndicatorMapping } from './amountTokens';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 import BaseBox from '~components/Box/BaseBox';
 import { Sandbox } from '~utils/storybook/Sandbox';
-import { Text } from '~components/Typography';
+import { Display, Text } from '~components/Typography';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
+import { Box } from '~components/Box';
+import { objectKeysWithType } from '~utils/objectKeysWithType';
 
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=28012%3A580578&t=WfWp7qiwZ3lvvbdw-0',
-        bankingTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=28012%3A580578&t=WfWp7qiwZ3lvvbdw-0',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=28012%3A580578&t=WfWp7qiwZ3lvvbdw-0"
       componentName="Amount"
       componentDescription="Amounts are used to show small amount of color coded metadata, which are ideal for getting user attention."
       note="This component only displays the provided value in the specified currency, it does not perform any currency conversion."
@@ -72,40 +70,47 @@ const AmountTemplateWithText: StoryFn<typeof AmountComponent> = (args) => {
 export const AmountWithText = AmountTemplateWithText.bind({});
 
 AmountWithText.args = {
-  value: 12500.45,
-  size: 'body-medium',
+  value: 1000.0,
+  type: 'body',
+  size: 'medium',
 };
 AmountWithText.storyName = 'With Text';
 
-const AmountSizesTemplate: StoryFn<typeof AmountComponent> = ({ ...args }) => {
-  const sizes: AmountProps['size'][] = [
-    'body-small',
-    'body-small-bold',
-    'body-medium',
-    'body-medium-bold',
-    'heading-small',
-    'heading-small-bold',
-    'heading-large',
-    'heading-large-bold',
-    'title-small',
-    'title-medium',
-  ];
+const AmountSizesTemplate: StoryFn<typeof AmountComponent> = (args) => {
+  const sizes: {
+    heading: AmountHeadingProps['size'][];
+    body: AmountBodyProps['size'][];
+    display: AmountDisplayProps['size'][];
+  } = {
+    body: ['xsmall', 'small', 'medium', 'large'],
+    heading: ['small', 'medium', 'large', 'xlarge', '2xlarge'],
+    display: ['small', 'medium', 'large', 'xlarge'],
+  };
+
   return (
-    <BaseBox justifyContent="center">
-      {sizes.map((size) => (
-        <BaseBox key={size} marginBottom="spacing.3">
-          <Text>{size}</Text>
-          <BaseBox marginBottom="spacing.1" />
-          <AmountComponent {...args} size={size} />
-        </BaseBox>
+    <Box justifyContent="center">
+      {objectKeysWithType(sizes).map((amountTypeProp) => (
+        <Box key={amountTypeProp}>
+          <Display size="small" marginTop="spacing.8" marginBottom="spacing.4">
+            Type {amountTypeProp}
+          </Display>
+          {sizes[amountTypeProp].map((size) => (
+            <Box key={size} marginBottom="spacing.4">
+              <Text>{size}</Text>
+              <BaseBox marginBottom="spacing.1" />
+              {/* @ts-expect-error */}
+              <AmountComponent {...args} type={amountTypeProp} size={size} />
+            </Box>
+          ))}
+        </Box>
       ))}
-    </BaseBox>
+    </Box>
   );
 };
 
 const defaultArgs: AmountProps = {
   value: 123456.789,
-  size: 'title-medium',
+  size: 'medium',
 };
 
 export const AmountSizes: StoryFn<typeof AmountComponent> = AmountSizesTemplate.bind({});
@@ -115,21 +120,21 @@ AmountSizes.args = {
 AmountSizes.storyName = 'Sizes';
 
 const AmountTemplate: StoryFn<typeof AmountComponent> = (args) => {
-  const intents = ['positive', 'negative', 'notice', 'information'] as const;
+  const colors = ['positive', 'negative', 'notice', 'information'] as const;
 
   return (
     <BaseBox justifyContent="flex-start">
-      {intents.map((intent) => (
+      {colors.map((color) => (
         <BaseBox
           display="flex"
-          key={intent}
+          key={color}
           alignItems="baseline"
           paddingRight="spacing.3"
           paddingTop="spacing.3"
           flexDirection="column"
         >
-          <Text marginBottom="spacing.1">{intent}</Text>
-          <AmountComponent {...args} intent={intent} />
+          <Text marginBottom="spacing.1">{color}</Text>
+          <AmountComponent {...args} color={`feedback.text.${color}.intense`} />
         </BaseBox>
       ))}
     </BaseBox>
@@ -171,7 +176,7 @@ HumanizeSuffix.args = {
 HumanizeSuffix.storyName = 'Humanize Suffix';
 
 const AmountCurrencyTemplate: StoryFn<typeof AmountComponent> = (args) => {
-  const values = Object.keys(currencyPrefixMapping);
+  const values = Object.keys(currencyIndicatorMapping);
 
   return (
     <BaseBox justifyContent="flex-start" maxHeight="300px" overflowY="auto">
@@ -205,3 +210,10 @@ AffixSubtleOff.args = {
   isAffixSubtle: false,
 };
 AffixSubtleOff.storyName = 'Affix Subtle Off';
+
+export const StrikeThrough = AmountDefaultTemplate.bind({});
+StrikeThrough.args = {
+  ...defaultArgs,
+  isStrikethrough: true,
+};
+StrikeThrough.storyName = 'Strike Through';
diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx
index 7cbcc8d81b3..ca628bf3492 100644
--- a/packages/blade/src/components/Amount/Amount.tsx
+++ b/packages/blade/src/components/Amount/Amount.tsx
@@ -1,15 +1,14 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-import type { Currency } from './amountTokens';
+import type { AmountTypeProps, Currency } from './amountTokens';
 import {
-  amountFontSizes,
+  normalAmountSizes,
   getCurrencyAbbreviations,
-  currencyPrefixMapping,
-  affixFontSizes,
+  currencyIndicatorMapping,
+  subtleFontSizes,
   amountLineHeights,
+  currencyPositionMapping,
 } from './amountTokens';
-import { BaseText } from '~components/Typography/BaseText';
-import type { Feedback } from '~tokens/theme/theme';
 import type { BaseTextProps } from '~components/Typography/BaseText/types';
 import BaseBox from '~components/Box/BaseBox';
 import type { TestID } from '~utils/types';
@@ -19,36 +18,24 @@ import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { throwBladeError } from '~utils/logger';
+import { objectKeysWithType } from '~utils/objectKeysWithType';
+import { BaseText } from '~components/Typography/BaseText';
+import { Text } from '~components/Typography';
+import { opacity } from '~tokens/global';
+import type { FontFamily } from '~tokens/global';
 
-type AmountProps = {
+type AmountCommonProps = {
   /**
    * The value to be rendered within the component.
    *
    */
   value: number;
   /**
-   * Sets the intent of the amount.
+   * Sets the color of the amount.
    *
    * @default undefined
    */
-  intent?: Exclude<Feedback, 'neutral'>;
-  /**
-   * Sets the size of the amount.
-   *
-   * @default 'body-medium'
-   */
-  size?:
-    | 'body-medium-bold'
-    | 'body-small'
-    | 'body-small-bold'
-    | 'body-medium'
-    | 'body-medium-bold'
-    | 'heading-small'
-    | 'heading-small-bold'
-    | 'heading-large'
-    | 'heading-large-bold'
-    | 'title-small'
-    | 'title-medium';
+  color?: BaseTextProps['color'];
   /**
    * Indicates what the suffix of amount should be
    *
@@ -56,17 +43,17 @@ type AmountProps = {
    */
   suffix?: 'decimals' | 'none' | 'humanize';
   /**
-   * Makes the prefix symbol and decimal digits small and faded
+   * Makes the currency indicator(currency symbol/code) and decimal digits small and faded
    *
    * @default true
    */
   isAffixSubtle?: true | false;
   /**
-   * Prefix to be shown before the amount value. The prefix can be either a currency symbol or a currency code.
+   * Determines the visual representation of the currency, choose between displaying the currency symbol or code.
    *
    * @default 'currency-symbol'
    */
-  prefix?: 'currency-symbol' | 'currency-code';
+  currencyIndicator?: 'currency-symbol' | 'currency-code';
   /**
    * The currency of the amount.  Note that this component
    * only displays the provided value in the specified currency, it does not perform any currency conversion.
@@ -74,27 +61,31 @@ type AmountProps = {
    * @default 'INR'
    * */
   currency?: Currency;
+  /**
+   * If true, the amount text will have a line through it.
+   *
+   * @default false
+   */
+  isStrikethrough?: boolean;
 } & TestID &
   StyledPropsBlade;
 
 type ColorProps = {
   amountValueColor: BaseTextProps['color'];
-  affixColor: BaseTextProps['color'];
 };
 
-const getTextColorProps = ({ intent }: { intent: AmountProps['intent'] }): ColorProps => {
+type AmountProps = AmountTypeProps & AmountCommonProps;
+
+const getTextColorProps = ({ color }: { color: AmountProps['color'] }): ColorProps => {
   const props: ColorProps = {
-    amountValueColor: 'surface.text.normal.lowContrast',
-    affixColor: 'surface.text.muted.lowContrast',
+    amountValueColor: 'surface.text.gray.normal',
   };
-  if (!intent) return props;
-  props.amountValueColor = `feedback.text.${intent}.lowContrast`;
-  props.affixColor = `feedback.text.${intent}.lowContrast`;
+  if (!color) return props;
+  props.amountValueColor = color;
   return props;
 };
 
 interface AmountValue extends Omit<AmountProps, 'value'> {
-  affixColor: BaseTextProps['color'];
   amountValueColor: BaseTextProps['color'];
   value: string;
   size: Exclude<AmountProps['size'], undefined>;
@@ -102,52 +93,55 @@ interface AmountValue extends Omit<AmountProps, 'value'> {
 
 const AmountValue = ({
   value,
-  size,
+  size = 'medium',
+  type = 'body',
+  weight = 'regular',
   amountValueColor,
   isAffixSubtle,
   suffix,
-  affixColor,
 }: AmountValue): ReactElement => {
-  const affixFontWeight = isAffixSubtle ? 'regular' : 'bold';
   const isReactNative = getPlatformType() === 'react-native';
-  const affixFontSize = isAffixSubtle ? affixFontSizes[size] : amountFontSizes[size];
-  const valueForWeight = size.includes('bold') || size.startsWith('title') ? 'bold' : 'regular';
+  const affixFontSize = isAffixSubtle ? subtleFontSizes[type][size] : normalAmountSizes[type][size];
+  const numberFontFamily: keyof FontFamily = type === 'body' ? 'text' : 'heading';
   if (suffix === 'decimals' && isAffixSubtle) {
     const integer = value.split('.')[0];
     const decimal = value.split('.')[1];
 
-    // Native does not support alignItems of Text inside a div, insted we need to wrap is in a Text
-    const AmountWrapper = getPlatformType() === 'react-native' ? BaseText : React.Fragment;
+    // Native does not support alignItems of Text inside a div, instead we need to wrap is in a Text
+    const AmountWrapper = isReactNative ? Text : React.Fragment;
 
     return (
       <AmountWrapper>
         <BaseText
-          fontSize={amountFontSizes[size]}
-          fontWeight={valueForWeight}
-          lineHeight={amountLineHeights[size]}
+          fontSize={normalAmountSizes[type][size]}
+          fontWeight={weight}
+          lineHeight={amountLineHeights[type][size]}
           color={amountValueColor}
+          fontFamily={numberFontFamily}
           as={isReactNative ? undefined : 'span'}
         >
-          {integer}.
+          {integer}
         </BaseText>
         <BaseText
-          marginLeft="spacing.1"
-          fontWeight={affixFontWeight}
+          fontWeight={weight}
           fontSize={affixFontSize}
-          color={affixColor}
+          fontFamily={numberFontFamily}
+          color={amountValueColor}
           as={isReactNative ? undefined : 'span'}
+          opacity={isAffixSubtle ? opacity[8] : 1}
         >
-          {decimal || '00'}
+          .{decimal || '00'}
         </BaseText>
       </AmountWrapper>
     );
   }
   return (
     <BaseText
-      fontSize={amountFontSizes[size]}
-      fontWeight={valueForWeight}
+      fontSize={normalAmountSizes[type][size]}
+      fontWeight={weight}
+      fontFamily={numberFontFamily}
       color={amountValueColor}
-      lineHeight={amountLineHeights[size]}
+      lineHeight={amountLineHeights[type][size]}
     >
       {value}
     </BaseText>
@@ -173,29 +167,45 @@ export const addCommas = (amountValue: number, currency: Currency, decimalPlaces
  * ie: for INR 2000 => 2K
  * for MYR 2000000 => 2M
  */
-export const getHumanizedAmount = (amountValue: number, currency: Currency): string => {
+export const getHumanizedAmount = ({
+  value,
+  currency,
+  denominationPosition = 'right',
+}: {
+  value: number;
+  currency: Currency;
+  denominationPosition?: 'left' | 'right';
+}): string => {
+  let amountValue = value;
   const abbreviations = getCurrencyAbbreviations(currency);
-
   const abbreviation = abbreviations.find((abbr) => amountValue >= abbr.value);
+
   if (abbreviation) {
     amountValue = amountValue / abbreviation.value;
     const formattedAmountValue = getFlooredFixed(amountValue, 2);
-    return addCommas(formattedAmountValue, currency) + abbreviation.symbol;
-  } else {
-    return amountValue.toString();
+
+    if (denominationPosition === 'right') {
+      return `${addCommas(formattedAmountValue, currency)}${abbreviation.symbol}`;
+    }
+
+    return `${abbreviation.symbol}${addCommas(formattedAmountValue, currency)}`;
   }
+
+  return amountValue.toString();
 };
 
 type FormatAmountWithSuffixType = {
   suffix: AmountProps['suffix'];
   value: number;
   currency: Currency;
+  denominationPosition?: 'left' | 'right';
 };
 
 export const formatAmountWithSuffix = ({
   suffix,
   value,
   currency,
+  denominationPosition,
 }: FormatAmountWithSuffixType): string => {
   switch (suffix) {
     case 'decimals': {
@@ -203,7 +213,7 @@ export const formatAmountWithSuffix = ({
       return addCommas(decimalNumber, currency, 2);
     }
     case 'humanize': {
-      return getHumanizedAmount(value, currency);
+      return getHumanizedAmount({ value, currency, denominationPosition });
     }
     case 'none': {
       return addCommas(getFlooredFixed(value, 0), currency);
@@ -213,23 +223,18 @@ export const formatAmountWithSuffix = ({
   }
 };
 
-const getCurrencyWeight = (
-  isAffixSubtle: NonNullable<AmountProps['isAffixSubtle']>,
-  size: NonNullable<AmountProps['size']>,
-): 'bold' | 'regular' => {
-  if (isAffixSubtle || size.startsWith('bold')) return 'bold';
-  return 'regular';
-};
-
 const _Amount = ({
   value,
   suffix = 'decimals',
-  size = 'body-medium',
+  type = 'body',
+  size = 'medium',
+  weight = 'regular',
   isAffixSubtle = true,
-  intent,
-  prefix = 'currency-symbol',
-  testID,
+  isStrikethrough = false,
+  color,
+  currencyIndicator = 'currency-symbol',
   currency = 'INR',
+  testID,
   ...styledProps
 }: AmountProps): ReactElement => {
   if (__DEV__) {
@@ -239,29 +244,56 @@ const _Amount = ({
         moduleName: 'Amount',
       });
     }
-    // @ts-expect-error neutral intent should throw error
-    if (intent === 'neutral') {
+    // @ts-expect-error neutral color should throw error
+    if (color === 'neutral') {
       throwBladeError({
-        message: '`neutral` intent is not supported.',
+        message: '`neutral` color is not supported.',
+        moduleName: 'Amount',
+      });
+    }
+
+    const bodySizes = objectKeysWithType(normalAmountSizes.body);
+    if ((type === 'body' || !type) && !bodySizes.includes(size)) {
+      throwBladeError({
+        message: `size="${size}" is not allowed with type="body"`,
+        moduleName: 'Amount',
+      });
+    }
+
+    const displaySizes = objectKeysWithType(normalAmountSizes.display);
+    if (type === 'display' && !displaySizes.includes(size)) {
+      throwBladeError({
+        message: `size="${size}" is not allowed with type="display"`,
+        moduleName: 'Amount',
+      });
+    }
+
+    const headingSizes = objectKeysWithType(normalAmountSizes.heading);
+    if (type === 'heading' && !headingSizes.includes(size)) {
+      throwBladeError({
+        message: `size="${size}" is not allowed with type="heading"`,
         moduleName: 'Amount',
       });
     }
   }
 
-  const currencyPrefix = currencyPrefixMapping[currency][prefix];
-  const renderedValue = formatAmountWithSuffix({ suffix, value, currency });
-  const { amountValueColor, affixColor } = getTextColorProps({
-    intent,
+  const currencySymbolOrCode = currencyIndicatorMapping[currency][currencyIndicator];
+  const currencyPosition = currencyPositionMapping[currency] || 'left';
+  const denominationPosition = currencyPosition === 'left' ? 'right' : 'left';
+  const renderedValue = formatAmountWithSuffix({ suffix, value, currency, denominationPosition });
+  const { amountValueColor } = getTextColorProps({
+    color,
   });
 
-  const currencyColor = isAffixSubtle ? affixColor : amountValueColor;
-  const currencyFontSize = isAffixSubtle ? affixFontSizes[size] : amountFontSizes[size];
-  const currencyWeight = getCurrencyWeight(isAffixSubtle, size);
+  const currencyFontSize = isAffixSubtle
+    ? subtleFontSizes[type][size]
+    : normalAmountSizes[type][size];
   const isReactNative = getPlatformType() === 'react-native';
 
   return (
     <BaseBox
       display={(isReactNative ? 'flex' : 'inline-flex') as never}
+      flexDirection="row"
       {...metaAttribute({ name: MetaConstants.Amount, testID })}
       {...getStyledProps(styledProps)}
     >
@@ -269,24 +301,52 @@ const _Amount = ({
         display={(isReactNative ? 'flex' : 'inline-flex') as never}
         alignItems="baseline"
         flexDirection="row"
+        position="relative"
       >
-        <BaseText
-          marginRight="spacing.1"
-          fontWeight={currencyWeight}
-          fontSize={currencyFontSize}
-          color={currencyColor}
-          as={isReactNative ? undefined : 'span'}
-        >
-          {currencyPrefix}
-        </BaseText>
+        {currencyPosition === 'left' && (
+          <BaseText
+            marginRight="spacing.1"
+            fontWeight={weight}
+            fontSize={currencyFontSize}
+            color={amountValueColor}
+            as={isReactNative ? undefined : 'span'}
+            opacity={isAffixSubtle ? opacity[8] : 1}
+          >
+            {currencySymbolOrCode}
+          </BaseText>
+        )}
         <AmountValue
           value={renderedValue}
           amountValueColor={amountValueColor}
+          type={type}
+          weight={weight}
           size={size}
           isAffixSubtle={isAffixSubtle}
           suffix={suffix}
-          affixColor={affixColor}
         />
+        {currencyPosition === 'right' && (
+          <BaseText
+            marginLeft="spacing.1"
+            fontWeight={weight}
+            fontSize={currencyFontSize}
+            color={amountValueColor}
+            as={isReactNative ? undefined : 'span'}
+            opacity={isAffixSubtle ? opacity[8] : 1}
+          >
+            {currencySymbolOrCode}
+          </BaseText>
+        )}
+        {isStrikethrough && (
+          <BaseBox
+            // @ts-expect-error - intentionally setting the border color to the color prop for this hacky strikethrough
+            borderBottomColor={amountValueColor}
+            borderBottomWidth={type === 'body' ? 'thin' : 'thicker'}
+            borderBottomStyle="solid"
+            position="absolute"
+            width="100%"
+            top="50%"
+          />
+        )}
       </BaseBox>
     </BaseBox>
   );
diff --git a/packages/blade/src/components/Amount/_KitchenSink.Amount.stories.tsx b/packages/blade/src/components/Amount/_KitchenSink.Amount.stories.tsx
index d1d2191bc13..5aa8b4fe8b9 100644
--- a/packages/blade/src/components/Amount/_KitchenSink.Amount.stories.tsx
+++ b/packages/blade/src/components/Amount/_KitchenSink.Amount.stories.tsx
@@ -24,7 +24,7 @@ export default {
   title: 'Components/KitchenSink/Amount',
   component: Amount,
   parameters: {
-    // enable Chromatic's snapshotting only for kitchensink
+    // enable Chromatic's snapshots only for kitchen sink
     chromatic: { disableSnapshot: false },
     options: { showPanel: false },
   },
diff --git a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx
index 172aae4e07d..f1a68e583f9 100644
--- a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx
+++ b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx
@@ -22,6 +22,22 @@ describe('<Amount />', () => {
     );
   });
 
+  it('should throw an error when invalid type and size is passed', () => {
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="display" size="2xlarge" />)).toThrow(
+      '[Blade: Amount]: size="2xlarge" is not allowed with type="display"',
+    );
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="heading" size="xsmall" />)).toThrow(
+      '[Blade: Amount]: size="xsmall" is not allowed with type="heading"',
+    );
+
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="body" size="2xlarge" />)).toThrow(
+      '[Blade: Amount]: size="2xlarge" is not allowed with type="body"',
+    );
+  });
+
   it('should accept testID', () => {
     const { getByTestId } = renderWithTheme(<Amount value={10000} testID="amount-test" />);
     expect(getByTestId('amount-test')).toBeTruthy();
@@ -30,15 +46,15 @@ describe('<Amount />', () => {
   it('should render all sizes of Amount', () => {
     const { toJSON } = renderWithTheme(
       <>
-        <Amount size="body-medium" value={1000} />
-        <Amount size="body-medium-bold" value={1000} />
-        <Amount size="body-small" value={1000} />
-        <Amount size="body-small-bold" value={1000} />
-        <Amount size="heading-large" value={1000} />
-        <Amount size="heading-large-bold" value={1000} />
-        <Amount size="heading-small" value={1000} />
-        <Amount size="heading-small-bold" value={1000} />
-        <Amount size="title-medium" value={1000} />
+        <Amount type="body" size="medium" value={1000} />
+        <Amount type="body" size="medium" weight="semibold" value={1000} />
+        <Amount type="body" size="small" value={1000} />
+        <Amount type="body" size="small" weight="semibold" value={1000} />
+        <Amount type="heading" size="large" value={1000} />
+        <Amount type="heading" size="large" weight="semibold" value={1000} />
+        <Amount type="heading" size="small" value={1000} />
+        <Amount type="heading" size="small" weight="semibold" value={1000} />
+        <Amount type="display" size="medium" value={1000} />
       </>,
     );
     expect(toJSON()).toMatchSnapshot();
@@ -46,26 +62,43 @@ describe('<Amount />', () => {
 
   it('should render amount with Decimal value', () => {
     const { toJSON } = renderWithTheme(
-      <Amount size="heading-small" suffix="decimals" value={1000.22} />,
+      <Amount type="heading" size="small" suffix="decimals" value={1000.22} />,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('should render amount with Humanize value', () => {
     const { toJSON } = renderWithTheme(
-      <Amount size="heading-small" suffix="humanize" value={1000.22} />,
+      <Amount type="heading" size="small" suffix="humanize" value={1000.22} />,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it('should render isStrikethrough={true}', () => {
+    const { toJSON } = renderWithTheme(<Amount isStrikethrough={true} value={1000} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should render currencyIndicator="currency-symbol"', () => {
+    const { toJSON } = renderWithTheme(<Amount currencyIndicator="currency-symbol" value={1000} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should render currencyIndicator="currency-code"', () => {
+    const { toJSON } = renderWithTheme(<Amount currencyIndicator="currency-code" value={1000} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
   it('should render positive intent Amount ', () => {
-    const { toJSON } = renderWithTheme(<Amount intent="positive" value={1000} />);
+    const { toJSON } = renderWithTheme(
+      <Amount color="feedback.text.positive.intense" value={1000} />,
+    );
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('should render information intent Amount ', () => {
     const { toJSON } = renderWithTheme(
-      <Amount isAffixSubtle={false} intent="information" value={1000} />,
+      <Amount isAffixSubtle={false} color="feedback.text.information.intense" value={1000} />,
     );
     expect(toJSON()).toMatchSnapshot();
   });
@@ -88,12 +121,21 @@ describe('<Amount />', () => {
   });
 
   it('should check if getHumanizedAmount is returning the right humanized value', () => {
-    expect(getHumanizedAmount(1000.22, 'INR')).toBe('1k');
-    expect(getHumanizedAmount(1000000, 'INR')).toBe('10L');
-    expect(getHumanizedAmount(10000000, 'INR')).toBe('1Cr');
-    expect(getHumanizedAmount(1000.22, 'MYR')).toBe('1K');
-    expect(getHumanizedAmount(1000000, 'MYR')).toBe('1M');
-    expect(getHumanizedAmount(10000000, 'MYR')).toBe('10M');
+    expect(getHumanizedAmount({ value: 1000.22, currency: 'INR' })).toBe('1k');
+    expect(getHumanizedAmount({ value: 1000000, currency: 'INR' })).toBe('10L');
+    expect(getHumanizedAmount({ value: 10000000, currency: 'INR' })).toBe('1Cr');
+    expect(getHumanizedAmount({ value: 1000.22, currency: 'MYR' })).toBe('1K');
+    expect(getHumanizedAmount({ value: 1000000, currency: 'MYR' })).toBe('1M');
+    expect(getHumanizedAmount({ value: 10000000, currency: 'MYR' })).toBe('10M');
+    expect(
+      getHumanizedAmount({ value: 1000.22, currency: 'MYR', denominationPosition: 'left' }),
+    ).toBe('K1');
+    expect(
+      getHumanizedAmount({ value: 1000000, currency: 'MYR', denominationPosition: 'left' }),
+    ).toBe('M1');
+    expect(
+      getHumanizedAmount({ value: 10000000, currency: 'MYR', denominationPosition: 'left' }),
+    ).toBe('M10');
   });
 
   it('should check if formatAmountWithSuffix is returning values for humanize decimals and none', () => {
diff --git a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx
index 35043249d42..d0a898169cd 100644
--- a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx
+++ b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx
@@ -30,53 +30,95 @@ describe('<Amount />', () => {
     mockConsoleError.mockRestore();
   });
 
+  it('should throw an error when invalid type and size is passed', () => {
+    const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="display" size="2xlarge" />)).toThrow(
+      '[Blade: Amount]: size="2xlarge" is not allowed with type="display"',
+    );
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="heading" size="xsmall" />)).toThrow(
+      '[Blade: Amount]: size="xsmall" is not allowed with type="heading"',
+    );
+    mockConsoleError.mockRestore();
+
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="body" size="2xlarge" />)).toThrow(
+      '[Blade: Amount]: size="2xlarge" is not allowed with type="body"',
+    );
+    mockConsoleError.mockRestore();
+  });
+
   it('should render body-small size Amount', () => {
-    const { container } = renderWithTheme(<Amount size="body-small" value={1000} />);
+    const { container } = renderWithTheme(<Amount type="body" size="small" value={1000} />);
     expect(container).toMatchSnapshot();
   });
 
   it('should render body-small-bold size Amount', () => {
-    const { container } = renderWithTheme(<Amount size="body-small-bold" value={1000} />);
+    const { container } = renderWithTheme(
+      <Amount type="body" size="small" weight="semibold" value={1000} />,
+    );
     expect(container).toMatchSnapshot();
   });
 
   it('should render body-medium size Amount', () => {
-    const { container } = renderWithTheme(<Amount size="body-medium" value={1000} />);
+    const { container } = renderWithTheme(<Amount type="body" size="medium" value={1000} />);
     expect(container).toMatchSnapshot();
   });
 
   it('should render body-medium-bold size Amount', () => {
     const { container } = renderWithTheme(
       <>
-        <Amount size="body-medium" value={1000} />
-        <Amount size="body-medium-bold" value={1000} />
-        <Amount size="body-small" value={1000} />
-        <Amount size="body-small-bold" value={1000} />
-        <Amount size="heading-large" value={1000} />
-        <Amount size="heading-large-bold" value={1000} />
-        <Amount size="heading-small" value={1000} />
-        <Amount size="heading-small-bold" value={1000} />
-        <Amount size="title-medium" value={1000} />
+        <Amount type="body" size="medium" value={1000} />
+        <Amount type="body" size="medium" weight="semibold" value={1000} />
+        <Amount type="body" size="small" value={1000} />
+        <Amount type="body" size="small" weight="semibold" value={1000} />
+        <Amount type="heading" size="large" value={1000} />
+        <Amount type="heading" size="large" weight="semibold" value={1000} />
+        <Amount type="heading" size="small" value={1000} />
+        <Amount type="heading" size="small" weight="semibold" value={1000} />
+        <Amount type="display" size="medium" value={1000} />
       </>,
     );
     expect(container).toMatchSnapshot();
   });
 
+  it('should render isStrikethrough={true}', () => {
+    const { container } = renderWithTheme(<Amount isStrikethrough={true} value={1000} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render currencyIndicator="currency-symbol"', () => {
+    const { container } = renderWithTheme(
+      <Amount currencyIndicator="currency-symbol" value={1000} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render currencyIndicator="currency-code"', () => {
+    const { container } = renderWithTheme(
+      <Amount currencyIndicator="currency-code" value={1000} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
   it('should render amount with Humanize value', () => {
     const { container } = renderWithTheme(
-      <Amount size="title-medium" suffix="humanize" value={1000.22} />,
+      <Amount type="display" size="medium" suffix="humanize" value={1000.22} />,
     );
     expect(container).toMatchSnapshot();
   });
 
   it('should render positive intent Amount ', () => {
-    const { container } = renderWithTheme(<Amount intent="positive" value={1000} />);
+    const { container } = renderWithTheme(
+      <Amount color="feedback.text.positive.intense" value={1000} />,
+    );
     expect(container).toMatchSnapshot();
   });
 
   it('should render negative intent Amount ', () => {
     const { container } = renderWithTheme(
-      <Amount isAffixSubtle={false} intent="negative" value={1000} />,
+      <Amount isAffixSubtle={false} color="feedback.text.negative.intense" value={1000} />,
     );
     expect(container).toMatchSnapshot();
   });
@@ -105,12 +147,21 @@ describe('<Amount />', () => {
   });
 
   it('should check if getHumanizedAmount is returning the humanized value', () => {
-    expect(getHumanizedAmount(1000.22, 'INR')).toBe('1k');
-    expect(getHumanizedAmount(1000000, 'INR')).toBe('10L');
-    expect(getHumanizedAmount(10000000, 'INR')).toBe('1Cr');
-    expect(getHumanizedAmount(1000.22, 'MYR')).toBe('1K');
-    expect(getHumanizedAmount(1000000, 'MYR')).toBe('1M');
-    expect(getHumanizedAmount(10000000, 'MYR')).toBe('10M');
+    expect(getHumanizedAmount({ value: 1000.22, currency: 'INR' })).toBe('1k');
+    expect(getHumanizedAmount({ value: 1000000, currency: 'INR' })).toBe('10L');
+    expect(getHumanizedAmount({ value: 10000000, currency: 'INR' })).toBe('1Cr');
+    expect(getHumanizedAmount({ value: 1000.22, currency: 'MYR' })).toBe('1K');
+    expect(getHumanizedAmount({ value: 1000000, currency: 'MYR' })).toBe('1M');
+    expect(getHumanizedAmount({ value: 10000000, currency: 'MYR' })).toBe('10M');
+    expect(
+      getHumanizedAmount({ value: 1000.22, currency: 'MYR', denominationPosition: 'left' }),
+    ).toBe('K1');
+    expect(
+      getHumanizedAmount({ value: 1000000, currency: 'MYR', denominationPosition: 'left' }),
+    ).toBe('M1');
+    expect(
+      getHumanizedAmount({ value: 10000000, currency: 'MYR', denominationPosition: 'left' }),
+    ).toBe('M10');
   });
 
   it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => {
diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap
index 46fa366b2bf..d7a69345489 100644
--- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap
+++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap
@@ -11,10 +11,12 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -24,36 +26,41 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -67,15 +74,22 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -92,19 +106,21 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -120,28 +136,30 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -151,6 +169,7 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -170,10 +189,12 @@ exports[`<Amount /> should render Amount with default props 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -183,36 +204,41 @@ exports[`<Amount /> should render Amount with default props 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -226,15 +252,22 @@ exports[`<Amount /> should render Amount with default props 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -251,19 +284,21 @@ exports[`<Amount /> should render Amount with default props 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -279,28 +314,30 @@ exports[`<Amount /> should render Amount with default props 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -310,6 +347,7 @@ exports[`<Amount /> should render Amount with default props 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -329,10 +367,12 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -342,36 +382,41 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -385,15 +430,22 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -410,19 +462,21 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -438,28 +492,30 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -469,6 +525,7 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -488,10 +545,12 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -501,36 +560,41 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -544,15 +608,22 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -569,19 +640,21 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -597,28 +670,30 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -628,6 +703,7 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -647,10 +723,12 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -660,36 +738,41 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -703,15 +786,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -728,19 +818,21 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -756,28 +848,30 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -787,6 +881,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -795,10 +890,12 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -808,36 +905,41 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="semibold"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -851,15 +953,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -876,19 +985,21 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
-          fontWeight="bold"
+          fontWeight="semibold"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "600",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -904,28 +1015,30 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
-          fontWeight="regular"
-          marginLeft="spacing.1"
+          fontFamily="text"
+          fontSize={25}
+          fontWeight="semibold"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -935,6 +1048,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -943,10 +1057,12 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -956,36 +1072,41 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -999,15 +1120,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1024,20 +1152,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={75}
           fontWeight="regular"
-          lineHeight={50}
+          lineHeight={75}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
                 "fontWeight": "400",
-                "lineHeight": 16,
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1052,28 +1182,30 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -1083,6 +1215,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -1091,10 +1224,12 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -1104,36 +1239,41 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="semibold"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -1147,15 +1287,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1172,20 +1319,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={75}
-          fontWeight="bold"
-          lineHeight={50}
+          fontWeight="semibold"
+          lineHeight={75}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "700",
-                "lineHeight": 16,
+                "fontWeight": "600",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1200,28 +1349,30 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
-          fontWeight="regular"
-          marginLeft="spacing.1"
+          fontFamily="text"
+          fontSize={25}
+          fontWeight="semibold"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -1231,6 +1382,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -1239,10 +1391,12 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -1252,36 +1406,41 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={100}
-        fontWeight="bold"
+        fontSize={200}
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 14,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -1295,15 +1454,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1320,20 +1486,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={400}
+          fontFamily="heading"
+          fontSize={500}
           fontWeight="regular"
-          lineHeight={400}
+          lineHeight={500}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 18,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 20,
                 "fontStyle": "normal",
                 "fontWeight": "400",
-                "lineHeight": 24,
+                "letterSpacing": 0,
+                "lineHeight": 26,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1348,28 +1516,30 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={100}
+          fontFamily="heading"
+          fontSize={200}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 14,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -1379,6 +1549,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -1387,10 +1558,12 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -1400,36 +1573,41 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={100}
-        fontWeight="bold"
+        fontSize={200}
+        fontWeight="semibold"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 14,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -1443,15 +1621,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1468,20 +1653,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={400}
-          fontWeight="bold"
-          lineHeight={400}
+          fontFamily="heading"
+          fontSize={500}
+          fontWeight="semibold"
+          lineHeight={500}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 18,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 20,
                 "fontStyle": "normal",
-                "fontWeight": "700",
-                "lineHeight": 24,
+                "fontWeight": "600",
+                "letterSpacing": 0,
+                "lineHeight": 26,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1496,28 +1683,30 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={100}
-          fontWeight="regular"
-          marginLeft="spacing.1"
+          fontFamily="heading"
+          fontSize={200}
+          fontWeight="semibold"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 14,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -1527,6 +1716,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -1535,10 +1725,12 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -1548,36 +1740,41 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
         fontSize={75}
-        fontWeight="bold"
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 12,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -1591,15 +1788,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1616,20 +1820,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={200}
+          fontFamily="heading"
+          fontSize={300}
           fontWeight="regular"
           lineHeight={300}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
-                "lineHeight": 24,
+                "letterSpacing": 0,
+                "lineHeight": 22,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1644,28 +1850,30 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="heading"
           fontSize={75}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 12,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -1675,6 +1883,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -1683,10 +1892,12 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -1696,36 +1907,41 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
         fontSize={75}
-        fontWeight="bold"
+        fontWeight="semibold"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 12,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -1739,15 +1955,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1764,20 +1987,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={200}
-          fontWeight="bold"
+          fontFamily="heading"
+          fontSize={300}
+          fontWeight="semibold"
           lineHeight={300}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "700",
-                "lineHeight": 24,
+                "fontWeight": "600",
+                "letterSpacing": 0,
+                "lineHeight": 22,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1792,28 +2017,30 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="heading"
           fontSize={75}
-          fontWeight="regular"
-          marginLeft="spacing.1"
+          fontWeight="semibold"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -1823,6 +2050,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -1831,10 +2059,12 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -1844,36 +2074,41 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={400}
-        fontWeight="bold"
+        fontSize={700}
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 18,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 32,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -1887,15 +2122,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1912,20 +2154,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={700}
-          fontWeight="bold"
-          lineHeight={600}
+          fontFamily="heading"
+          fontSize={900}
+          fontWeight="regular"
+          lineHeight={900}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 24,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 36,
                 "fontStyle": "normal",
-                "fontWeight": "700",
-                "lineHeight": 32,
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 42,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1940,28 +2184,30 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={400}
+          fontFamily="heading"
+          fontSize={700}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 18,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 32,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -1971,6 +2217,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
@@ -1990,10 +2237,12 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -2003,36 +2252,41 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
         fontSize={75}
-        fontWeight="bold"
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 12,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -2046,15 +2300,22 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2071,20 +2332,22 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={200}
+          fontFamily="heading"
+          fontSize={300}
           fontWeight="regular"
           lineHeight={300}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
-                "lineHeight": 24,
+                "letterSpacing": 0,
+                "lineHeight": 22,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2099,28 +2362,30 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
           }
         >
           1,000
-          .
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="heading"
           fontSize={75}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 12,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -2130,6 +2395,7 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
             ]
           }
         >
+          .
           22
         </Text>
       </Text>
@@ -2149,10 +2415,12 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -2162,36 +2430,41 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
         fontSize={75}
-        fontWeight="bold"
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 12,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -2205,20 +2478,22 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
       </Text>
       <Text
         accessible={true}
-        color="surface.text.normal.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={200}
+        fontFamily="heading"
+        fontSize={300}
         fontWeight="regular"
         lineHeight={300}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "TASA Orbiter Display",
               "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "400",
-              "lineHeight": 24,
+              "letterSpacing": 0,
+              "lineHeight": 22,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
@@ -2239,7 +2514,7 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
 </View>
 `;
 
-exports[`<Amount /> should render information intent Amount  1`] = `
+exports[`<Amount /> should render currencyIndicator="currency-code" 1`] = `
 <View
   style={
     {
@@ -2250,10 +2525,12 @@ exports[`<Amount /> should render information intent Amount  1`] = `
   <View
     data-blade-component="amount"
     display="flex"
+    flexDirection="row"
     style={
       [
         {
           "display": "flex",
+          "flexDirection": "row",
         },
       ]
     }
@@ -2263,36 +2540,41 @@ exports[`<Amount /> should render information intent Amount  1`] = `
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
+      position="relative"
       style={
         [
           {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
+            "position": "relative",
           },
         ]
       }
     >
       <Text
         accessible={true}
-        color="feedback.text.information.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={100}
+        fontSize={25}
         fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(193, 100%, 35%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 14,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 0.64,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -2302,23 +2584,26 @@ exports[`<Amount /> should render information intent Amount  1`] = `
           ]
         }
       >
-        ₹
+        INR
       </Text>
       <Text
         accessible={true}
-        color="feedback.text.information.lowContrast"
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
         fontSize={100}
+        fontStyle="normal"
         fontWeight="regular"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(193, 100%, 35%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2333,67 +2618,319 @@ exports[`<Amount /> should render information intent Amount  1`] = `
           ]
         }
       >
-        1,000.00
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<Amount /> should render positive intent Amount  1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="amount"
-    display="flex"
-    style={
-      [
-        {
-          "display": "flex",
-        },
-      ]
-    }
-  >
-    <View
-      alignItems="baseline"
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="row"
-      style={
-        [
-          {
-            "alignItems": "baseline",
-            "display": "flex",
-            "flexDirection": "row",
-          },
-        ]
+        <Text
+          accessible={true}
+          color="surface.text.gray.normal"
+          data-blade-component="base-text"
+          fontFamily="text"
+          fontSize={100}
+          fontWeight="regular"
+          lineHeight={100}
+          style={
+            [
+              {
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 20,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
+              },
+            ]
+          }
+        >
+          1,000
+        </Text>
+        <Text
+          accessible={true}
+          color="surface.text.gray.normal"
+          data-blade-component="base-text"
+          fontFamily="text"
+          fontSize={25}
+          fontWeight="regular"
+          opacity={0.64}
+          style={
+            [
+              {
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 20,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "opacity": 0.64,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
+              },
+            ]
+          }
+        >
+          .
+          00
+        </Text>
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`<Amount /> should render currencyIndicator="currency-symbol" 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    data-blade-component="amount"
+    display="flex"
+    flexDirection="row"
+    style={
+      [
+        {
+          "display": "flex",
+          "flexDirection": "row",
+        },
+      ]
+    }
+  >
+    <View
+      alignItems="baseline"
+      data-blade-component="base-box"
+      display="flex"
+      flexDirection="row"
+      position="relative"
+      style={
+        [
+          {
+            "alignItems": "baseline",
+            "display": "flex",
+            "flexDirection": "row",
+            "position": "relative",
+          },
+        ]
       }
     >
       <Text
         accessible={true}
-        color="feedback.text.positive.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
+        opacity={0.64}
         style={
           [
             {
-              "color": "hsla(160, 100%, 26%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
+              "fontStyle": "normal",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 20,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 2,
+              "marginTop": 0,
+              "opacity": 0.64,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "textDecorationLine": "none",
+            },
+          ]
+        }
+      >
+        ₹
+      </Text>
+      <Text
+        accessible={true}
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
+        style={
+          [
+            {
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
+              "fontStyle": "normal",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 20,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 0,
+              "marginTop": 0,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "textDecorationLine": "none",
+            },
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          color="surface.text.gray.normal"
+          data-blade-component="base-text"
+          fontFamily="text"
+          fontSize={100}
+          fontWeight="regular"
+          lineHeight={100}
+          style={
+            [
+              {
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 20,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
+              },
+            ]
+          }
+        >
+          1,000
+        </Text>
+        <Text
+          accessible={true}
+          color="surface.text.gray.normal"
+          data-blade-component="base-text"
+          fontFamily="text"
+          fontSize={25}
+          fontWeight="regular"
+          opacity={0.64}
+          style={
+            [
+              {
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 20,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "opacity": 0.64,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
+              },
+            ]
+          }
+        >
+          .
+          00
+        </Text>
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`<Amount /> should render information intent Amount  1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    data-blade-component="amount"
+    display="flex"
+    flexDirection="row"
+    style={
+      [
+        {
+          "display": "flex",
+          "flexDirection": "row",
+        },
+      ]
+    }
+  >
+    <View
+      alignItems="baseline"
+      data-blade-component="base-box"
+      display="flex"
+      flexDirection="row"
+      position="relative"
+      style={
+        [
+          {
+            "alignItems": "baseline",
+            "display": "flex",
+            "flexDirection": "row",
+            "position": "relative",
+          },
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        color="feedback.text.information.intense"
+        data-blade-component="base-text"
+        fontSize={100}
+        fontWeight="regular"
+        marginRight="spacing.1"
+        opacity={1}
+        style={
+          [
+            {
+              "color": "hsla(200, 84%, 37%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 2,
               "marginTop": 0,
+              "opacity": 1,
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
@@ -2407,15 +2944,132 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
       </Text>
       <Text
         accessible={true}
+        color="feedback.text.information.intense"
         data-blade-component="base-text"
+        fontFamily="text"
+        fontSize={100}
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(200, 84%, 37%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 20,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 0,
+              "marginTop": 0,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "textDecorationLine": "none",
+            },
+          ]
+        }
+      >
+        1,000.00
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`<Amount /> should render isStrikethrough={true} 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    data-blade-component="amount"
+    display="flex"
+    flexDirection="row"
+    style={
+      [
+        {
+          "display": "flex",
+          "flexDirection": "row",
+        },
+      ]
+    }
+  >
+    <View
+      alignItems="baseline"
+      data-blade-component="base-box"
+      display="flex"
+      flexDirection="row"
+      position="relative"
+      style={
+        [
+          {
+            "alignItems": "baseline",
+            "display": "flex",
+            "flexDirection": "row",
+            "position": "relative",
+          },
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        color="surface.text.gray.normal"
+        data-blade-component="base-text"
+        fontSize={25}
+        fontWeight="regular"
+        marginRight="spacing.1"
+        opacity={0.64}
+        style={
+          [
+            {
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
+              "fontStyle": "normal",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 20,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 2,
+              "marginTop": 0,
+              "opacity": 0.64,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "textDecorationLine": "none",
+            },
+          ]
+        }
+      >
+        ₹
+      </Text>
+      <Text
+        accessible={true}
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
+        style={
+          [
+            {
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
+              "fontStyle": "normal",
+              "fontWeight": "400",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2432,19 +3086,21 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(160, 100%, 26%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -2460,28 +3116,229 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
           }
         >
           1,000
+        </Text>
+        <Text
+          accessible={true}
+          color="surface.text.gray.normal"
+          data-blade-component="base-text"
+          fontFamily="text"
+          fontSize={25}
+          fontWeight="regular"
+          opacity={0.64}
+          style={
+            [
+              {
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 20,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "opacity": 0.64,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
+              },
+            ]
+          }
+        >
           .
+          00
+        </Text>
+      </Text>
+      <View
+        borderBottomColor="surface.text.gray.normal"
+        borderBottomStyle="solid"
+        borderBottomWidth="thin"
+        data-blade-component="base-box"
+        position="absolute"
+        style={
+          [
+            {
+              "borderBottomColor": "hsla(212, 39%, 16%, 1)",
+              "borderBottomStyle": "solid",
+              "borderBottomWidth": 1,
+              "position": "absolute",
+              "top": "50%",
+              "width": "100%",
+            },
+          ]
+        }
+        top="50%"
+        width="100%"
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`<Amount /> should render positive intent Amount  1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    data-blade-component="amount"
+    display="flex"
+    flexDirection="row"
+    style={
+      [
+        {
+          "display": "flex",
+          "flexDirection": "row",
+        },
+      ]
+    }
+  >
+    <View
+      alignItems="baseline"
+      data-blade-component="base-box"
+      display="flex"
+      flexDirection="row"
+      position="relative"
+      style={
+        [
+          {
+            "alignItems": "baseline",
+            "display": "flex",
+            "flexDirection": "row",
+            "position": "relative",
+          },
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        color="feedback.text.positive.intense"
+        data-blade-component="base-text"
+        fontSize={25}
+        fontWeight="regular"
+        marginRight="spacing.1"
+        opacity={0.64}
+        style={
+          [
+            {
+              "color": "hsla(150, 100%, 27%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 10,
+              "fontStyle": "normal",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 20,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 2,
+              "marginTop": 0,
+              "opacity": 0.64,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "textDecorationLine": "none",
+            },
+          ]
+        }
+      >
+        ₹
+      </Text>
+      <Text
+        accessible={true}
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
+        style={
+          [
+            {
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
+              "fontStyle": "normal",
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 20,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 0,
+              "marginTop": 0,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "textDecorationLine": "none",
+            },
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          color="feedback.text.positive.intense"
+          data-blade-component="base-text"
+          fontFamily="text"
+          fontSize={100}
+          fontWeight="regular"
+          lineHeight={100}
+          style={
+            [
+              {
+                "color": "hsla(150, 100%, 27%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 20,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
+              },
+            ]
+          }
+        >
+          1,000
         </Text>
         <Text
           accessible={true}
-          color="feedback.text.positive.lowContrast"
+          color="feedback.text.positive.intense"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
-          marginLeft="spacing.1"
+          opacity={0.64}
           style={
             [
               {
-                "color": "hsla(160, 100%, 26%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(150, 100%, 27%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
-                "marginLeft": 2,
+                "marginLeft": 0,
                 "marginRight": 0,
                 "marginTop": 0,
+                "opacity": 0.64,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -2491,6 +3348,7 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
             ]
           }
         >
+          .
           00
         </Text>
       </Text>
diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap
index bc4ad0ed27e..295b32794f5 100644
--- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap
@@ -1,68 +1,85 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Amount /> should render Amount on server 1`] = `"<div id="root"><div data-blade-component="amount" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx caXXVm"><span class="StyledBaseText-dVBfTO eXGkBJ" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="base-text">10,000<!-- -->.</span><span class="StyledBaseText-dVBfTO jyXKN" data-blade-component="base-text">00</span></div></div></div>"`;
+exports[`<Amount /> should render Amount on server 1`] = `"<div id="root"><div data-blade-component="amount" class="BaseBox-bmPWx eBHIXa"><div data-blade-component="base-box" class="BaseBox-bmPWx boSJQS"><span opacity="0.64" class="StyledBaseText-dVBfTO dLdFVe" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="base-text">10,000</span><span opacity="0.64" class="StyledBaseText-dVBfTO cZvXKO" data-blade-component="base-text">.<!-- -->00</span></div></div></div>"`;
 
 exports[`<Amount /> should render Amount on server 2`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
-}
-
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
+  opacity: 0.64;
 }
 
 <div
@@ -79,6 +96,7 @@ exports[`<Amount /> should render Amount on server 2`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
@@ -87,13 +105,14 @@ exports[`<Amount /> should render Amount on server 2`] = `
         data-blade-component="base-text"
       >
         10,000
-        <!-- -->
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
+        <!-- -->
         00
       </span>
     </div>
diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap
index 4112f326fca..1704258eb7b 100644
--- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap
+++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap
@@ -1,66 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Amount /> should render AED currency Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
-}
-
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
+  opacity: 0.64;
 }
 
 <div>
@@ -75,6 +92,7 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         د.إ
       </span>
@@ -83,12 +101,13 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -97,66 +116,83 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
 `;
 
 exports[`<Amount /> should render Amount with default props 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
-}
-
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
+  opacity: 0.64;
 }
 
 <div>
@@ -171,6 +207,7 @@ exports[`<Amount /> should render Amount with default props 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
@@ -179,12 +216,13 @@ exports[`<Amount /> should render Amount with default props 1`] = `
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -193,66 +231,83 @@ exports[`<Amount /> should render Amount with default props 1`] = `
 `;
 
 exports[`<Amount /> should render MYR currency Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
-}
-
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
+  opacity: 0.64;
 }
 
 <div>
@@ -267,6 +322,7 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         RM
       </span>
@@ -275,12 +331,13 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -289,66 +346,83 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
 `;
 
 exports[`<Amount /> should render USD currency Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
-}
-
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
+  opacity: 0.64;
 }
 
 <div>
@@ -363,6 +437,7 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         $
       </span>
@@ -371,12 +446,13 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -385,38 +461,14 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
 `;
 
 exports[`<Amount /> should render amount with Humanize value 1`] = `
-.c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.25rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-  margin-right: 2px;
-}
-
-.c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 2.5rem;
-  margin: 0;
-  padding: 0;
-}
-
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .c1.c1.c1.c1.c1 {
@@ -431,6 +483,43 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
+  position: relative;
+}
+
+.c2.c2.c2.c2.c2 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 2.5rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
+  margin-right: 2px;
+}
+
+.c3.c3.c3.c3.c3 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 3.5rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 4rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 <div>
@@ -445,6 +534,7 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
@@ -460,52 +550,14 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
 `;
 
 exports[`<Amount /> should render body-medium size Amount 1`] = `
-.c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-  margin-right: 2px;
-}
-
-.c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-  margin-left: 2px;
-}
-
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .c1.c1.c1.c1.c1 {
@@ -520,6 +572,61 @@ exports[`<Amount /> should render body-medium size Amount 1`] = `
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
+  position: relative;
+}
+
+.c2.c2.c2.c2.c2 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
+  margin-right: 2px;
+}
+
+.c3.c3.c3.c3.c3 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
 }
 
 <div>
@@ -534,6 +641,7 @@ exports[`<Amount /> should render body-medium size Amount 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
@@ -542,12 +650,13 @@ exports[`<Amount /> should render body-medium size Amount 1`] = `
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -556,226 +665,441 @@ exports[`<Amount /> should render body-medium size Amount 1`] = `
 `;
 
 exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
+  opacity: 0.64;
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
+  margin-right: 2px;
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.25rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-right: 2px;
 }
 
 .c9.c9.c9.c9.c9 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.25rem;
-  font-weight: 400;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.75rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
+  opacity: 0.64;
+  margin-right: 2px;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.25rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.5rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.75rem;
+  line-height: 2rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.5rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.5rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
+  margin-right: 2px;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.25rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.5rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.25rem;
+  line-height: 2rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-right: 2px;
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 2.5rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
 }
 
 .c16.c16.c16.c16.c16 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.25rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
+  opacity: 0.64;
+  margin-right: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+.c17.c17.c17.c17.c17 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
 }
 
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
+.c18.c18.c18.c18.c18 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
+}
+
+.c19.c19.c19.c19.c19 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
+  margin-right: 2px;
+}
+
+.c20.c20.c20.c20.c20 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c21.c21.c21.c21.c21 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
+}
+
+.c22.c22.c22.c22.c22 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 2.5rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
+  margin-right: 2px;
+}
+
+.c23.c23.c23.c23.c23 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 3.5rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 4rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c24.c24.c24.c24.c24 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 2.5rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
 }
 
 <div>
@@ -790,6 +1114,7 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
@@ -798,12 +1123,13 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -817,22 +1143,24 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c2"
+        class="c5"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
       <span
-        class="c5"
+        class="c6"
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
-        class="c4"
+        class="c7"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -848,20 +1176,22 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
       <span
-        class="c6"
+        class="c8"
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -875,22 +1205,24 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c2"
+        class="c5"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
       <span
-        class="c7"
+        class="c9"
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
-        class="c4"
+        class="c7"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -904,22 +1236,24 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c8"
+        class="c10"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
       <span
-        class="c9"
+        class="c11"
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
-        class="c10"
+        class="c12"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -933,22 +1267,24 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c8"
+        class="c13"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
       <span
-        class="c11"
+        class="c14"
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
-        class="c10"
+        class="c15"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -962,22 +1298,24 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c2"
+        class="c16"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
       <span
-        class="c12"
+        class="c17"
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
-        class="c4"
+        class="c18"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -991,22 +1329,24 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c2"
+        class="c19"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
       <span
-        class="c13"
+        class="c20"
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
-        class="c4"
+        class="c21"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -1020,22 +1360,24 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c14"
+        class="c22"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
       <span
-        class="c15"
+        class="c23"
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
-        class="c16"
+        class="c24"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -1044,52 +1386,129 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
 `;
 
 exports[`<Amount /> should render body-small size Amount 1`] = `
-.c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
+.c2.c2.c2.c2.c2 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
+  opacity: 0.64;
 }
 
+<div>
+  <div
+    class="c0"
+    data-blade-component="amount"
+  >
+    <div
+      class="c1"
+      data-blade-component="base-box"
+    >
+      <span
+        class="c2"
+        data-blade-component="base-text"
+        opacity="0.64"
+      >
+        ₹
+      </span>
+      <span
+        class="c3"
+        data-blade-component="base-text"
+      >
+        1,000
+      </span>
+      <span
+        class="c4"
+        data-blade-component="base-text"
+        opacity="0.64"
+      >
+        .
+        00
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Amount /> should render body-small-bold size Amount 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .c1.c1.c1.c1.c1 {
@@ -1104,6 +1523,61 @@ exports[`<Amount /> should render body-small size Amount 1`] = `
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
+  position: relative;
+}
+
+.c2.c2.c2.c2.c2 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
+  margin-right: 2px;
+}
+
+.c3.c3.c3.c3.c3 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
 }
 
 <div>
@@ -1118,6 +1592,7 @@ exports[`<Amount /> should render body-small size Amount 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
@@ -1126,12 +1601,13 @@ exports[`<Amount /> should render body-small size Amount 1`] = `
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -1139,53 +1615,130 @@ exports[`<Amount /> should render body-small size Amount 1`] = `
 </div>
 `;
 
-exports[`<Amount /> should render body-small-bold size Amount 1`] = `
+exports[`<Amount /> should render currencyIndicator="currency-code" 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
+  opacity: 0.64;
 }
 
+<div>
+  <div
+    class="c0"
+    data-blade-component="amount"
+  >
+    <div
+      class="c1"
+      data-blade-component="base-box"
+    >
+      <span
+        class="c2"
+        data-blade-component="base-text"
+        opacity="0.64"
+      >
+        INR
+      </span>
+      <span
+        class="c3"
+        data-blade-component="base-text"
+      >
+        1,000
+      </span>
+      <span
+        class="c4"
+        data-blade-component="base-text"
+        opacity="0.64"
+      >
+        .
+        00
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Amount /> should render currencyIndicator="currency-symbol" 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .c1.c1.c1.c1.c1 {
@@ -1200,6 +1753,61 @@ exports[`<Amount /> should render body-small-bold size Amount 1`] = `
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
+  position: relative;
+}
+
+.c2.c2.c2.c2.c2 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
+  margin-right: 2px;
+}
+
+.c3.c3.c3.c3.c3 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 0.64;
 }
 
 <div>
@@ -1214,6 +1822,7 @@ exports[`<Amount /> should render body-small-bold size Amount 1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
@@ -1222,12 +1831,13 @@ exports[`<Amount /> should render body-small-bold size Amount 1`] = `
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
@@ -1235,39 +1845,173 @@ exports[`<Amount /> should render body-small-bold size Amount 1`] = `
 </div>
 `;
 
-exports[`<Amount /> should render negative intent Amount  1`] = `
+exports[`<Amount /> should render isStrikethrough={true} 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
+.c5.c5.c5.c5.c5 {
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  border-bottom-width: 1px;
+  border-bottom-color: hsla(212,39%,16%,1);
+  border-bottom-style: solid;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
 }
 
+@media screen and (min-width:320px) {
+  .c5.c5.c5.c5.c5 {
+    border-bottom-style: solid;
+  }
+}
+
+@media screen and (min-width:480px) {
+  .c5.c5.c5.c5.c5 {
+    border-bottom-style: solid;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c5.c5.c5.c5.c5 {
+    border-bottom-style: solid;
+  }
+}
+
+@media screen and (min-width:1024px) {
+  .c5.c5.c5.c5.c5 {
+    border-bottom-style: solid;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .c5.c5.c5.c5.c5 {
+    border-bottom-style: solid;
+  }
+}
+
+<div>
+  <div
+    class="c0"
+    data-blade-component="amount"
+  >
+    <div
+      class="c1"
+      data-blade-component="base-box"
+    >
+      <span
+        class="c2"
+        data-blade-component="base-text"
+        opacity="0.64"
+      >
+        ₹
+      </span>
+      <span
+        class="c3"
+        data-blade-component="base-text"
+      >
+        1,000
+      </span>
+      <span
+        class="c4"
+        data-blade-component="base-text"
+        opacity="0.64"
+      >
+        .
+        00
+      </span>
+      <div
+        class="c5"
+        data-blade-component="base-box"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Amount /> should render negative intent Amount  1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .c1.c1.c1.c1.c1 {
@@ -1282,6 +2026,43 @@ exports[`<Amount /> should render negative intent Amount  1`] = `
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
+  position: relative;
+}
+
+.c2.c2.c2.c2.c2 {
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  opacity: 1;
+  margin-right: 2px;
+}
+
+.c3.c3.c3.c3.c3 {
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 <div>
@@ -1296,6 +2077,7 @@ exports[`<Amount /> should render negative intent Amount  1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="1"
       >
         ₹
       </span>
@@ -1311,66 +2093,83 @@ exports[`<Amount /> should render negative intent Amount  1`] = `
 `;
 
 exports[`<Amount /> should render positive intent Amount  1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  position: relative;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
-}
-
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
+  opacity: 0.64;
 }
 
 <div>
@@ -1385,6 +2184,7 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
       <span
         class="c2"
         data-blade-component="base-text"
+        opacity="0.64"
       >
         ₹
       </span>
@@ -1393,12 +2193,13 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
         data-blade-component="base-text"
       >
         1,000
-        .
       </span>
       <span
         class="c4"
         data-blade-component="base-text"
+        opacity="0.64"
       >
+        .
         00
       </span>
     </div>
diff --git a/packages/blade/src/components/Amount/amountTokens.ts b/packages/blade/src/components/Amount/amountTokens.ts
index a492e4c6641..5b12eabc115 100644
--- a/packages/blade/src/components/Amount/amountTokens.ts
+++ b/packages/blade/src/components/Amount/amountTokens.ts
@@ -1,50 +1,105 @@
-import type { AmountProps } from './Amount';
 import type { FontSize, Typography } from '~tokens/global';
+import type { BaseTextProps } from '~components/Typography/BaseText/types';
 
-const affixFontSizes: Record<NonNullable<AmountProps['size']>, keyof FontSize> = {
-  'body-small': 75,
-  'body-small-bold': 75,
-  'body-medium': 75,
-  'body-medium-bold': 75,
-  'heading-small': 75,
-  'heading-small-bold': 75,
-  'heading-large': 100,
-  'heading-large-bold': 100,
-  'title-small': 300,
-  'title-medium': 400,
-} as const;
-
-const amountFontSizes: Record<NonNullable<AmountProps['size']>, keyof FontSize> = {
-  'body-small': 75,
-  'body-small-bold': 75,
-  'body-medium': 100,
-  'body-medium-bold': 100,
-  'heading-small': 200,
-  'heading-small-bold': 200,
-  'heading-large': 400,
-  'heading-large-bold': 400,
-  'title-small': 600,
-  'title-medium': 700,
-} as const;
+type AmountSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
+
+type AmountDisplayProps = {
+  type?: 'display';
+  size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge'>;
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
+};
+
+type AmountHeadingProps = {
+  type?: 'heading';
+  size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;
+};
+
+type AmountBodyProps = {
+  type?: 'body';
+  size?: Extract<AmountSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
+};
+
+type AmountTypeProps = AmountDisplayProps | AmountHeadingProps | AmountBodyProps;
+
+const normalAmountSizes: Record<
+  'body' | 'heading' | 'display',
+  Partial<Record<NonNullable<AmountTypeProps['size']>, keyof FontSize>>
+> = {
+  body: {
+    xsmall: 25,
+    small: 75,
+    medium: 100,
+    large: 200,
+  },
+  heading: {
+    small: 300,
+    medium: 400,
+    large: 500,
+    xlarge: 600,
+    '2xlarge': 700,
+  },
+  display: {
+    small: 800,
+    medium: 900,
+    large: 1000,
+    xlarge: 1100,
+  },
+};
+
+const subtleFontSizes: Record<
+  'body' | 'heading' | 'display',
+  Partial<Record<NonNullable<AmountTypeProps['size']>, keyof FontSize>>
+> = {
+  body: {
+    xsmall: normalAmountSizes.body.xsmall,
+    small: normalAmountSizes.body.xsmall,
+    medium: normalAmountSizes.body.xsmall,
+    large: normalAmountSizes.body.small,
+  },
+  heading: {
+    small: normalAmountSizes.body.small,
+    medium: normalAmountSizes.body.medium,
+    large: normalAmountSizes.body.large,
+    xlarge: normalAmountSizes.heading.medium,
+    '2xlarge': normalAmountSizes.heading.large,
+  },
+  display: {
+    small: normalAmountSizes.heading.xlarge,
+    medium: normalAmountSizes.heading['2xlarge'],
+    large: normalAmountSizes.heading['2xlarge'],
+    xlarge: normalAmountSizes.display.small,
+  },
+};
 
 const amountLineHeights: Record<
-  NonNullable<AmountProps['size']>,
-  keyof Typography['lineHeights']
+  'body' | 'heading' | 'display',
+  Partial<Record<NonNullable<AmountTypeProps['size']>, keyof Typography['lineHeights']>>
 > = {
-  'body-small': 50,
-  'body-small-bold': 50,
-  'body-medium': 100,
-  'body-medium-bold': 100,
-  'heading-small': 300,
-  'heading-small-bold': 300,
-  'heading-large': 400,
-  'heading-large-bold': 400,
-  'title-small': 500,
-  'title-medium': 600,
-} as const;
+  body: {
+    xsmall: 25,
+    small: 75,
+    medium: 100,
+    large: 200,
+  },
+  heading: {
+    small: 300,
+    medium: 400,
+    large: 500,
+    xlarge: 600,
+    '2xlarge': 700,
+  },
+  display: {
+    small: 800,
+    medium: 900,
+    large: 1000,
+    xlarge: 1100,
+  },
+};
 
 // All the supported currency codes are taken from Razorpay's Merchant Dashboard codebase
-const currencyPrefixMapping = {
+const currencyIndicatorMapping = {
   AED: { 'currency-symbol': 'د.إ', 'currency-code': 'AED' },
   ALL: { 'currency-symbol': 'Lek', 'currency-code': 'ALL' },
   AMD: { 'currency-symbol': '֏', 'currency-code': 'AMD' },
@@ -147,7 +202,7 @@ type CurrencyAbbreviation = {
   symbol: string;
 };
 
-type Currency = keyof typeof currencyPrefixMapping;
+type Currency = keyof typeof currencyIndicatorMapping;
 
 const getCurrencyAbbreviations = (currency: Currency): CurrencyAbbreviation[] => {
   if (currency === 'INR') {
@@ -165,12 +220,20 @@ const getCurrencyAbbreviations = (currency: Currency): CurrencyAbbreviation[] =>
   ];
 };
 
+const currencyPositionMapping: Record<string, string> = {
+  DZD: 'right',
+  BHD: 'right',
+  OMR: 'right',
+  KWD: 'right',
+};
+
 export {
-  amountFontSizes,
+  subtleFontSizes,
+  normalAmountSizes,
   amountLineHeights,
-  affixFontSizes,
-  currencyPrefixMapping,
+  currencyPositionMapping,
+  currencyIndicatorMapping,
   getCurrencyAbbreviations,
 };
 
-export type { Currency };
+export type { Currency, AmountBodyProps, AmountDisplayProps, AmountHeadingProps, AmountTypeProps };
diff --git a/packages/blade/src/components/Badge/Badge.stories.tsx b/packages/blade/src/components/Badge/Badge.stories.tsx
index 8b80744585b..82308f19061 100644
--- a/packages/blade/src/components/Badge/Badge.stories.tsx
+++ b/packages/blade/src/components/Badge/Badge.stories.tsx
@@ -9,17 +9,11 @@ import { Text as BladeText } from '~components/Typography';
 import { Sandbox } from '~utils/storybook/Sandbox';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
-import { capitalize } from '~utils/lodashButBetter/capitalize';
 
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8110%3A417',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=9727%3A118573',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8110%3A417"
       componentName="Badge"
       componentDescription="Badges are used to show small amount of color coded metadata, which are ideal for getting user attention."
     >
@@ -51,7 +45,8 @@ export default {
     ...getStyledPropsArgTypes(),
     icon: {
       name: 'icon',
-      type: 'select',
+      // weird TS error
+      type: 'select' as 'string',
       options: Object.keys(iconMap),
       mapping: iconMap,
     },
@@ -70,23 +65,17 @@ const BadgeTemplate: StoryFn<typeof BadgeComponent> = ({ children, ...args }) =>
 export const Badge = BadgeTemplate.bind({});
 Badge.args = {
   children: 'Label',
-  variant: 'neutral',
-  fontWeight: 'regular',
-  contrast: 'low',
+  color: 'neutral',
   size: 'small',
 };
 Badge.storyName = 'Default';
 
 const BadgesWithVariantTemplate: StoryFn<typeof BadgeComponent> = ({ ...args }) => {
-  const variants = ['positive', 'negative', 'notice', 'information', 'neutral', 'blue'] as const;
-
-  const getLabel = (label: string): string => {
-    return args.fontWeight === 'bold' ? label.toUpperCase() : capitalize(label);
-  };
+  const variants = ['positive', 'negative', 'notice', 'information', 'neutral', 'primary'] as const;
 
   return (
     <BaseBox display="flex" flexDirection="column">
-      <BladeText>Low Contrast</BladeText>
+      <BladeText>Subtle Emphasis</BladeText>
       <BaseBox
         display="flex"
         flexDirection="row"
@@ -97,17 +86,17 @@ const BadgesWithVariantTemplate: StoryFn<typeof BadgeComponent> = ({ ...args })
         {variants.map((variant) => (
           <BadgeComponent
             {...args}
-            variant={variant}
-            contrast="low"
+            color={variant}
             key={variant}
+            emphasis="subtle"
             marginRight="spacing.3"
             marginTop="spacing.2"
           >
-            {getLabel(variant)}
+            {variant}
           </BadgeComponent>
         ))}
       </BaseBox>
-      <BladeText>High Contrast</BladeText>
+      <BladeText>Intense Emphasis</BladeText>
       <BaseBox
         display="flex"
         flexDirection="row"
@@ -118,13 +107,13 @@ const BadgesWithVariantTemplate: StoryFn<typeof BadgeComponent> = ({ ...args })
         {variants.map((variant) => (
           <BadgeComponent
             {...args}
-            variant={variant}
-            contrast="high"
+            color={variant}
             key={variant}
+            emphasis="intense"
             marginRight="spacing.3"
             marginTop="spacing.2"
           >
-            {getLabel(variant)}
+            {variant}
           </BadgeComponent>
         ))}
       </BaseBox>
@@ -168,9 +157,3 @@ BadgeWithIcon.parameters = {
   },
 };
 BadgeWithIcon.storyName = 'With Icon';
-
-export const BadgeBold = BadgesWithVariantTemplate.bind({});
-BadgeBold.args = {
-  fontWeight: 'bold',
-};
-BadgeBold.storyName = 'Bold Font';
diff --git a/packages/blade/src/components/Badge/Badge.tsx b/packages/blade/src/components/Badge/Badge.tsx
index 8867a5c646f..baa2763afa6 100644
--- a/packages/blade/src/components/Badge/Badge.tsx
+++ b/packages/blade/src/components/Badge/Badge.tsx
@@ -1,10 +1,10 @@
 import type { ReactElement } from 'react';
 import type { StyledBadgeProps } from './types';
 import { StyledBadge } from './StyledBadge';
-import { iconPadding, iconSize, horizontalPadding, verticalPadding } from './badgeTokens';
+import { iconPadding, iconSize, horizontalPadding, badgeHeight } from './badgeTokens';
 import type { IconComponent, IconProps } from '~components/Icons';
 import BaseBox from '~components/Box/BaseBox';
-import type { Feedback } from '~tokens/theme/theme';
+import type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';
 import type { BaseTextProps } from '~components/Typography/BaseText/types';
 import { Text } from '~components/Typography';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
@@ -13,7 +13,7 @@ import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { StringChildrenType, TestID } from '~utils/types';
 import { getStringFromReactText } from '~src/utils/getStringChildren';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
-import { isReactNative } from '~utils';
+import { isReactNative, makeSize } from '~utils';
 import { throwBladeError } from '~utils/logger';
 
 type BadgeProps = {
@@ -22,25 +22,18 @@ type BadgeProps = {
    *
    */
   children: StringChildrenType;
-  /**
-   * This prop is deprecated in favor of `color`.
-   *
-   * @deprecated Use the `color` prop instead
-   * @default 'neutral'
-   */
-  variant?: Feedback | 'blue';
   /**
    * Sets the color of the badge.
    *
    * @default 'neutral'
    */
-  color?: Feedback | 'default';
+  color?: FeedbackColors | 'primary';
   /**
    * Sets the contrast of the badge.
    *
-   * @default 'low'
+   * @default 'subtle'
    */
-  contrast?: 'low' | 'high';
+  emphasis?: SubtleOrIntense;
   /**
    * Sets the size of the badge.
    *
@@ -53,20 +46,9 @@ type BadgeProps = {
    *
    */
   icon?: IconComponent;
-  /**
-   * Sets the fontWeight of the label.
-   *
-   * @default 'regular'
-   */
-  fontWeight?: 'regular' | 'bold';
 } & TestID &
   StyledPropsBlade;
 
-const isFeedbackVariant = (variant: string): variant is Feedback => {
-  const feedbackVariants = ['information', 'negative', 'neutral', 'notice', 'positive'];
-  return feedbackVariants.includes(variant);
-};
-
 type ColorProps = {
   iconColor: IconProps['color'];
   textColor: BaseTextProps['color'];
@@ -74,39 +56,43 @@ type ColorProps = {
 };
 
 const getColorProps = ({
-  variant,
-  contrast,
+  color,
+  emphasis,
 }: {
-  variant: NonNullable<BadgeProps['color'] | 'blue'>;
-  contrast: NonNullable<BadgeProps['contrast']>;
+  color: NonNullable<BadgeProps['color']>;
+  emphasis: NonNullable<BadgeProps['emphasis']>;
 }): ColorProps => {
-  const badgeVariant = variant === 'default' ? 'blue' : variant;
   const props: ColorProps = {
-    iconColor: 'feedback.icon.neutral.lowContrast',
-    textColor: 'feedback.text.neutral.lowContrast',
-    backgroundColor: 'feedback.background.neutral.lowContrast',
+    iconColor: 'feedback.icon.neutral.intense',
+    textColor: 'feedback.text.neutral.intense',
+    backgroundColor: 'feedback.background.neutral.subtle',
   };
-  if (isFeedbackVariant(badgeVariant)) {
-    props.iconColor = `feedback.icon.${badgeVariant}.${contrast}Contrast`;
-    props.textColor = `feedback.text.${badgeVariant}.${contrast}Contrast`;
-    props.backgroundColor = `feedback.background.${badgeVariant}.${contrast}Contrast`;
+
+  if (color === 'primary') {
+    // primary color badge
+    props.textColor =
+      emphasis === 'intense' ? `surface.text.staticWhite.normal` : `surface.text.primary.normal`;
+    props.iconColor =
+      emphasis === 'intense' ? `surface.icon.staticWhite.normal` : `surface.icon.primary.normal`;
+    props.backgroundColor = `surface.background.primary.${emphasis}`;
   } else {
-    props.iconColor = `badge.icon.${badgeVariant}.${contrast}Contrast`;
-    props.textColor = `badge.text.${badgeVariant}.${contrast}Contrast`;
-    props.backgroundColor = `badge.background.${badgeVariant}.${contrast}Contrast`;
+    // feedback colors badge
+    props.textColor =
+      emphasis === 'intense' ? `surface.text.staticWhite.normal` : `feedback.text.${color}.intense`;
+    props.iconColor =
+      emphasis === 'intense' ? `surface.icon.staticWhite.normal` : `feedback.icon.${color}.intense`;
+    props.backgroundColor = `feedback.background.${color}.${emphasis}`;
   }
+
   return props;
 };
 
 const _Badge = ({
   children,
-  contrast = 'low',
-  fontWeight = 'regular',
+  emphasis = 'subtle',
   icon: Icon,
   size = 'medium',
-  // TODO: Remove variant prop in next major release in favor of color prop
-  variant = 'neutral',
-  color,
+  color = 'neutral',
   testID,
   ...styledProps
 }: BadgeProps): ReactElement => {
@@ -120,10 +106,9 @@ const _Badge = ({
     }
   }
 
-  const badgeVariant = color ?? variant;
   const { backgroundColor, iconColor, textColor } = getColorProps({
-    variant: badgeVariant,
-    contrast,
+    color,
+    emphasis,
   });
 
   const badgeTextSizes = {
@@ -147,12 +132,14 @@ const _Badge = ({
       {...metaAttribute({ name: MetaConstants.Badge, testID })}
       {...getStyledProps(styledProps)}
     >
-      <StyledBadge backgroundColor={backgroundColor} size={size} textAlign={'left' as never}>
+      <StyledBadge
+        height={makeSize(badgeHeight[size])}
+        backgroundColor={backgroundColor}
+        size={size}
+        textAlign={'left' as never}
+      >
         <BaseBox
-          paddingRight={horizontalPadding[size]}
-          paddingLeft={horizontalPadding[size]}
-          paddingTop={verticalPadding[size]}
-          paddingBottom={verticalPadding[size]}
+          paddingX={horizontalPadding[size]}
           display="flex"
           flexDirection="row"
           justifyContent="center"
@@ -164,13 +151,7 @@ const _Badge = ({
               <Icon color={iconColor} size={iconSize[size]} />
             </BaseBox>
           ) : null}
-          <Text
-            {...badgeTextSizes[size]}
-            type="normal"
-            weight={fontWeight}
-            truncateAfterLines={1}
-            color={textColor}
-          >
+          <Text {...badgeTextSizes[size]} weight="medium" truncateAfterLines={1} color={textColor}>
             {children}
           </Text>
         </BaseBox>
diff --git a/packages/blade/src/components/Badge/__tests__/Badge.native.test.tsx b/packages/blade/src/components/Badge/__tests__/Badge.native.test.tsx
index 47ba78d334e..feaaf6f4cac 100644
--- a/packages/blade/src/components/Badge/__tests__/Badge.native.test.tsx
+++ b/packages/blade/src/components/Badge/__tests__/Badge.native.test.tsx
@@ -7,7 +7,7 @@ beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
 afterAll(() => jest.restoreAllMocks());
 
 const colors: BadgeProps['color'][] = [
-  'default',
+  'primary',
   'information',
   'negative',
   'neutral',
@@ -57,126 +57,120 @@ describe('<Badge />', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render Badge with bold font', () => {
-    const label = 'LABEL';
-    const { toJSON } = renderWithTheme(<Badge fontWeight="bold">{label}</Badge>);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render low contrast positive variant Badge', () => {
+  it('should render subtle emphasis positive color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="positive" contrast="low">
+      <Badge color="positive" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast positive variant Badge', () => {
+  it('should render intense emphasis positive color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="positive" contrast="high">
+      <Badge color="positive" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast negative variant Badge', () => {
+  it('should render subtle emphasis negative color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="negative" contrast="low">
+      <Badge color="negative" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast negative variant Badge', () => {
+  it('should render intense emphasis negative color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="negative" contrast="high">
+      <Badge color="negative" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast notice variant Badge', () => {
+  it('should render subtle emphasis notice color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="notice" contrast="low">
+      <Badge color="notice" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast notice variant Badge', () => {
+  it('should render intense emphasis notice color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="notice" contrast="high">
+      <Badge color="notice" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast information variant Badge', () => {
+  it('should render subtle emphasis information color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="information" contrast="low">
+      <Badge color="information" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast information variant Badge', () => {
+  it('should render intense emphasis information color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="information" contrast="high">
+      <Badge color="information" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast neutral variant Badge', () => {
+  it('should render subtle emphasis neutral color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="neutral" contrast="low">
+      <Badge color="neutral" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast neutral variant Badge', () => {
+  it('should render intense emphasis neutral color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="neutral" contrast="high">
+      <Badge color="neutral" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast blue variant Badge', () => {
+  it('should render subtle emphasis primary color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="blue" contrast="low">
+      <Badge color="primary" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast blue variant Badge', () => {
+  it('should render intense emphasis primary color Badge', () => {
     const label = 'Label';
     const { toJSON } = renderWithTheme(
-      <Badge variant="blue" contrast="high">
+      <Badge color="primary" emphasis="intense">
         {label}
       </Badge>,
     );
@@ -184,20 +178,20 @@ describe('<Badge />', () => {
   });
 
   colors.forEach((color) => {
-    it(`should render low contrast ${color} color Badge`, () => {
+    it(`should render subtle emphasis ${color} color Badge`, () => {
       const label = 'Label';
       const { toJSON } = renderWithTheme(
-        <Badge color={color} contrast="low">
+        <Badge color={color} emphasis="subtle">
           {label}
         </Badge>,
       );
       expect(toJSON()).toMatchSnapshot();
     });
 
-    it(`should render high contrast ${color} color Badge`, () => {
+    it(`should render intense emphasis ${color} color Badge`, () => {
       const label = 'Label';
       const { toJSON } = renderWithTheme(
-        <Badge color={color} contrast="high">
+        <Badge color={color} emphasis="intense">
           {label}
         </Badge>,
       );
diff --git a/packages/blade/src/components/Badge/__tests__/Badge.ssr.test.tsx b/packages/blade/src/components/Badge/__tests__/Badge.ssr.test.tsx
index cb18a77edce..2c326065870 100644
--- a/packages/blade/src/components/Badge/__tests__/Badge.ssr.test.tsx
+++ b/packages/blade/src/components/Badge/__tests__/Badge.ssr.test.tsx
@@ -6,7 +6,7 @@ describe('<Badge />', () => {
   it('should render Badge on server', () => {
     const label = 'Label';
     const { container } = renderWithSSR(
-      <Badge icon={InfoIcon} contrast="low" size="large" fontWeight="bold">
+      <Badge icon={InfoIcon} emphasis="subtle" size="large">
         {label}
       </Badge>,
     );
diff --git a/packages/blade/src/components/Badge/__tests__/Badge.web.test.tsx b/packages/blade/src/components/Badge/__tests__/Badge.web.test.tsx
index ff297301816..eada2429c1f 100644
--- a/packages/blade/src/components/Badge/__tests__/Badge.web.test.tsx
+++ b/packages/blade/src/components/Badge/__tests__/Badge.web.test.tsx
@@ -7,7 +7,7 @@ beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
 afterAll(() => jest.restoreAllMocks());
 
 const colors: BadgeProps['color'][] = [
-  'default',
+  'primary',
   'information',
   'negative',
   'neutral',
@@ -57,126 +57,120 @@ describe('<Badge />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should render Badge with bold font', () => {
-    const label = 'LABEL';
-    const { container } = renderWithTheme(<Badge fontWeight="bold">{label}</Badge>);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render low contrast positive variant Badge', () => {
+  it('should render low emphasis positive color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="positive" contrast="low">
+      <Badge color="positive" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast positive variant Badge', () => {
+  it('should render high emphasis positive color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="positive" contrast="high">
+      <Badge color="positive" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast negative variant Badge', () => {
+  it('should render low emphasis negative color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="negative" contrast="low">
+      <Badge color="negative" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast negative variant Badge', () => {
+  it('should render high emphasis negative color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="negative" contrast="high">
+      <Badge color="negative" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast notice variant Badge', () => {
+  it('should render low emphasis notice color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="notice" contrast="low">
+      <Badge color="notice" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast notice variant Badge', () => {
+  it('should render high emphasis notice color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="notice" contrast="high">
+      <Badge color="notice" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast information variant Badge', () => {
+  it('should render low emphasis information color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="information" contrast="low">
+      <Badge color="information" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast information variant Badge', () => {
+  it('should render high emphasis information color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="information" contrast="high">
+      <Badge color="information" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast neutral variant Badge', () => {
+  it('should render low emphasis neutral color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="neutral" contrast="low">
+      <Badge color="neutral" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast neutral variant Badge', () => {
+  it('should render high emphasis neutral color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="neutral" contrast="high">
+      <Badge color="neutral" emphasis="intense">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast blue variant Badge', () => {
+  it('should render low emphasis primary color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="blue" contrast="low">
+      <Badge color="primary" emphasis="subtle">
         {label}
       </Badge>,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast blue variant Badge', () => {
+  it('should render high emphasis primary color Badge', () => {
     const label = 'Label';
     const { container } = renderWithTheme(
-      <Badge variant="blue" contrast="high">
+      <Badge color="primary" emphasis="intense">
         {label}
       </Badge>,
     );
@@ -184,20 +178,20 @@ describe('<Badge />', () => {
   });
 
   colors.forEach((color) => {
-    it(`should render low contrast ${color} color Badge`, () => {
+    it(`should render low emphasis ${color} color Badge`, () => {
       const label = 'Label';
       const { container } = renderWithTheme(
-        <Badge color={color} contrast="low">
+        <Badge color={color} emphasis="subtle">
           {label}
         </Badge>,
       );
       expect(container).toMatchSnapshot();
     });
 
-    it(`should render high contrast ${color} color Badge`, () => {
+    it(`should render high emphasis ${color} color Badge`, () => {
       const label = 'Label';
       const { container } = renderWithTheme(
-        <Badge color={color} contrast="high">
+        <Badge color={color} emphasis="intense">
           {label}
         </Badge>,
       );
diff --git a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.native.test.tsx.snap b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.native.test.tsx.snap
index ecb25747f99..d9ce6c72932 100644
--- a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.native.test.tsx.snap
+++ b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.native.test.tsx.snap
@@ -20,18 +20,20 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -55,10 +57,8 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
@@ -118,7 +118,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
             >
               <RNSVGPath
                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                fill={4282603381}
+                fill={4280563015}
                 propList={
                   [
                     "fill",
@@ -127,7 +127,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
               />
               <RNSVGPath
                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                fill={4282603381}
+                fill={4280563015}
                 propList={
                   [
                     "fill",
@@ -137,7 +137,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
               <RNSVGPath
                 clipRule={0}
                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                fill={4282603381}
+                fill={4280563015}
                 fillRule={0}
                 propList={
                   [
@@ -151,23 +151,24 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
         </View>
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -189,109 +190,6 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render Badge with bold font 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="badge"
-    display="flex"
-    style={
-      [
-        {
-          "display": "flex",
-        },
-      ]
-    }
-  >
-    <View
-      backgroundColor="feedback.background.neutral.lowContrast"
-      data-blade-component="base-box"
-      size="medium"
-      style={
-        [
-          {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-            "textAlign": "left",
-          },
-          {
-            "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-            "borderRadius": 9999,
-            "display": "flex",
-            "flexWrap": "nowrap",
-          },
-        ]
-      }
-      textAlign="left"
-    >
-      <View
-        alignItems="center"
-        data-blade-component="base-box"
-        display="flex"
-        flexDirection="row"
-        justifyContent="center"
-        overflow="hidden"
-        style={
-          [
-            {
-              "alignItems": "center",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "paddingBottom": 2,
-              "paddingLeft": 8,
-              "paddingRight": 8,
-              "paddingTop": 2,
-            },
-          ]
-        }
-      >
-        <Text
-          accessible={true}
-          color="feedback.text.neutral.lowContrast"
-          data-blade-component="text"
-          fontFamily="text"
-          fontSize={75}
-          fontStyle="normal"
-          fontWeight="bold"
-          lineHeight={50}
-          numberOfLines={1}
-          style={
-            [
-              {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
-                "fontStyle": "normal",
-                "fontWeight": "700",
-                "lineHeight": 16,
-                "marginBottom": 0,
-                "marginLeft": 0,
-                "marginRight": 0,
-                "marginTop": 0,
-                "paddingBottom": 0,
-                "paddingLeft": 0,
-                "paddingRight": 0,
-                "paddingTop": 0,
-                "textDecorationLine": "none",
-              },
-            ]
-          }
-        >
-          LABEL
-        </Text>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
 exports[`<Badge /> should render Badge with default props 1`] = `
 <View
   style={
@@ -312,18 +210,20 @@ exports[`<Badge /> should render Badge with default props 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -347,33 +247,32 @@ exports[`<Badge /> should render Badge with default props 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -395,7 +294,7 @@ exports[`<Badge /> should render Badge with default props 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
+exports[`<Badge /> should render intense emphasis information color Badge 1`] = `
 <View
   style={
     {
@@ -415,18 +314,20 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="badge.background.blue.highContrast"
+      backgroundColor="feedback.background.information.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(218, 89%, 51%, 1)",
+            "backgroundColor": "hsla(200, 84%, 44%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(218, 89%, 51%, 1)",
+            "backgroundColor": "hsla(200, 84%, 44%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -450,33 +351,32 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="badge.text.blue.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -498,7 +398,7 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast default color Badge 1`] = `
+exports[`<Badge /> should render intense emphasis information color Badge 2`] = `
 <View
   style={
     {
@@ -518,18 +418,20 @@ exports[`<Badge /> should render high contrast default color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="badge.background.blue.highContrast"
+      backgroundColor="feedback.background.information.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(218, 89%, 51%, 1)",
+            "backgroundColor": "hsla(200, 84%, 44%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(218, 89%, 51%, 1)",
+            "backgroundColor": "hsla(200, 84%, 44%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -553,33 +455,32 @@ exports[`<Badge /> should render high contrast default color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="badge.text.blue.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -601,7 +502,7 @@ exports[`<Badge /> should render high contrast default color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast information color Badge 1`] = `
+exports[`<Badge /> should render intense emphasis negative color Badge 1`] = `
 <View
   style={
     {
@@ -621,18 +522,20 @@ exports[`<Badge /> should render high contrast information color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.information.highContrast"
+      backgroundColor="feedback.background.negative.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(193, 100%, 35%, 1)",
+            "backgroundColor": "hsla(4, 74%, 49%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(193, 100%, 35%, 1)",
+            "backgroundColor": "hsla(4, 74%, 49%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -656,33 +559,32 @@ exports[`<Badge /> should render high contrast information color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.information.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -704,7 +606,7 @@ exports[`<Badge /> should render high contrast information color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast information variant Badge 1`] = `
+exports[`<Badge /> should render intense emphasis negative color Badge 2`] = `
 <View
   style={
     {
@@ -724,18 +626,20 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.information.highContrast"
+      backgroundColor="feedback.background.negative.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(193, 100%, 35%, 1)",
+            "backgroundColor": "hsla(4, 74%, 49%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(193, 100%, 35%, 1)",
+            "backgroundColor": "hsla(4, 74%, 49%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -759,33 +663,32 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.information.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -807,7 +710,7 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast negative color Badge 1`] = `
+exports[`<Badge /> should render intense emphasis neutral color Badge 1`] = `
 <View
   style={
     {
@@ -827,18 +730,20 @@ exports[`<Badge /> should render high contrast negative color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.negative.highContrast"
+      backgroundColor="feedback.background.neutral.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(8, 73%, 47%, 1)",
+            "backgroundColor": "hsla(211, 29%, 26%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(8, 73%, 47%, 1)",
+            "backgroundColor": "hsla(211, 29%, 26%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -862,33 +767,32 @@ exports[`<Badge /> should render high contrast negative color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.negative.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -910,7 +814,7 @@ exports[`<Badge /> should render high contrast negative color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
+exports[`<Badge /> should render intense emphasis neutral color Badge 2`] = `
 <View
   style={
     {
@@ -930,18 +834,20 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.negative.highContrast"
+      backgroundColor="feedback.background.neutral.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(8, 73%, 47%, 1)",
+            "backgroundColor": "hsla(211, 29%, 26%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(8, 73%, 47%, 1)",
+            "backgroundColor": "hsla(211, 29%, 26%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -965,33 +871,32 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.negative.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1013,7 +918,7 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast neutral color Badge 1`] = `
+exports[`<Badge /> should render intense emphasis notice color Badge 1`] = `
 <View
   style={
     {
@@ -1033,18 +938,20 @@ exports[`<Badge /> should render high contrast neutral color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.highContrast"
+      backgroundColor="feedback.background.notice.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 33%, 29%, 1)",
+            "backgroundColor": "hsla(25, 90%, 48%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 33%, 29%, 1)",
+            "backgroundColor": "hsla(25, 90%, 48%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1068,33 +975,32 @@ exports[`<Badge /> should render high contrast neutral color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1116,7 +1022,7 @@ exports[`<Badge /> should render high contrast neutral color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
+exports[`<Badge /> should render intense emphasis notice color Badge 2`] = `
 <View
   style={
     {
@@ -1136,18 +1042,20 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.highContrast"
+      backgroundColor="feedback.background.notice.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 33%, 29%, 1)",
+            "backgroundColor": "hsla(25, 90%, 48%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 33%, 29%, 1)",
+            "backgroundColor": "hsla(25, 90%, 48%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1171,33 +1079,32 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1219,7 +1126,7 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast notice color Badge 1`] = `
+exports[`<Badge /> should render intense emphasis positive color Badge 1`] = `
 <View
   style={
     {
@@ -1239,18 +1146,20 @@ exports[`<Badge /> should render high contrast notice color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.notice.highContrast"
+      backgroundColor="feedback.background.positive.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(38, 97%, 38%, 1)",
+            "backgroundColor": "hsla(150, 100%, 32%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(38, 97%, 38%, 1)",
+            "backgroundColor": "hsla(150, 100%, 32%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1274,33 +1183,32 @@ exports[`<Badge /> should render high contrast notice color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.notice.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1322,7 +1230,7 @@ exports[`<Badge /> should render high contrast notice color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
+exports[`<Badge /> should render intense emphasis positive color Badge 2`] = `
 <View
   style={
     {
@@ -1342,18 +1250,20 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.notice.highContrast"
+      backgroundColor="feedback.background.positive.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(38, 97%, 38%, 1)",
+            "backgroundColor": "hsla(150, 100%, 32%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(38, 97%, 38%, 1)",
+            "backgroundColor": "hsla(150, 100%, 32%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1377,33 +1287,32 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.notice.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1425,7 +1334,7 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast positive color Badge 1`] = `
+exports[`<Badge /> should render intense emphasis primary color Badge 1`] = `
 <View
   style={
     {
@@ -1445,18 +1354,20 @@ exports[`<Badge /> should render high contrast positive color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.positive.highContrast"
+      backgroundColor="surface.background.primary.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(160, 100%, 26%, 1)",
+            "backgroundColor": "hsla(227, 100%, 59%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(160, 100%, 26%, 1)",
+            "backgroundColor": "hsla(227, 100%, 59%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1480,33 +1391,32 @@ exports[`<Badge /> should render high contrast positive color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1528,7 +1438,7 @@ exports[`<Badge /> should render high contrast positive color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
+exports[`<Badge /> should render intense emphasis primary color Badge 2`] = `
 <View
   style={
     {
@@ -1548,18 +1458,20 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.positive.highContrast"
+      backgroundColor="surface.background.primary.intense"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(160, 100%, 26%, 1)",
+            "backgroundColor": "hsla(227, 100%, 59%, 1)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(160, 100%, 26%, 1)",
+            "backgroundColor": "hsla(227, 100%, 59%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1583,33 +1495,32 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1651,18 +1562,20 @@ exports[`<Badge /> should render large size Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      height="24px"
       size="large"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "height": 24,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1686,33 +1599,32 @@ exports[`<Badge /> should render large size Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 4,
               "paddingLeft": 12,
               "paddingRight": 12,
-              "paddingTop": 4,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1734,7 +1646,7 @@ exports[`<Badge /> should render large size Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
+exports[`<Badge /> should render medium size Badge 1`] = `
 <View
   style={
     {
@@ -1754,18 +1666,20 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="badge.background.blue.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1789,33 +1703,32 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="badge.text.blue.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(218, 89%, 51%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1837,7 +1750,7 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast default color Badge 1`] = `
+exports[`<Badge /> should render small size Badge 1`] = `
 <View
   style={
     {
@@ -1857,18 +1770,20 @@ exports[`<Badge /> should render low contrast default color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="badge.background.blue.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
-      size="medium"
+      height="16px"
+      size="small"
       style={
         [
           {
-            "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "height": 16,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1892,33 +1807,32 @@ exports[`<Badge /> should render low contrast default color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="badge.text.blue.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
-          fontSize={75}
+          fontSize={25}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={25}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(218, 89%, 51%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 14,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1940,7 +1854,7 @@ exports[`<Badge /> should render low contrast default color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast information color Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis information color Badge 1`] = `
 <View
   style={
     {
@@ -1960,18 +1874,20 @@ exports[`<Badge /> should render low contrast information color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.information.lowContrast"
+      backgroundColor="feedback.background.information.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
+            "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
+            "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1995,33 +1911,32 @@ exports[`<Badge /> should render low contrast information color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.information.lowContrast"
+          color="feedback.text.information.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(193, 100%, 35%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(200, 84%, 37%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2043,7 +1958,7 @@ exports[`<Badge /> should render low contrast information color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast information variant Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis information color Badge 2`] = `
 <View
   style={
     {
@@ -2063,18 +1978,20 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.information.lowContrast"
+      backgroundColor="feedback.background.information.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
+            "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
+            "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2098,33 +2015,32 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.information.lowContrast"
+          color="feedback.text.information.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(193, 100%, 35%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(200, 84%, 37%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2146,7 +2062,7 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast negative color Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis negative color Badge 1`] = `
 <View
   style={
     {
@@ -2166,18 +2082,20 @@ exports[`<Badge /> should render low contrast negative color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.negative.lowContrast"
+      backgroundColor="feedback.background.negative.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
+            "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
+            "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2201,33 +2119,32 @@ exports[`<Badge /> should render low contrast negative color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.negative.lowContrast"
+          color="feedback.text.negative.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(8, 73%, 47%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(4, 74%, 49%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2249,7 +2166,7 @@ exports[`<Badge /> should render low contrast negative color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis negative color Badge 2`] = `
 <View
   style={
     {
@@ -2269,18 +2186,20 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.negative.lowContrast"
+      backgroundColor="feedback.background.negative.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
+            "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
+            "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2304,33 +2223,32 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.negative.lowContrast"
+          color="feedback.text.negative.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(8, 73%, 47%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(4, 74%, 49%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2352,7 +2270,7 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast neutral color Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis neutral color Badge 1`] = `
 <View
   style={
     {
@@ -2372,18 +2290,20 @@ exports[`<Badge /> should render low contrast neutral color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2407,33 +2327,32 @@ exports[`<Badge /> should render low contrast neutral color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2455,7 +2374,7 @@ exports[`<Badge /> should render low contrast neutral color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis neutral color Badge 2`] = `
 <View
   style={
     {
@@ -2475,18 +2394,20 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2510,33 +2431,32 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2558,7 +2478,7 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast notice color Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis notice color Badge 1`] = `
 <View
   style={
     {
@@ -2578,18 +2498,20 @@ exports[`<Badge /> should render low contrast notice color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.notice.lowContrast"
+      backgroundColor="feedback.background.notice.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
+            "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
+            "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2613,33 +2535,32 @@ exports[`<Badge /> should render low contrast notice color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.notice.lowContrast"
+          color="feedback.text.notice.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(38, 97%, 38%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(25, 85%, 42%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2661,7 +2582,7 @@ exports[`<Badge /> should render low contrast notice color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis notice color Badge 2`] = `
 <View
   style={
     {
@@ -2681,18 +2602,20 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.notice.lowContrast"
+      backgroundColor="feedback.background.notice.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
+            "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
+            "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2716,33 +2639,32 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.notice.lowContrast"
+          color="feedback.text.notice.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(38, 97%, 38%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(25, 85%, 42%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2764,7 +2686,7 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast positive color Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis positive color Badge 1`] = `
 <View
   style={
     {
@@ -2784,18 +2706,20 @@ exports[`<Badge /> should render low contrast positive color Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.positive.lowContrast"
+      backgroundColor="feedback.background.positive.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2819,33 +2743,32 @@ exports[`<Badge /> should render low contrast positive color Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.lowContrast"
+          color="feedback.text.positive.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(160, 100%, 26%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(150, 100%, 27%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2867,7 +2790,7 @@ exports[`<Badge /> should render low contrast positive color Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis positive color Badge 2`] = `
 <View
   style={
     {
@@ -2887,18 +2810,20 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.positive.lowContrast"
+      backgroundColor="feedback.background.positive.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2922,33 +2847,32 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.lowContrast"
+          color="feedback.text.positive.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(160, 100%, 26%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(150, 100%, 27%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2970,7 +2894,7 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render medium size Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis primary color Badge 1`] = `
 <View
   style={
     {
@@ -2990,18 +2914,20 @@ exports[`<Badge /> should render medium size Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="surface.background.primary.subtle"
       data-blade-component="base-box"
+      height="20px"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -3025,33 +2951,32 @@ exports[`<Badge /> should render medium size Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="surface.text.primary.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(227, 100%, 59%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -3073,7 +2998,7 @@ exports[`<Badge /> should render medium size Badge 1`] = `
 </View>
 `;
 
-exports[`<Badge /> should render small size Badge 1`] = `
+exports[`<Badge /> should render subtle emphasis primary color Badge 2`] = `
 <View
   style={
     {
@@ -3093,18 +3018,20 @@ exports[`<Badge /> should render small size Badge 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="surface.background.primary.subtle"
       data-blade-component="base-box"
-      size="small"
+      height="20px"
+      size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+            "height": 20,
             "textAlign": "left",
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -3128,33 +3055,32 @@ exports[`<Badge /> should render small size Badge 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 0,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 0,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="surface.text.primary.normal"
           data-blade-component="text"
           fontFamily="text"
-          fontSize={25}
+          fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 10,
+                "color": "hsla(227, 100%, 59%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
diff --git a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.ssr.test.tsx.snap b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.ssr.test.tsx.snap
index 950150bb8c3..974c85f372f 100644
--- a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Badge /> should render Badge on server 1`] = `"<div id="root"><div data-blade-component="badge" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 fxewIe fvgGAr"><div data-blade-component="base-box" class="BaseBox-bmPWx cyfoAS"><div data-blade-component="base-box" class="BaseBox-bmPWx beXUdP"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(216, 27%, 36%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bQNZjC" data-blade-component="text">Label</p></div></div></div></div>"`;
+exports[`<Badge /> should render Badge on server 1`] = `"<div id="root"><div data-blade-component="badge" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 fLEzRp bMPocw"><div data-blade-component="base-box" class="BaseBox-bmPWx eVPYci"><div data-blade-component="base-box" class="BaseBox-bmPWx beXUdP"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 33%, 21%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 33%, 21%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 33%, 21%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO TgZUv" data-blade-component="text">Label</p></div></div></div></div>"`;
 
 exports[`<Badge /> should render Badge on server 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -12,7 +12,8 @@ exports[`<Badge /> should render Badge on server 2`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 24px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -32,8 +33,6 @@ exports[`<Badge /> should render Badge on server 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 4px;
-  padding-bottom: 4px;
   padding-right: 12px;
   padding-left: 12px;
 }
@@ -47,7 +46,7 @@ exports[`<Badge /> should render Badge on server 2`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -62,14 +61,18 @@ exports[`<Badge /> should render Badge on server 2`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -110,18 +113,18 @@ exports[`<Badge /> should render Badge on server 2`] = `
             <path
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               data-blade-component="svg-path"
-              fill="hsla(216, 27%, 36%, 1)"
+              fill="hsla(211, 33%, 21%, 1)"
             />
             <path
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               data-blade-component="svg-path"
-              fill="hsla(216, 27%, 36%, 1)"
+              fill="hsla(211, 33%, 21%, 1)"
             />
             <path
               clip-rule="evenodd"
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
               data-blade-component="svg-path"
-              fill="hsla(216, 27%, 36%, 1)"
+              fill="hsla(211, 33%, 21%, 1)"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.web.test.tsx.snap b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.web.test.tsx.snap
index 07fa8fbe11b..2ed2c8a5cc4 100644
--- a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.web.test.tsx.snap
+++ b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.web.test.tsx.snap
@@ -10,7 +10,8 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -30,8 +31,6 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
@@ -45,7 +44,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -60,14 +59,18 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -106,18 +109,18 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
             <path
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               data-blade-component="svg-path"
-              fill="hsla(216, 27%, 36%, 1)"
+              fill="hsla(211, 33%, 21%, 1)"
             />
             <path
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               data-blade-component="svg-path"
-              fill="hsla(216, 27%, 36%, 1)"
+              fill="hsla(211, 33%, 21%, 1)"
             />
             <path
               clip-rule="evenodd"
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
               data-blade-component="svg-path"
-              fill="hsla(216, 27%, 36%, 1)"
+              fill="hsla(211, 33%, 21%, 1)"
               fill-rule="evenodd"
             />
           </svg>
@@ -134,100 +137,6 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render Badge with bold font 1`] = `
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
-}
-
-.c3.c3.c3.c3.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  overflow: hidden;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 8px;
-  padding-left: 8px;
-}
-
-.c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-radius: 9999px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  display: -webkit-box;
-  line-clamp: 1;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-}
-
-<div>
-  <div
-    class="c0"
-    data-blade-component="badge"
-  >
-    <div
-      class="c1 c2"
-      data-blade-component="base-box"
-    >
-      <div
-        class="c3"
-        data-blade-component="base-box"
-      >
-        <p
-          class="c4"
-          data-blade-component="text"
-        >
-          LABEL
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`<Badge /> should render Badge with default props 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
@@ -238,7 +147,8 @@ exports[`<Badge /> should render Badge with default props 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -258,14 +168,12 @@ exports[`<Badge /> should render Badge with default props 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -280,14 +188,18 @@ exports[`<Badge /> should render Badge with default props 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -322,7 +234,7 @@ exports[`<Badge /> should render Badge with default props 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
+exports[`<Badge /> should render high emphasis information color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -332,7 +244,8 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(218,89%,51%,1);
+  height: 20px;
+  background-color: hsla(200,84%,44%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -352,14 +265,12 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(200,84%,44%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -375,13 +286,17 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -416,7 +331,7 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast default color Badge 1`] = `
+exports[`<Badge /> should render high emphasis information color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -426,7 +341,8 @@ exports[`<Badge /> should render high contrast default color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(218,89%,51%,1);
+  height: 20px;
+  background-color: hsla(200,84%,44%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -446,14 +362,12 @@ exports[`<Badge /> should render high contrast default color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(200,84%,44%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -469,13 +383,17 @@ exports[`<Badge /> should render high contrast default color Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -510,7 +428,7 @@ exports[`<Badge /> should render high contrast default color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast information color Badge 1`] = `
+exports[`<Badge /> should render high emphasis negative color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -520,7 +438,8 @@ exports[`<Badge /> should render high contrast information color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(193,100%,35%,1);
+  height: 20px;
+  background-color: hsla(4,74%,49%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -540,14 +459,12 @@ exports[`<Badge /> should render high contrast information color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(193,100%,35%,1);
+  background-color: hsla(4,74%,49%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -563,13 +480,17 @@ exports[`<Badge /> should render high contrast information color Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -604,7 +525,7 @@ exports[`<Badge /> should render high contrast information color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast information variant Badge 1`] = `
+exports[`<Badge /> should render high emphasis negative color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -614,7 +535,8 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(193,100%,35%,1);
+  height: 20px;
+  background-color: hsla(4,74%,49%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -634,14 +556,12 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(193,100%,35%,1);
+  background-color: hsla(4,74%,49%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -657,13 +577,17 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -698,7 +622,7 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast negative color Badge 1`] = `
+exports[`<Badge /> should render high emphasis neutral color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -708,7 +632,8 @@ exports[`<Badge /> should render high contrast negative color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(8,73%,47%,1);
+  height: 20px;
+  background-color: hsla(211,29%,26%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -728,14 +653,12 @@ exports[`<Badge /> should render high contrast negative color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(8,73%,47%,1);
+  background-color: hsla(211,29%,26%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -751,13 +674,17 @@ exports[`<Badge /> should render high contrast negative color Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -792,7 +719,7 @@ exports[`<Badge /> should render high contrast negative color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
+exports[`<Badge /> should render high emphasis neutral color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -802,7 +729,8 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(8,73%,47%,1);
+  height: 20px;
+  background-color: hsla(211,29%,26%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -822,14 +750,12 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(8,73%,47%,1);
+  background-color: hsla(211,29%,26%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -845,13 +771,17 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -886,7 +816,7 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast neutral color Badge 1`] = `
+exports[`<Badge /> should render high emphasis notice color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -896,7 +826,8 @@ exports[`<Badge /> should render high contrast neutral color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,33%,29%,1);
+  height: 20px;
+  background-color: hsla(25,90%,48%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -916,14 +847,12 @@ exports[`<Badge /> should render high contrast neutral color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,33%,29%,1);
+  background-color: hsla(25,90%,48%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -939,13 +868,17 @@ exports[`<Badge /> should render high contrast neutral color Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -980,7 +913,7 @@ exports[`<Badge /> should render high contrast neutral color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
+exports[`<Badge /> should render high emphasis notice color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -990,7 +923,8 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,33%,29%,1);
+  height: 20px;
+  background-color: hsla(25,90%,48%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1010,14 +944,12 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,33%,29%,1);
+  background-color: hsla(25,90%,48%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1033,13 +965,17 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1074,7 +1010,7 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast notice color Badge 1`] = `
+exports[`<Badge /> should render high emphasis positive color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1084,7 +1020,8 @@ exports[`<Badge /> should render high contrast notice color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(38,97%,38%,1);
+  height: 20px;
+  background-color: hsla(150,100%,32%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1104,14 +1041,12 @@ exports[`<Badge /> should render high contrast notice color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(38,97%,38%,1);
+  background-color: hsla(150,100%,32%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1127,13 +1062,17 @@ exports[`<Badge /> should render high contrast notice color Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1168,7 +1107,7 @@ exports[`<Badge /> should render high contrast notice color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
+exports[`<Badge /> should render high emphasis positive color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1178,7 +1117,8 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(38,97%,38%,1);
+  height: 20px;
+  background-color: hsla(150,100%,32%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1198,14 +1138,12 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(38,97%,38%,1);
+  background-color: hsla(150,100%,32%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1221,13 +1159,17 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1262,7 +1204,7 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast positive color Badge 1`] = `
+exports[`<Badge /> should render high emphasis primary color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1272,7 +1214,8 @@ exports[`<Badge /> should render high contrast positive color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(160,100%,26%,1);
+  height: 20px;
+  background-color: hsla(227,100%,59%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1292,14 +1235,12 @@ exports[`<Badge /> should render high contrast positive color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(160,100%,26%,1);
+  background-color: hsla(227,100%,59%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1315,13 +1256,17 @@ exports[`<Badge /> should render high contrast positive color Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1356,7 +1301,7 @@ exports[`<Badge /> should render high contrast positive color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
+exports[`<Badge /> should render high emphasis primary color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1366,7 +1311,8 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(160,100%,26%,1);
+  height: 20px;
+  background-color: hsla(227,100%,59%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1386,14 +1332,12 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(160,100%,26%,1);
+  background-color: hsla(227,100%,59%,1);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1409,13 +1353,17 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1460,7 +1408,8 @@ exports[`<Badge /> should render large size Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 24px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1480,14 +1429,12 @@ exports[`<Badge /> should render large size Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 4px;
-  padding-bottom: 4px;
   padding-right: 12px;
   padding-left: 12px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1502,14 +1449,18 @@ exports[`<Badge /> should render large size Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1544,7 +1495,7 @@ exports[`<Badge /> should render large size Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
+exports[`<Badge /> should render low emphasis information color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1554,7 +1505,8 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(218,89%,51%,0.09);
+  height: 20px;
+  background-color: hsla(200,84%,44%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1574,14 +1526,12 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(200,84%,44%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1596,14 +1546,18 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,37%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1638,7 +1592,7 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast default color Badge 1`] = `
+exports[`<Badge /> should render low emphasis information color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1648,7 +1602,8 @@ exports[`<Badge /> should render low contrast default color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(218,89%,51%,0.09);
+  height: 20px;
+  background-color: hsla(200,84%,44%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1668,14 +1623,12 @@ exports[`<Badge /> should render low contrast default color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(200,84%,44%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1690,14 +1643,18 @@ exports[`<Badge /> should render low contrast default color Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,37%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1732,7 +1689,7 @@ exports[`<Badge /> should render low contrast default color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast information color Badge 1`] = `
+exports[`<Badge /> should render low emphasis negative color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1742,7 +1699,8 @@ exports[`<Badge /> should render low contrast information color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(193,100%,35%,0.09);
+  height: 20px;
+  background-color: hsla(4,74%,49%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1762,14 +1720,12 @@ exports[`<Badge /> should render low contrast information color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(193,100%,35%,0.09);
+  background-color: hsla(4,74%,49%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1784,14 +1740,18 @@ exports[`<Badge /> should render low contrast information color Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(193,100%,35%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1826,7 +1786,7 @@ exports[`<Badge /> should render low contrast information color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast information variant Badge 1`] = `
+exports[`<Badge /> should render low emphasis negative color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1836,7 +1796,8 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(193,100%,35%,0.09);
+  height: 20px;
+  background-color: hsla(4,74%,49%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1856,14 +1817,12 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(193,100%,35%,0.09);
+  background-color: hsla(4,74%,49%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1878,14 +1837,18 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(193,100%,35%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1920,7 +1883,7 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast negative color Badge 1`] = `
+exports[`<Badge /> should render low emphasis neutral color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1930,7 +1893,8 @@ exports[`<Badge /> should render low contrast negative color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(9,91%,56%,0.09);
+  height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1950,14 +1914,12 @@ exports[`<Badge /> should render low contrast negative color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(9,91%,56%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1972,14 +1934,18 @@ exports[`<Badge /> should render low contrast negative color Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2014,7 +1980,7 @@ exports[`<Badge /> should render low contrast negative color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
+exports[`<Badge /> should render low emphasis neutral color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2024,7 +1990,8 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(9,91%,56%,0.09);
+  height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2044,14 +2011,12 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(9,91%,56%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2066,14 +2031,18 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2108,7 +2077,7 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast neutral color Badge 1`] = `
+exports[`<Badge /> should render low emphasis notice color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2118,7 +2087,8 @@ exports[`<Badge /> should render low contrast neutral color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 20px;
+  background-color: hsla(25,90%,48%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2138,14 +2108,12 @@ exports[`<Badge /> should render low contrast neutral color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(25,90%,48%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2160,14 +2128,18 @@ exports[`<Badge /> should render low contrast neutral color Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,85%,42%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2202,7 +2174,7 @@ exports[`<Badge /> should render low contrast neutral color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
+exports[`<Badge /> should render low emphasis notice color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2212,7 +2184,8 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 20px;
+  background-color: hsla(25,90%,48%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2232,14 +2205,12 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(25,90%,48%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2254,14 +2225,18 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,85%,42%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2296,7 +2271,7 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast notice color Badge 1`] = `
+exports[`<Badge /> should render low emphasis positive color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2306,7 +2281,8 @@ exports[`<Badge /> should render low contrast notice color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(36,100%,44%,0.09);
+  height: 20px;
+  background-color: hsla(150,100%,32%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2326,14 +2302,12 @@ exports[`<Badge /> should render low contrast notice color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(36,100%,44%,0.09);
+  background-color: hsla(150,100%,32%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2348,14 +2322,18 @@ exports[`<Badge /> should render low contrast notice color Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(38,97%,38%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2390,7 +2368,7 @@ exports[`<Badge /> should render low contrast notice color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
+exports[`<Badge /> should render low emphasis positive color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2400,7 +2378,8 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(36,100%,44%,0.09);
+  height: 20px;
+  background-color: hsla(150,100%,32%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2420,14 +2399,12 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(36,100%,44%,0.09);
+  background-color: hsla(150,100%,32%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2442,14 +2419,18 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(38,97%,38%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2484,7 +2465,7 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast positive color Badge 1`] = `
+exports[`<Badge /> should render low emphasis primary color Badge 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2494,7 +2475,8 @@ exports[`<Badge /> should render low contrast positive color Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(155,100%,31%,0.09);
+  height: 20px;
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2514,14 +2496,12 @@ exports[`<Badge /> should render low contrast positive color Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(155,100%,31%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2536,14 +2516,18 @@ exports[`<Badge /> should render low contrast positive color Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2578,7 +2562,7 @@ exports[`<Badge /> should render low contrast positive color Badge 1`] = `
 </div>
 `;
 
-exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
+exports[`<Badge /> should render low emphasis primary color Badge 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2588,7 +2572,8 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(155,100%,31%,0.09);
+  height: 20px;
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2608,14 +2593,12 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(155,100%,31%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2630,14 +2613,18 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2682,7 +2669,8 @@ exports[`<Badge /> should render medium size Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2702,14 +2690,12 @@ exports[`<Badge /> should render medium size Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2724,14 +2710,18 @@ exports[`<Badge /> should render medium size Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2776,7 +2766,8 @@ exports[`<Badge /> should render small size Badge 1`] = `
 
 .c1.c1.c1.c1.c1 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 16px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2796,14 +2787,12 @@ exports[`<Badge /> should render small size Badge 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 0px;
-  padding-bottom: 0px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2818,14 +2807,18 @@ exports[`<Badge /> should render small size Badge 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.625rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
diff --git a/packages/blade/src/components/Badge/badgeTokens.ts b/packages/blade/src/components/Badge/badgeTokens.ts
index e23b4aca022..c6272a65096 100644
--- a/packages/blade/src/components/Badge/badgeTokens.ts
+++ b/packages/blade/src/components/Badge/badgeTokens.ts
@@ -1,11 +1,12 @@
 import type { BadgeProps } from './Badge';
 import type { DotNotationSpacingStringToken } from '~utils/types';
 import type { IconProps } from '~components/Icons';
+import { size } from '~tokens/global/size';
 
-const verticalPadding: Record<NonNullable<BadgeProps['size']>, DotNotationSpacingStringToken> = {
-  small: 'spacing.0',
-  medium: 'spacing.1',
-  large: 'spacing.2',
+const badgeHeight: Record<NonNullable<BadgeProps['size']>, number> = {
+  small: size[16],
+  medium: size[20],
+  large: size[24],
 };
 
 const horizontalPadding: Record<NonNullable<BadgeProps['size']>, DotNotationSpacingStringToken> = {
@@ -26,4 +27,4 @@ const iconSize: Record<NonNullable<BadgeProps['size']>, IconProps['size']> = {
   large: 'small',
 };
 
-export { verticalPadding, horizontalPadding, iconPadding, iconSize };
+export { badgeHeight, horizontalPadding, iconPadding, iconSize };
diff --git a/packages/blade/src/components/Badge/types.ts b/packages/blade/src/components/Badge/types.ts
index 11fff2bbe26..b40ea14d4ac 100644
--- a/packages/blade/src/components/Badge/types.ts
+++ b/packages/blade/src/components/Badge/types.ts
@@ -1,17 +1,16 @@
 import type { BadgeProps } from './Badge';
 import type { Theme } from '~components/BladeProvider';
 import type { DotNotationColorStringToken } from '~utils/types';
+import type { SubtleOrIntense } from '~tokens/theme/theme';
 
-type BadgeBackgroundColors = `badge.background.${DotNotationColorStringToken<
-  Theme['colors']['badge']['background']
->}`;
+type SurfacePrimaryColors = `surface.background.primary.${SubtleOrIntense}`;
 
 type FeedbackBackgroundColors = `feedback.background.${DotNotationColorStringToken<
   Theme['colors']['feedback']['background']
 >}`;
 
 export type StyledBadgeProps = {
-  backgroundColor: FeedbackBackgroundColors | BadgeBackgroundColors;
+  backgroundColor: FeedbackBackgroundColors | SurfacePrimaryColors;
   size: NonNullable<BadgeProps['size']>;
   theme: Theme;
 };
diff --git a/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx b/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx
index e55e8fb6642..3dd1fff3480 100644
--- a/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx
+++ b/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';
 import { Divider } from '~components/Divider';
 import BaseBox from '~components/Box/BaseBox';
-import { Heading, Text } from '~components/Typography';
+import { Text } from '~components/Typography';
 import { IconButton } from '~components/Button/IconButton';
 import { ChevronLeftIcon, CloseIcon } from '~components/Icons';
 import type { TestID } from '~utils/types';
@@ -93,7 +93,8 @@ const propRestrictionMap = {
     variant: 'body',
   },
   Amount: {
-    size: 'body-medium',
+    type: 'body',
+    size: 'medium',
   },
 } as const;
 
@@ -229,9 +230,9 @@ const _BaseHeader = ({
                 flexDirection="row"
               >
                 {title ? (
-                  <Heading size="small" variant="regular" type="normal">
+                  <Text size="large" weight="semibold" color="surface.text.gray.normal">
                     {title}
-                  </Heading>
+                  </Text>
                 ) : null}
                 {titleSuffix && (
                   <BaseBox marginLeft="spacing.3">
@@ -240,7 +241,7 @@ const _BaseHeader = ({
                 )}
               </BaseBox>
               {subtitle ? (
-                <Text variant="body" size="small" weight="regular" type="muted">
+                <Text variant="body" size="small" weight="regular" color="surface.text.gray.muted">
                   {subtitle}
                 </Text>
               ) : null}
diff --git a/packages/blade/src/components/BladeProvider/__tests__/BladeProvider.test.tsx b/packages/blade/src/components/BladeProvider/__tests__/BladeProvider.test.tsx
index b826b52885e..ec54477c329 100644
--- a/packages/blade/src/components/BladeProvider/__tests__/BladeProvider.test.tsx
+++ b/packages/blade/src/components/BladeProvider/__tests__/BladeProvider.test.tsx
@@ -1,7 +1,7 @@
 import type { WrapperComponent } from '@testing-library/react-hooks';
 import { renderHook, act } from '@testing-library/react-hooks';
-import paymentLightTheme from './paymentLightTheme';
-import { paymentTheme } from '~tokens/theme';
+import bladeLightTheme from './bladeLightTheme';
+import { bladeTheme } from '~tokens/theme';
 import { colorSchemeNamesInput } from '~tokens/theme/theme';
 import type { BladeProviderProps } from '~components/BladeProvider';
 import { BladeProvider, useTheme } from '~components/BladeProvider';
@@ -27,13 +27,13 @@ describe('<BladeProvider/>', () => {
     const { result } = renderHook(() => useTheme(), {
       wrapper,
       initialProps: {
-        themeTokens: paymentTheme,
+        themeTokens: bladeTheme,
         colorScheme: 'light',
         children: null,
       },
     });
 
-    expect(result.current.theme).toEqual(paymentLightTheme);
+    expect(result.current.theme).toEqual(bladeLightTheme);
     expect(result.current.colorScheme).toBe('light');
   });
 
@@ -41,7 +41,7 @@ describe('<BladeProvider/>', () => {
     const { result } = renderHook(() => useTheme(), {
       wrapper,
       initialProps: {
-        themeTokens: paymentTheme,
+        themeTokens: bladeTheme,
         children: null,
       },
     });
@@ -53,7 +53,7 @@ describe('<BladeProvider/>', () => {
     const { result } = renderHook(() => useTheme(), {
       wrapper,
       initialProps: {
-        themeTokens: paymentTheme,
+        themeTokens: bladeTheme,
         colorScheme: 'light',
         children: null,
       },
@@ -86,7 +86,7 @@ describe('<BladeProvider/>', () => {
     const { result } = renderHook(() => useTheme(), {
       wrapper,
       initialProps: {
-        themeTokens: paymentTheme,
+        themeTokens: bladeTheme,
         // @ts-expect-error testing the error case when colorscheme is not one of [light, dark, system]
         colorScheme: initialColorScheme,
         children: null,
diff --git a/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme.native.ts b/packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme.native.ts
similarity index 63%
rename from packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme.native.ts
rename to packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme.native.ts
index f6f79f0afe2..507660d6db8 100644
--- a/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme.native.ts
+++ b/packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme.native.ts
@@ -1,17 +1,17 @@
 import { Easing } from 'react-native-reanimated';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 import type { Theme } from '~components/BladeProvider';
 
-const paymentLightTheme: Theme = {
-  name: 'paymentTheme',
-  colors: paymentTheme.colors.onLight,
-  border: paymentTheme.border,
-  spacing: paymentTheme.spacing,
-  breakpoints: paymentTheme.breakpoints,
-  elevation: paymentTheme.elevation.onLight,
-  typography: paymentTheme.typography.onMobile,
+const bladeLightTheme: Theme = {
+  name: 'bladeTheme',
+  colors: bladeTheme.colors.onLight,
+  border: bladeTheme.border,
+  spacing: bladeTheme.spacing,
+  breakpoints: bladeTheme.breakpoints,
+  elevation: bladeTheme.elevation.onLight,
+  typography: bladeTheme.typography.onMobile,
   motion: {
-    ...paymentTheme.motion,
+    ...bladeTheme.motion,
     easing: {
       standard: {
         attentive: Easing.bezier(0.5, 0, 0.3, 1.5),
@@ -33,4 +33,4 @@ const paymentLightTheme: Theme = {
   },
 };
 
-export default paymentLightTheme;
+export default bladeLightTheme;
diff --git a/packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme.web.ts b/packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme.web.ts
new file mode 100644
index 00000000000..5b088c903ca
--- /dev/null
+++ b/packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme.web.ts
@@ -0,0 +1,15 @@
+import type { Theme } from '~components/BladeProvider';
+import { bladeTheme } from '~tokens/theme';
+
+const bladeLightTheme: Theme = {
+  name: 'bladeTheme',
+  colors: bladeTheme.colors.onLight,
+  border: bladeTheme.border,
+  motion: bladeTheme.motion,
+  spacing: bladeTheme.spacing,
+  breakpoints: bladeTheme.breakpoints,
+  elevation: bladeTheme.elevation.onLight,
+  typography: bladeTheme.typography.onMobile,
+};
+
+export default bladeLightTheme;
diff --git a/packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/index.ts b/packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/index.ts
new file mode 100644
index 00000000000..c6ee7d10ae4
--- /dev/null
+++ b/packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/index.ts
@@ -0,0 +1 @@
+export { default } from './bladeLightTheme';
diff --git a/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/index.native.ts b/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/index.native.ts
deleted file mode 100644
index c5445e37a4d..00000000000
--- a/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/index.native.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './paymentLightTheme.native';
diff --git a/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/index.web.ts b/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/index.web.ts
deleted file mode 100644
index d05562452aa..00000000000
--- a/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/index.web.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './paymentLightTheme.web';
diff --git a/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme.web.ts b/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme.web.ts
deleted file mode 100644
index bed991edb08..00000000000
--- a/packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme.web.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Theme } from '~components/BladeProvider';
-import { paymentTheme } from '~tokens/theme';
-
-const paymentLightTheme: Theme = {
-  name: 'paymentTheme',
-  colors: paymentTheme.colors.onLight,
-  border: paymentTheme.border,
-  motion: paymentTheme.motion,
-  spacing: paymentTheme.spacing,
-  breakpoints: paymentTheme.breakpoints,
-  elevation: paymentTheme.elevation.onLight,
-  typography: paymentTheme.typography.onMobile,
-};
-
-export default paymentLightTheme;
diff --git a/packages/blade/src/components/BottomSheet/BottomSheet.native.tsx b/packages/blade/src/components/BottomSheet/BottomSheet.native.tsx
index 7bedc9e4252..fc2d5e94526 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheet.native.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheet.native.tsx
@@ -31,7 +31,7 @@ const BottomSheetSurface = styled(BaseBox)(({ theme }) => {
     // TODO: we do not have 16px radius token
     borderTopLeftRadius: makeSpace(theme.spacing[5]),
     borderTopRightRadius: makeSpace(theme.spacing[5]),
-    backgroundColor: theme.colors.surface.background.level2.lowContrast,
+    backgroundColor: theme.colors.popup.background.subtle,
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
diff --git a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
index 79e330235b0..5d115ee5fa2 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -12,7 +12,6 @@ import {
   BottomSheetFooter,
   BottomSheetHeader,
 } from './';
-
 import {
   ArrowRightIcon,
   CheckIcon,
@@ -24,30 +23,30 @@ import {
   TrendingDownIcon,
   TrendingUpIcon,
 } from '~components/Icons';
-import {
-  ActionList,
-  ActionListItem,
-  ActionListItemIcon,
-  ActionListSection,
-} from '~components/ActionList';
 import BaseBox from '~components/Box/BaseBox';
 import { Button } from '~components/Button';
-import { Dropdown, DropdownButton } from '~components/Dropdown';
-import { SelectInput } from '~components/Input/DropdownInputTriggers';
-import { Heading, Text, Title } from '~components/Typography';
+import { Heading, Text } from '~components/Typography';
 import { Badge } from '~components/Badge';
-import { TextInput } from '~components/Input/TextInput';
-import { Radio, RadioGroup } from '~components/Radio';
 import { List, ListItem } from '~components/List';
 import { Counter } from '~components/Counter';
 import { Box } from '~components/Box';
-import { Checkbox } from '~components/Checkbox';
-import { OTPInput } from '~components/Input/OTPInput';
 import { Link } from '~components/Link';
 import { Sandbox } from '~utils/storybook/Sandbox';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { isReactNative } from '~utils';
 import { SandboxHighlighter } from '~utils/storybook/Sandbox/SandpackEditor';
+import {
+  ActionList,
+  ActionListItem,
+  ActionListItemIcon,
+  ActionListSection,
+} from '~components/ActionList';
+import { Dropdown, DropdownButton } from '~components/Dropdown';
+import { SelectInput } from '~components/Input/DropdownInputTriggers';
+import { OTPInput } from '~components/Input/OTPInput';
+import { Radio, RadioGroup } from '~components/Radio';
+import { Checkbox } from '~components/Checkbox';
+import { TextInput } from '~components/Input/TextInput';
 
 const Page = (): React.ReactElement => {
   return (
@@ -68,15 +67,10 @@ const Page = (): React.ReactElement => {
         BottomSheetHeaderProps
       } from '@razorpay/blade/components';
       `}
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=26477-578228&t=agFItKEmWAzA4N13-0',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?type=design&node-id=16767-706689&t=6FVL3Ha33gwM45Cm-0',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=26477-578228&t=agFItKEmWAzA4N13-0"
     >
-      <Title>Usage</Title>
-      <Sandbox editorHeight={600}>
+      <Heading size="large">Usage</Heading>
+      <Sandbox showConsole editorHeight={600}>
         {`
           import React from 'react';
           import { 
@@ -135,7 +129,7 @@ const Page = (): React.ReactElement => {
           export default App;
         `}
       </Sandbox>
-      <Title>iOS Safari Specific Setup</Title>
+      <Heading size="large">iOS Safari Specific Setup</Heading>
       <Text marginTop="spacing.4">
         When using BottomSheet or SpotlightPopoverTour, Make sure to set a width/height to the
         `body` otherwise when they open, the page will get clipped. This happens due to a bug in iOS
@@ -155,7 +149,7 @@ const Page = (): React.ReactElement => {
 
 const propsCategory = { HEADER: 'Header Props' };
 const headerTrailingMap = {
-  Badge: <Badge variant="positive">Action Needed</Badge>,
+  Badge: <Badge color="positive">Action Needed</Badge>,
   Text: <Text>$12,000</Text>,
   Link: <Link href="#">Link</Link>,
   IconButton: <Button icon={InfoIcon} accessibilityLabel="Trailing icon" />,
@@ -163,7 +157,7 @@ const headerTrailingMap = {
 
 const headerTitleSuffixMap = {
   None: undefined,
-  Counter: <Counter value={12} intent="positive" />,
+  Counter: <Counter value={12} color="positive" />,
 };
 
 type StoryControlProps = BottomSheetProps & BottomSheetHeaderProps;
@@ -380,7 +374,7 @@ const WithHeaderFooterTemplate: StoryFn<any> = (args: StoryControlProps) => {
           </RadioGroup>
         </BottomSheetBody>
         <BottomSheetFooter>
-          <Button isFullWidth variant="secondary">
+          <Button isFullWidth variant="tertiary">
             Remove address
           </Button>
           <Button isFullWidth marginTop="spacing.5">
@@ -619,7 +613,7 @@ const BottomSheetStackingTemplate: StoryFn<typeof BottomSheetComponent> = () =>
         <BottomSheetFooter>
           <Button
             isFullWidth
-            variant="secondary"
+            variant="tertiary"
             onClick={() => setSecondOpen(true)}
             isDisabled={isSecondOpen}
           >
@@ -670,7 +664,7 @@ const BottomSheetStackingTemplate: StoryFn<typeof BottomSheetComponent> = () =>
         <BottomSheetFooter>
           <Button
             isFullWidth
-            variant="secondary"
+            variant="tertiary"
             onClick={() => setFirstOpen(true)}
             isDisabled={isFirstOpen}
           >
@@ -731,7 +725,7 @@ const BottomSheetStackingTemplate: StoryFn<typeof BottomSheetComponent> = () =>
         <BottomSheetFooter>
           <Button
             isFullWidth
-            variant="secondary"
+            variant="tertiary"
             onClick={() => setFirstOpen(true)}
             isDisabled={isFirstOpen}
           >
@@ -770,6 +764,7 @@ const InitialFocusTemplate: StoryFn<typeof BottomSheetComponent> = () => {
         <BottomSheetHeader title="Users" />
         <BottomSheetBody>
           <TextInput label="Search Users" ref={initialFocusRef} />
+          <Button ref={initialFocusRef}>Search Users</Button>
 
           <Text marginTop="spacing.5">
             By default the initial focus is set to the close button, but you can modify it by
@@ -799,12 +794,10 @@ const HeadingBanner = (): React.ReactElement => {
           left="spacing.0"
           width="100%"
           height="100%"
-          backgroundColor="surface.background.level1.highContrast"
+          backgroundColor="surface.background.cloud.subtle"
         />
         <Box position="absolute" bottom="spacing.4" left="spacing.5">
-          <Heading color="surface.text.normal.highContrast">
-            All-in-one Escrow management platform
-          </Heading>
+          <Heading color="surface.text.gray.normal">All-in-one Escrow management platform</Heading>
         </Box>
       </Box>
     );
@@ -812,7 +805,7 @@ const HeadingBanner = (): React.ReactElement => {
 
   return (
     <Box position="relative" height="250px" overflow="hidden">
-      <Box position="absolute" top="-150px" left="spacing.0">
+      <Box position="absolute" top="-150px" left="spacing.0" width="100%">
         <video
           autoPlay
           style={{ objectFit: 'cover' }}
@@ -822,7 +815,7 @@ const HeadingBanner = (): React.ReactElement => {
         />
       </Box>
       <Box position="absolute" bottom="spacing.4" left="spacing.5">
-        <Heading color="surface.text.normal.highContrast">
+        <Heading color="surface.text.staticWhite.normal">
           All-in-one Escrow management platform
         </Heading>
       </Box>
@@ -852,7 +845,7 @@ const ZeroPaddingTemplate: StoryFn<typeof BottomSheetComponent> = () => {
                 ONE place to deliver a seamless user experience for you. Work with our experts to
                 ensure your escrow money transfers are always compliant, safe & effortless.
               </Text>
-              <Text marginTop="spacing.3" type="muted">
+              <Text marginTop="spacing.3" color="surface.text.gray.muted">
                 100% secure | Instant payouts | Unbeatable pricing
               </Text>
             </Box>
@@ -933,7 +926,7 @@ const SnapPointsTemplate: StoryFn<typeof BottomSheetComponent> = () => {
 
       <Box display="flex" gap="spacing.2" flexWrap="wrap">
         <Text>By default BottomSheet's SnapPoints are</Text>
-        <Text weight="bold">[35%, 50%, 85%]</Text>
+        <Text weight="semibold">[35%, 50%, 85%]</Text>
       </Box>
 
       <Text>
@@ -942,7 +935,7 @@ const SnapPointsTemplate: StoryFn<typeof BottomSheetComponent> = () => {
       </Text>
 
       <Box marginTop="spacing.3">
-        <Text weight="bold">At SnapPoint 1: 35% Screen Height</Text>
+        <Text weight="semibold">At SnapPoint 1: 35% Screen Height</Text>
         <List>
           <ListItem>
             If content height is less than 35% of screen height - then bottom sheet takes the height
@@ -959,7 +952,7 @@ const SnapPointsTemplate: StoryFn<typeof BottomSheetComponent> = () => {
           </ListItem>
         </List>
 
-        <Text weight="bold">At SnapPoint 2: 50% Screen Height</Text>
+        <Text weight="semibold">At SnapPoint 2: 50% Screen Height</Text>
         <List>
           <ListItem>
             If content height {'>'}35% but {'<'}50% screen height - the bottom sheet extends till
@@ -976,7 +969,7 @@ const SnapPointsTemplate: StoryFn<typeof BottomSheetComponent> = () => {
           </ListItem>
         </List>
 
-        <Text weight="bold">At SnapPoint 3: 85% Screen Height</Text>
+        <Text weight="semibold">At SnapPoint 3: 85% Screen Height</Text>
         <List>
           <ListItem>
             If content height {'>'}50% but {'<'}85% screen height - the bottom sheet extends till
@@ -1043,7 +1036,7 @@ const WithOTPInputTemplate: StoryFn<typeof BottomSheetComponent> = () => {
         </BottomSheetBody>
 
         <BottomSheetFooter>
-          <Button isFullWidth variant="secondary">
+          <Button isFullWidth variant="tertiary">
             Cancel
           </Button>
           <Button isLoading={isLoading} onClick={submitOTP} isFullWidth marginTop="spacing.5">
@@ -1146,7 +1139,7 @@ const SimSelectionBottomSheet: React.FC<Props> = ({
                 // should be able to close the bottom sheet
                 onDismiss();
               }}
-              variant="secondary"
+              variant="tertiary"
               isFullWidth
             >
               Close
@@ -1159,8 +1152,7 @@ const SimSelectionBottomSheet: React.FC<Props> = ({
 };
 
 const ProductUseCase1Example: StoryFn<typeof BottomSheetComponent> = () => {
-  // should be initially opened
-  const [isOpen, setIsOpen] = React.useState(true);
+  const [isOpen, setIsOpen] = React.useState(false);
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>{isOpen ? 'close' : 'open'}</Button>
diff --git a/packages/blade/src/components/BottomSheet/BottomSheet.web.tsx b/packages/blade/src/components/BottomSheet/BottomSheet.web.tsx
index fa24960edd9..13ac3c7a781 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheet.web.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheet.web.tsx
@@ -40,10 +40,10 @@ const BottomSheetSurface = styled.div<{
   isDragging: boolean;
 }>(({ theme, windowHeight, isDragging }) => {
   return {
-    background: theme.colors.surface.background.level2.lowContrast,
+    background: theme.colors.popup.background.subtle,
     borderTopLeftRadius: makeSize(size[16]),
     borderTopRightRadius: makeSize(size[16]),
-    borderColor: theme.colors.surface.border.normal.lowContrast,
+    borderColor: theme.colors.popup.border.subtle,
     // this is reverse top elevation of highRaised elevation token
     boxShadow: '0px -24px 48px -12px hsla(217, 56%, 17%, 0.18)',
     opacity: 0,
@@ -59,7 +59,7 @@ const BottomSheetSurface = styled.div<{
     right: 0,
     bottom: 0,
     top: windowHeight,
-    backgroundColor: theme.colors.surface.background.level2.lowContrast,
+    backgroundColor: theme.colors.popup.background.subtle,
     justifyContent: 'center',
     alignItems: 'center',
     touchAction: 'none',
diff --git a/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.native.tsx b/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.native.tsx
index 9b937933d98..4d39f0da514 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.native.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.native.tsx
@@ -17,7 +17,7 @@ const BottomSheetBackdrop = (
       opacity={1}
       style={[
         props.style,
-        { backgroundColor: theme.colors.surface.overlay.background[800], zIndex: props.zIndex },
+        { backgroundColor: theme.colors.overlay.background.subtle, zIndex: props.zIndex },
       ]}
     />
   );
diff --git a/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.web.tsx b/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.web.tsx
index 9826e93c11b..583dde5e7cd 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.web.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.web.tsx
@@ -2,7 +2,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useBottomSheetContext } from './BottomSheetContext';
-import { useTheme } from '~components/BladeProvider';
 import BaseBox from '~components/Box/BaseBox';
 import { castWebType } from '~utils';
 import { metaAttribute } from '~utils/metaAttribute';
@@ -20,7 +19,6 @@ const StyledBottomSheetBackdrop = styled(BaseBox)<{ isOpen: boolean }>(({ theme,
 });
 
 const BottomSheetBackdrop = ({ zIndex }: { zIndex: number }): React.ReactElement => {
-  const { theme } = useTheme();
   const { close, isOpen } = useBottomSheetContext();
 
   return (
@@ -37,7 +35,7 @@ const BottomSheetBackdrop = ({ zIndex }: { zIndex: number }): React.ReactElement
       bottom="spacing.0"
       right="spacing.0"
       zIndex={zIndex}
-      backgroundColor={theme.colors.surface.overlay.background[800]}
+      backgroundColor="overlay.background.subtle"
     />
   );
 };
diff --git a/packages/blade/src/components/BottomSheet/BottomSheetCommon.tsx b/packages/blade/src/components/BottomSheet/BottomSheetCommon.tsx
index 33921df3b68..7bf6a30a4ba 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheetCommon.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheetCommon.tsx
@@ -9,7 +9,6 @@ import { CloseIcon } from '~components/Icons';
 import type { BladeElementRef } from '~utils/types';
 import { isReactNative } from '~utils';
 import { size } from '~tokens/global';
-import { useTheme } from '~components/BladeProvider';
 import { makeSpace } from '~utils/makeSpace';
 import { makeSize } from '~utils/makeSize';
 
@@ -40,7 +39,6 @@ const BottomSheetEmptyHeader = React.forwardRef<BladeElementRef, BottomSheetEmpt
     ref,
   ) => {
     const { close, isHeaderFloating } = useBottomSheetContext();
-    const { theme } = useTheme();
     const webOnlyEventHandlers: Record<string, any> = isReactNative()
       ? {}
       : {
@@ -86,7 +84,7 @@ const BottomSheetEmptyHeader = React.forwardRef<BladeElementRef, BottomSheetEmpt
           width={makeSize(size[28])}
           height={makeSize(size[28])}
           flexShrink={0}
-          backgroundColor={theme.colors.surface.background.level2.lowContrast}
+          backgroundColor="popup.background.subtle"
           borderRadius="max"
           zIndex={100}
         >
diff --git a/packages/blade/src/components/BottomSheet/BottomSheetFooter.native.tsx b/packages/blade/src/components/BottomSheet/BottomSheetFooter.native.tsx
index d1e0e9d68a9..fd0c5a94179 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheetFooter.native.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheetFooter.native.tsx
@@ -3,17 +3,15 @@ import type { BottomSheetFooterProps } from './types';
 import { ComponentIds } from './componentIds';
 import { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';
 import BaseBox from '~components/Box/BaseBox';
-import { useTheme } from '~components/BladeProvider';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 
 const _BottomSheetFooter = ({ children }: BottomSheetFooterProps): React.ReactElement => {
-  const { theme } = useTheme();
   return (
     <BaseBox
       width="100%"
       flexShrink={0}
       marginTop="auto"
-      backgroundColor={theme.colors.surface.background.level2.lowContrast}
+      backgroundColor="popup.background.subtle"
       touchAction="none"
       zIndex={2}
     >
diff --git a/packages/blade/src/components/BottomSheet/BottomSheetFooter.web.tsx b/packages/blade/src/components/BottomSheet/BottomSheetFooter.web.tsx
index 1aeceb2dd4d..7d60ef6744d 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheetFooter.web.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheetFooter.web.tsx
@@ -4,11 +4,9 @@ import type { BaseFooterProps } from '~components/BaseHeaderFooter/BaseFooter';
 import { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';
 import BaseBox from '~components/Box/BaseBox';
 import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';
-import { useTheme } from '~components/BladeProvider';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 
 const BottomSheetFooter = ({ children }: BaseFooterProps): React.ReactElement => {
-  const { theme } = useTheme();
   const { setFooterHeight, isOpen, bind } = useBottomSheetContext();
   const ref = React.useRef<HTMLDivElement>(null);
 
@@ -28,7 +26,7 @@ const BottomSheetFooter = ({ children }: BaseFooterProps): React.ReactElement =>
       width="100%"
       flexShrink={0}
       marginTop="auto"
-      backgroundColor={theme.colors.surface.background.level2.lowContrast}
+      backgroundColor="popup.background.subtle"
       touchAction="none"
       zIndex={2}
       {...metaAttribute({ name: MetaConstants.BottomSheetFooter })}
diff --git a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.native.test.tsx b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.native.test.tsx
index 699cc815082..8c9ee7d74e5 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.native.test.tsx
+++ b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.native.test.tsx
@@ -17,8 +17,8 @@ describe('<BottomSheet />', () => {
           <BottomSheetHeader
             title="Address Details"
             subtitle="Saving addresses will improve your checkout experience"
-            trailing={<Badge variant="positive">Action Needed</Badge>}
-            titleSuffix={<Counter variant="positive" value={2} />}
+            trailing={<Badge color="positive">Action Needed</Badge>}
+            titleSuffix={<Counter color="positive" value={2} />}
           />
           <BottomSheetFooter>
             <Button isFullWidth variant="secondary">
diff --git a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.ssr.test.tsx b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.ssr.test.tsx
index ec80a23573e..2b6f6d83edc 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.ssr.test.tsx
+++ b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.ssr.test.tsx
@@ -15,8 +15,8 @@ describe('<BottomSheet />', () => {
         <BottomSheetHeader
           title="Address Details"
           subtitle="Saving addresses will improve your checkout experience"
-          trailing={<Badge variant="positive">Action Needed</Badge>}
-          titleSuffix={<Counter variant="positive" value={2} />}
+          trailing={<Badge color="positive">Action Needed</Badge>}
+          titleSuffix={<Counter color="positive" value={2} />}
         />
         <BottomSheetBody>
           <Text>BottomSheet body</Text>
diff --git a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx
index 0cc901bfde9..f9fb1e74a72 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx
+++ b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx
@@ -71,8 +71,8 @@ describe('<BottomSheet />', () => {
           <BottomSheetHeader
             title="Address Details"
             subtitle="Saving addresses will improve your checkout experience"
-            trailing={<Badge variant="positive">Action Needed</Badge>}
-            titleSuffix={<Counter variant="positive" value={2} />}
+            trailing={<Badge color="positive">Action Needed</Badge>}
+            titleSuffix={<Counter color="positive" value={2} />}
           />
           <BottomSheetBody>
             <Text>BottomSheet body</Text>
@@ -99,8 +99,8 @@ describe('<BottomSheet />', () => {
           <BottomSheetHeader
             title="Address Details"
             subtitle="Saving addresses will improve your checkout experience"
-            trailing={<Badge variant="positive">Action Needed</Badge>}
-            titleSuffix={<Counter variant="positive" value={2} />}
+            trailing={<Badge color="positive">Action Needed</Badge>}
+            titleSuffix={<Counter color="positive" value={2} />}
           />
           <BottomSheetBody>
             <Text>BottomSheet body</Text>
diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap
index e0e9f37ff47..61e07d1d848 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap
+++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
             "top": 0,
           },
           {
-            "backgroundColor": "hsla(214, 15%, 18%, 0.64)",
+            "backgroundColor": "hsla(0, 0%, 0%, 0.56)",
             "zIndex": 100,
           },
         ],
@@ -188,7 +188,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
               onLayout={[Function]}
             >
               <View
-                backgroundColor="hsla(0, 0%, 100%, 1)"
+                backgroundColor="popup.background.subtle"
                 data-blade-component="base-box"
                 flexShrink={0}
                 style={
@@ -208,22 +208,21 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                 zIndex={2}
               >
                 <View
-                  borderBottomColor="surface.border.normal.lowContrast"
+                  borderBottomColor="surface.border.gray.muted"
                   borderPosition="borderBottom"
-                  borderWidth="none"
                   data-blade-component="divider"
                   dividerStyle="solid"
                   isDividerHorizontal={true}
                   style={
                     [
                       {
-                        "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                        "borderStyle": "solid",
-                        "borderWidth": 0,
+                        "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                        "borderBottomStyle": "solid",
                       },
                       {
                         "borderBottomStyle": "solid",
                         "borderBottomWidth": 1,
+                        "borderWidth": 0,
                         "flexGrow": 1,
                       },
                     ]
@@ -263,9 +262,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                       }
                     }
                     accessible={true}
-                    activeBackgroundColor="hsla(218, 89%, 51%, 0.32)"
-                    activeBorderColor="hsla(218, 89%, 51%, 1)"
-                    borderRadius="2px"
+                    borderRadius="4px"
                     borderWidth="1px"
                     buttonPaddingBottom="0px"
                     buttonPaddingLeft="20px"
@@ -273,14 +270,14 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                     buttonPaddingTop="0px"
                     collapsable={false}
                     data-blade-component="button"
-                    defaultBackgroundColor="hsla(218, 89%, 51%, 0)"
-                    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-                    focusBackgroundColor="hsla(218, 89%, 51%, 0.18)"
-                    focusBorderColor="hsla(218, 89%, 51%, 1)"
-                    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+                    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+                    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+                    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+                    focusBorderColor="hsla(227, 100%, 59%, 1)"
+                    focusRingColor="hsla(227, 100%, 59%, 0.18)"
                     focusable={true}
-                    hoverBackgroundColor="hsla(218, 89%, 51%, 0.09)"
-                    hoverBorderColor="hsla(218, 89%, 51%, 1)"
+                    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+                    hoverBorderColor="hsla(227, 100%, 59%, 1)"
                     isFullWidth={true}
                     isLoading={false}
                     minHeight="36px"
@@ -301,15 +298,16 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         {
                           "alignItems": "center",
                           "alignSelf": "center",
-                          "backgroundColor": "hsla(218, 89%, 51%, 0)",
-                          "borderColor": "hsla(218, 89%, 51%, 1)",
-                          "borderRadius": 2,
+                          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                          "borderColor": "hsla(227, 100%, 59%, 1)",
+                          "borderRadius": 4,
                           "borderStyle": "solid",
                           "borderWidth": 1,
                           "cursor": "pointer",
                           "display": "flex",
                           "justifyContent": "center",
                           "minHeight": 36,
+                          "overflow": "hidden",
                           "paddingBottom": 0,
                           "paddingLeft": 20,
                           "paddingRight": 20,
@@ -320,8 +318,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                           "width": "100%",
                         },
                         {
-                          "backgroundColor": "hsla(218, 89%, 51%, 0)",
-                          "borderColor": "hsla(218, 89%, 51%, 1)",
+                          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                          "borderColor": "hsla(227, 100%, 59%, 1)",
                         },
                       ]
                     }
@@ -344,28 +342,31 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                             "flexGrow": 1,
                             "flexShrink": 1,
                             "justifyContent": "center",
+                            "zIndex": 1,
                           },
                           {
                             "opacity": 1,
                           },
                         ]
                       }
+                      zIndex={1}
                     >
                       <Text
                         accessible={true}
-                        color="action.text.secondary.default"
+                        color="interactive.text.primary.subtle"
                         data-blade-component="base-text"
                         fontSize={100}
-                        fontWeight="bold"
+                        fontWeight="medium"
                         lineHeight={100}
                         style={
                           [
                             {
-                              "color": "hsla(218, 89%, 51%, 1)",
-                              "fontFamily": "Lato",
+                              "color": "hsla(227, 100%, 59%, 1)",
+                              "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
-                              "fontWeight": "700",
+                              "fontWeight": "500",
+                              "letterSpacing": 0,
                               "lineHeight": 20,
                               "marginBottom": 0,
                               "marginLeft": 0,
@@ -460,7 +461,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                   [
                     {},
                     {
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.12)",
                       "borderRadius": 16,
                       "content": "''",
                       "height": 4,
@@ -574,23 +575,23 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         }
                       >
                         <Text
-                          accessibilityRole="header"
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
-                          data-blade-component="heading"
+                          color="surface.text.gray.normal"
+                          data-blade-component="text"
                           fontFamily="text"
                           fontSize={200}
                           fontStyle="normal"
-                          fontWeight="bold"
-                          lineHeight={300}
+                          fontWeight="semibold"
+                          lineHeight={200}
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 16,
                                 "fontStyle": "normal",
-                                "fontWeight": "700",
+                                "fontWeight": "600",
+                                "letterSpacing": 0,
                                 "lineHeight": 24,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -646,18 +647,20 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                               }
                             >
                               <View
-                                backgroundColor="feedback.background.positive.lowContrast"
+                                backgroundColor="feedback.background.positive.subtle"
                                 data-blade-component="base-box"
+                                minHeight="20px"
                                 platform="onMobile"
                                 size="medium"
                                 style={
                                   [
                                     {
-                                      "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+                                      "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+                                      "minHeight": 20,
                                     },
                                     {
                                       "alignSelf": "center",
-                                      "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+                                      "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
                                       "borderRadius": 9999,
                                       "display": "flex",
                                       "flexWrap": "nowrap",
@@ -681,33 +684,32 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                                         "flexDirection": "row",
                                         "justifyContent": "center",
                                         "overflow": "hidden",
-                                        "paddingBottom": 2,
                                         "paddingLeft": 8,
                                         "paddingRight": 8,
-                                        "paddingTop": 2,
                                       },
                                     ]
                                   }
                                 >
                                   <Text
                                     accessible={true}
-                                    color="feedback.text.positive.lowContrast"
+                                    color="feedback.text.positive.intense"
                                     data-blade-component="text"
                                     fontFamily="text"
                                     fontSize={75}
                                     fontStyle="normal"
-                                    fontWeight="regular"
-                                    lineHeight={50}
+                                    fontWeight="medium"
+                                    lineHeight={75}
                                     numberOfLines={1}
                                     style={
                                       [
                                         {
-                                          "color": "hsla(160, 100%, 26%, 1)",
-                                          "fontFamily": "Lato",
+                                          "color": "hsla(150, 100%, 27%, 1)",
+                                          "fontFamily": "Inter",
                                           "fontSize": 12,
                                           "fontStyle": "normal",
-                                          "fontWeight": "400",
-                                          "lineHeight": 16,
+                                          "fontWeight": "500",
+                                          "letterSpacing": 0,
+                                          "lineHeight": 18,
                                           "marginBottom": 0,
                                           "marginLeft": 0,
                                           "marginRight": 0,
@@ -733,22 +735,23 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                       </View>
                       <Text
                         accessible={true}
-                        color="surface.text.muted.lowContrast"
+                        color="surface.text.gray.muted"
                         data-blade-component="text"
                         fontFamily="text"
                         fontSize={75}
                         fontStyle="normal"
                         fontWeight="regular"
-                        lineHeight={50}
+                        lineHeight={75}
                         style={
                           [
                             {
-                              "color": "hsla(216, 16%, 60%, 1)",
-                              "fontFamily": "Lato",
+                              "color": "hsla(211, 22%, 56%, 1)",
+                              "fontFamily": "Inter",
                               "fontSize": 12,
                               "fontStyle": "normal",
                               "fontWeight": "400",
-                              "lineHeight": 16,
+                              "letterSpacing": 0,
+                              "lineHeight": 18,
                               "marginBottom": 0,
                               "marginLeft": 0,
                               "marginRight": 0,
@@ -805,18 +808,20 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         }
                       >
                         <View
-                          backgroundColor="feedback.background.positive.lowContrast"
+                          backgroundColor="feedback.background.positive.subtle"
                           data-blade-component="base-box"
+                          height="20px"
                           size="medium"
                           style={
                             [
                               {
-                                "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+                                "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+                                "height": 20,
                                 "textAlign": "left",
                               },
                               {
                                 "alignSelf": "center",
-                                "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+                                "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
                                 "borderRadius": 9999,
                                 "display": "flex",
                                 "flexWrap": "nowrap",
@@ -840,33 +845,32 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                                   "flexDirection": "row",
                                   "justifyContent": "center",
                                   "overflow": "hidden",
-                                  "paddingBottom": 2,
                                   "paddingLeft": 8,
                                   "paddingRight": 8,
-                                  "paddingTop": 2,
                                 },
                               ]
                             }
                           >
                             <Text
                               accessible={true}
-                              color="feedback.text.positive.lowContrast"
+                              color="feedback.text.positive.intense"
                               data-blade-component="text"
                               fontFamily="text"
                               fontSize={75}
                               fontStyle="normal"
-                              fontWeight="regular"
-                              lineHeight={50}
+                              fontWeight="medium"
+                              lineHeight={75}
                               numberOfLines={1}
                               style={
                                 [
                                   {
-                                    "color": "hsla(160, 100%, 26%, 1)",
-                                    "fontFamily": "Lato",
+                                    "color": "hsla(150, 100%, 27%, 1)",
+                                    "fontFamily": "Inter",
                                     "fontSize": 12,
                                     "fontStyle": "normal",
-                                    "fontWeight": "400",
-                                    "lineHeight": 16,
+                                    "fontWeight": "500",
+                                    "letterSpacing": 0,
+                                    "lineHeight": 18,
                                     "marginBottom": 0,
                                     "marginLeft": 0,
                                     "marginRight": 0,
@@ -926,7 +930,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                       }
                       accessible={true}
                       collapsable={false}
-                      contrast="low"
+                      emphasis="intense"
                       focusable={true}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -988,7 +992,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         >
                           <RNSVGPath
                             d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                            fill={4288851646}
+                            fill={4285959847}
                             propList={
                               [
                                 "fill",
@@ -1002,22 +1006,21 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                 </View>
               </View>
               <View
-                borderBottomColor="surface.border.normal.lowContrast"
+                borderBottomColor="surface.border.gray.muted"
                 borderPosition="borderBottom"
-                borderWidth="none"
                 data-blade-component="divider"
                 dividerStyle="solid"
                 isDividerHorizontal={true}
                 style={
                   [
                     {
-                      "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                      "borderStyle": "solid",
-                      "borderWidth": 0,
+                      "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                      "borderBottomStyle": "solid",
                     },
                     {
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
+                      "borderWidth": 0,
                       "flexGrow": 1,
                     },
                   ]
@@ -1066,7 +1069,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
             "top": 0,
           },
           {
-            "backgroundColor": "hsla(214, 15%, 18%, 0.64)",
+            "backgroundColor": "hsla(0, 0%, 0%, 0.56)",
             "zIndex": 100,
           },
         ],
@@ -1221,7 +1224,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
               onLayout={[Function]}
             >
               <View
-                backgroundColor="hsla(0, 0%, 100%, 1)"
+                backgroundColor="popup.background.subtle"
                 data-blade-component="base-box"
                 flexShrink={0}
                 style={
@@ -1241,22 +1244,21 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                 zIndex={2}
               >
                 <View
-                  borderBottomColor="surface.border.normal.lowContrast"
+                  borderBottomColor="surface.border.gray.muted"
                   borderPosition="borderBottom"
-                  borderWidth="none"
                   data-blade-component="divider"
                   dividerStyle="solid"
                   isDividerHorizontal={true}
                   style={
                     [
                       {
-                        "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                        "borderStyle": "solid",
-                        "borderWidth": 0,
+                        "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                        "borderBottomStyle": "solid",
                       },
                       {
                         "borderBottomStyle": "solid",
                         "borderBottomWidth": 1,
+                        "borderWidth": 0,
                         "flexGrow": 1,
                       },
                     ]
@@ -1296,9 +1298,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                       }
                     }
                     accessible={true}
-                    activeBackgroundColor="hsla(218, 89%, 51%, 0.32)"
-                    activeBorderColor="hsla(218, 89%, 51%, 1)"
-                    borderRadius="2px"
+                    borderRadius="4px"
                     borderWidth="1px"
                     buttonPaddingBottom="0px"
                     buttonPaddingLeft="20px"
@@ -1306,14 +1306,14 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                     buttonPaddingTop="0px"
                     collapsable={false}
                     data-blade-component="button"
-                    defaultBackgroundColor="hsla(218, 89%, 51%, 0)"
-                    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-                    focusBackgroundColor="hsla(218, 89%, 51%, 0.18)"
-                    focusBorderColor="hsla(218, 89%, 51%, 1)"
-                    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+                    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+                    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+                    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+                    focusBorderColor="hsla(227, 100%, 59%, 1)"
+                    focusRingColor="hsla(227, 100%, 59%, 0.18)"
                     focusable={true}
-                    hoverBackgroundColor="hsla(218, 89%, 51%, 0.09)"
-                    hoverBorderColor="hsla(218, 89%, 51%, 1)"
+                    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+                    hoverBorderColor="hsla(227, 100%, 59%, 1)"
                     isFullWidth={true}
                     isLoading={false}
                     minHeight="36px"
@@ -1334,15 +1334,16 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                         {
                           "alignItems": "center",
                           "alignSelf": "center",
-                          "backgroundColor": "hsla(218, 89%, 51%, 0)",
-                          "borderColor": "hsla(218, 89%, 51%, 1)",
-                          "borderRadius": 2,
+                          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                          "borderColor": "hsla(227, 100%, 59%, 1)",
+                          "borderRadius": 4,
                           "borderStyle": "solid",
                           "borderWidth": 1,
                           "cursor": "pointer",
                           "display": "flex",
                           "justifyContent": "center",
                           "minHeight": 36,
+                          "overflow": "hidden",
                           "paddingBottom": 0,
                           "paddingLeft": 20,
                           "paddingRight": 20,
@@ -1353,8 +1354,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                           "width": "100%",
                         },
                         {
-                          "backgroundColor": "hsla(218, 89%, 51%, 0)",
-                          "borderColor": "hsla(218, 89%, 51%, 1)",
+                          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                          "borderColor": "hsla(227, 100%, 59%, 1)",
                         },
                       ]
                     }
@@ -1377,28 +1378,31 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                             "flexGrow": 1,
                             "flexShrink": 1,
                             "justifyContent": "center",
+                            "zIndex": 1,
                           },
                           {
                             "opacity": 1,
                           },
                         ]
                       }
+                      zIndex={1}
                     >
                       <Text
                         accessible={true}
-                        color="action.text.secondary.default"
+                        color="interactive.text.primary.subtle"
                         data-blade-component="base-text"
                         fontSize={100}
-                        fontWeight="bold"
+                        fontWeight="medium"
                         lineHeight={100}
                         style={
                           [
                             {
-                              "color": "hsla(218, 89%, 51%, 1)",
-                              "fontFamily": "Lato",
+                              "color": "hsla(227, 100%, 59%, 1)",
+                              "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
-                              "fontWeight": "700",
+                              "fontWeight": "500",
+                              "letterSpacing": 0,
                               "lineHeight": 20,
                               "marginBottom": 0,
                               "marginLeft": 0,
@@ -1493,7 +1497,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                   [
                     {},
                     {
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.12)",
                       "borderRadius": 16,
                       "content": "''",
                       "height": 4,
@@ -1542,7 +1546,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
             >
               <View
                 alignItems="center"
-                backgroundColor="hsla(0, 0%, 100%, 1)"
+                backgroundColor="popup.background.subtle"
                 borderRadius="max"
                 data-blade-component="base-box"
                 display="flex"
@@ -1595,7 +1599,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                   }
                   accessible={true}
                   collapsable={false}
-                  contrast="low"
+                  emphasis="intense"
                   focusable={true}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -1657,7 +1661,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                     >
                       <RNSVGPath
                         d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                        fill={4288851646}
+                        fill={4285959847}
                         propList={
                           [
                             "fill",
diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap
index 6a94c9059b3..c570d57ac8e 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap
+++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BottomSheet /> should render a BottomSheet ssr 1`] = `"<div id="root"><div data-testid="bottomsheet-backdrop" opacity="1" data-blade-component="base-box" class="BaseBox-bmPWx BottomSheetBackdropweb__StyledBottomSheetBackdrop-sc-198k9f6-0 dKA-dtE iDnIUr"></div><div data-blade-component="bottom-sheet" data-testid="bottomsheet-surface" aria-modal="true" role="dialog" style="opacity:1;pointer-events:all;height:0;bottom:0;top:auto;z-index:101" class="BottomSheetweb__BottomSheetSurface-qlloie-0 gEyCff"><div data-blade-component="base-box" class="BaseBox-bmPWx gWSczs"><div data-blade-component="BottomSheetGrabHandle" class="BottomSheetGrabHandleweb__BottomSheetGrabHandle-mo12ak-0 fNyPVP"></div><div data-blade-component="bottom-sheet-header" class="BaseBox-bmPWx bONxzW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><h6 class="StyledBaseText-dVBfTO iFUkNH" data-blade-component="heading">Address Details</h6><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 gJtMCP fpWUok"><div data-blade-component="base-box" class="BaseBox-bmPWx dXvdMm"><p class="StyledBaseText-dVBfTO gFBogl" data-blade-component="text">2</p></div></div></div></div></div></div><p class="StyledBaseText-dVBfTO ewTmHP" data-blade-component="text">Saving addresses will improve your checkout experience</p></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><button type="button" aria-label="Close" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 dOswfI"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div></div></div><div data-blade-component="bottom-sheet-body" data-testid="bottomsheet-body" style="-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;overflow:auto;touch-action:none" class="BaseBox-bmPWx eaEeoi"><div data-blade-component="base-box" class="BaseBox-bmPWx iaqkon"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">BottomSheet body</p></div></div><div data-blade-component="bottom-sheet-footer" class="BaseBox-bmPWx hZLBAO"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div><div data-blade-component="base-box" class="BaseBox-bmPWx dJEYFx"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 cfBjBp"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div class="StyledBaseText-dVBfTO iPAIis" data-blade-component="base-text">Remove address</div></div></button></div></div></div></div></div>"`;
+exports[`<BottomSheet /> should render a BottomSheet ssr 1`] = `"<div id="root"><div data-testid="bottomsheet-backdrop" opacity="1" data-blade-component="base-box" class="BaseBox-bmPWx BottomSheetBackdropweb__StyledBottomSheetBackdrop-sc-198k9f6-0 jkMvvn iDnIUr"></div><div data-blade-component="bottom-sheet" data-testid="bottomsheet-surface" aria-modal="true" role="dialog" style="opacity:1;pointer-events:all;height:0;bottom:0;top:auto;z-index:101" class="BottomSheetweb__BottomSheetSurface-qlloie-0 blXGyU"><div data-blade-component="base-box" class="BaseBox-bmPWx gWSczs"><div data-blade-component="BottomSheetGrabHandle" class="BottomSheetGrabHandleweb__BottomSheetGrabHandle-mo12ak-0 iHfLFm"></div><div data-blade-component="bottom-sheet-header" class="BaseBox-bmPWx bONxzW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">Address Details</p><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 igYNjO iHlsLG"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO fLTdAJ" data-blade-component="text">2</p></div></div></div></div></div></div><p class="StyledBaseText-dVBfTO bcGqUR" data-blade-component="text">Saving addresses will improve your checkout experience</p></div></div><div data-blade-component="box" class="BaseBox-bmPWx kgBOXG"><button type="button" aria-label="Close" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jCUyST"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div data-blade-component="bottom-sheet-body" data-testid="bottomsheet-body" style="-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;overflow:auto;touch-action:none" class="BaseBox-bmPWx eaEeoi"><div data-blade-component="base-box" class="BaseBox-bmPWx iaqkon"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">BottomSheet body</p></div></div><div data-blade-component="bottom-sheet-footer" class="BaseBox-bmPWx hZLBAO"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="base-box" class="BaseBox-bmPWx dJEYFx"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dJxnSi"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO dtZpXd" data-blade-component="base-text">Remove address</div></div></button></div></div></div></div></div>"`;
 
 exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 .c3.c3.c3.c3.c3 {
@@ -109,7 +109,8 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c15.c15.c15.c15.c15 {
-  background-color: hsla(155,100%,31%,0.09);
+  min-height: 20px;
+  background-color: hsla(150,100%,32%,0.09);
 }
 
 .c17.c17.c17.c17.c17 {
@@ -129,16 +130,13 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c25.c25.c25.c25.c25 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c27.c27.c27.c27.c27 {
@@ -193,6 +191,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c20.c20.c20.c20.c20 {
@@ -201,7 +200,8 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 
 .c21.c21.c21.c21.c21 {
   text-align: left;
-  background-color: hsla(155,100%,31%,0.09);
+  height: 20px;
+  background-color: hsla(150,100%,32%,0.09);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -211,7 +211,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
   right: 0px;
   bottom: 0px;
   left: 0px;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
   opacity: 1;
 }
 
@@ -233,7 +233,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -243,20 +243,27 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c24.c24.c24.c24.c24:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c24.c24.c24.c24.c24:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c24.c24.c24.c24.c24:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c26.c26.c26.c26.c26 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -266,27 +273,35 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c18.c18.c18.c18.c18 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -298,54 +313,70 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c19.c19.c19.c19.c19 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c29.c29.c29.c29.c29 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c35.c35.c35.c35.c35 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c23.c23.c23.c23.c23 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -397,7 +428,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
   content: '';
   width: 56px;
   height: 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.12);
   border-radius: 16px;
 }
 
@@ -405,7 +436,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
   background: hsla(0,0%,100%,1);
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   box-shadow: 0px -24px 48px -12px hsla(217,56%,17%,0.18);
   opacity: 0;
   pointer-events: none;
@@ -436,7 +467,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c22.c22.c22.c22.c22 {
-  background-color: hsla(155,100%,31%,0.09);
+  background-color: hsla(150,100%,32%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -451,7 +482,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c16.c16.c16.c16.c16 {
-  background-color: hsla(155,100%,31%,0.09);
+  background-color: hsla(150,100%,32%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -470,10 +501,10 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,0);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -489,6 +520,7 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -503,25 +535,25 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 }
 
 .c32.c32.c32.c32.c32:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c32.c32.c32.c32.c32:active {
-  background-color: hsla(218,89%,51%,0.32);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c32.c32.c32.c32.c32:focus-visible {
-  background-color: hsla(218,89%,51%,0.18);
-  border-color: hsla(218,89%,51%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c32.c32.c32.c32.c32 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -543,31 +575,31 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 
 @media screen and (min-width:320px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -630,12 +662,12 @@ exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
                     class="c10"
                     data-blade-component="base-box"
                   >
-                    <h6
+                    <p
                       class="c11"
-                      data-blade-component="heading"
+                      data-blade-component="text"
                     >
                       Address Details
-                    </h6>
+                    </p>
                     <div
                       class="c12"
                       data-blade-component="base-box"
diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
index a1f7230c8e0..e2d45e59ce5 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
+++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c5.c5.c5.c5.c5 {
@@ -34,7 +35,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   right: 0px;
   bottom: 0px;
   left: 0px;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
   opacity: 0;
 }
 
@@ -179,7 +180,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -189,42 +190,56 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c15.c15.c15.c15.c15:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c15.c15.c15.c15.c15:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c15.c15.c15.c15.c15:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,33%,29%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c21.c21.c21.c21.c21 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -235,14 +250,18 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c24.c24.c24.c24.c24 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -294,7 +313,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   content: '';
   width: 56px;
   height: 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.12);
   border-radius: 16px;
 }
 
@@ -302,7 +321,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   background: hsla(0,0%,100%,1);
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   box-shadow: 0px -24px 48px -12px hsla(217,56%,17%,0.18);
   opacity: 0;
   pointer-events: none;
@@ -336,10 +355,10 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,44%,23%,0);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(211,20%,52%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -355,6 +374,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -369,22 +389,22 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c1.c1.c1.c1.c1:hover {
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c1.c1.c1.c1.c1:active {
-  background-color: hsla(216,15%,54%,0.32);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c1.c1.c1.c1.c1:focus-visible {
-  background-color: hsla(216,15%,54%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c1.c1.c1.c1.c1 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -419,11 +439,15 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c17.c17.c17.c17.c17:hover:not([aria-disabled=true]) {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c17.c17.c17.c17.c17[aria-selected=true] {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
+}
+
+.c17.c17.c17.c17.c17[aria-selected=true]:hover {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c23.c23.c23.c23.c23 {
@@ -442,11 +466,15 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c23.c23.c23.c23.c23:hover:not([aria-disabled=true]) {
-  background-color: hsla(9,91%,56%,0.09);
+  background-color: hsla(4,74%,49%,0.09);
 }
 
 .c23.c23.c23.c23.c23[aria-selected=true] {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
+}
+
+.c23.c23.c23.c23.c23[aria-selected=true]:hover {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 <body>
@@ -800,7 +828,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 }
 
 .c15.c15.c15.c15.c15 {
-  background-color: hsla(155,100%,31%,0.09);
+  min-height: 20px;
+  background-color: hsla(150,100%,32%,0.09);
 }
 
 .c17.c17.c17.c17.c17 {
@@ -820,16 +849,13 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c25.c25.c25.c25.c25 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c27.c27.c27.c27.c27 {
@@ -884,6 +910,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c0.c0.c0.c0.c0 {
@@ -893,7 +920,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
   right: 0px;
   bottom: 0px;
   left: 0px;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
   opacity: 1;
 }
 
@@ -903,7 +930,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 
 .c21.c21.c21.c21.c21 {
   text-align: left;
-  background-color: hsla(155,100%,31%,0.09);
+  height: 20px;
+  background-color: hsla(150,100%,32%,0.09);
 }
 
 .c24.c24.c24.c24.c24 {
@@ -924,7 +952,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -934,20 +962,27 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 }
 
 .c24.c24.c24.c24.c24:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c24.c24.c24.c24.c24:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c24.c24.c24.c24.c24:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c26.c26.c26.c26.c26 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -957,27 +992,35 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c18.c18.c18.c18.c18 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -989,54 +1032,70 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 }
 
 .c19.c19.c19.c19.c19 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c29.c29.c29.c29.c29 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c35.c35.c35.c35.c35 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c23.c23.c23.c23.c23 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1088,7 +1147,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
   content: '';
   width: 56px;
   height: 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.12);
   border-radius: 16px;
 }
 
@@ -1096,7 +1155,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
   background: hsla(0,0%,100%,1);
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   box-shadow: 0px -24px 48px -12px hsla(217,56%,17%,0.18);
   opacity: 0;
   pointer-events: none;
@@ -1127,7 +1186,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 }
 
 .c16.c16.c16.c16.c16 {
-  background-color: hsla(155,100%,31%,0.09);
+  background-color: hsla(150,100%,32%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1146,10 +1205,10 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,0);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1165,6 +1224,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1179,25 +1239,25 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 }
 
 .c32.c32.c32.c32.c32:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c32.c32.c32.c32.c32:active {
-  background-color: hsla(218,89%,51%,0.32);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c32.c32.c32.c32.c32:focus-visible {
-  background-color: hsla(218,89%,51%,0.18);
-  border-color: hsla(218,89%,51%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c32.c32.c32.c32.c32 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1209,7 +1269,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 }
 
 .c22.c22.c22.c22.c22 {
-  background-color: hsla(155,100%,31%,0.09);
+  background-color: hsla(150,100%,32%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1234,31 +1294,31 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
 
 @media screen and (min-width:320px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c25.c25.c25.c25.c25 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -1320,12 +1380,12 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly on opened sta
                       class="c10"
                       data-blade-component="base-box"
                     >
-                      <h6
+                      <p
                         class="c11"
-                        data-blade-component="heading"
+                        data-blade-component="text"
                       >
                         Address Details
-                      </h6>
+                      </p>
                       <div
                         class="c12"
                         data-blade-component="base-box"
@@ -1534,7 +1594,7 @@ exports[`<BottomSheet /> should render empty header with padding 0 1`] = `
   right: 0px;
   bottom: 0px;
   left: 0px;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
   opacity: 1;
 }
 
@@ -1590,7 +1650,7 @@ exports[`<BottomSheet /> should render empty header with padding 0 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -1600,28 +1660,38 @@ exports[`<BottomSheet /> should render empty header with padding 0 1`] = `
 }
 
 .c8.c8.c8.c8.c8:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c8.c8.c8.c8.c8:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c8.c8.c8.c8.c8:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -1668,7 +1738,7 @@ exports[`<BottomSheet /> should render empty header with padding 0 1`] = `
   content: '';
   width: 56px;
   height: 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.12);
   border-radius: 16px;
 }
 
@@ -1676,7 +1746,7 @@ exports[`<BottomSheet /> should render empty header with padding 0 1`] = `
   background: hsla(0,0%,100%,1);
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   box-shadow: 0px -24px 48px -12px hsla(217,56%,17%,0.18);
   opacity: 0;
   pointer-events: none;
diff --git a/packages/blade/src/components/BottomSheet/getBottomSheetGrabHandleStyles.ts b/packages/blade/src/components/BottomSheet/getBottomSheetGrabHandleStyles.ts
index edd78779632..89bf743f621 100644
--- a/packages/blade/src/components/BottomSheet/getBottomSheetGrabHandleStyles.ts
+++ b/packages/blade/src/components/BottomSheet/getBottomSheetGrabHandleStyles.ts
@@ -11,7 +11,7 @@ const getHandlePartStyles = ({ theme }: { theme: Theme }): CSSObject => {
     content: "''",
     width: makeSize(size[56]),
     height: makeSize(size[4]),
-    backgroundColor: theme.colors.brand.gray.a100.lowContrast,
+    backgroundColor: theme.colors.interactive.background.gray.faded,
     // TODO: we do not have 16px radius token
     borderRadius: makeSpace(theme.spacing[5]),
   };
diff --git a/packages/blade/src/components/Box/BaseBox/baseBoxStyles.ts b/packages/blade/src/components/Box/BaseBox/baseBoxStyles.ts
index bdba3ccb3b9..03dd4dc55b6 100644
--- a/packages/blade/src/components/Box/BaseBox/baseBoxStyles.ts
+++ b/packages/blade/src/components/Box/BaseBox/baseBoxStyles.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/prefer-ts-expect-error */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 import type { CSSObject } from 'styled-components';
 import type {
   BaseBoxProps,
@@ -14,6 +16,11 @@ import { isReactNative, getMediaQuery } from '~utils';
 import type { Theme } from '~components/BladeProvider';
 import { makeSpace } from '~utils/makeSpace';
 import { makeBorderSize } from '~utils/makeBorderSize';
+import type { DotNotationSpacingStringToken } from '~utils/types';
+
+const isSpacingToken = (value: string): value is DotNotationSpacingStringToken => {
+  return typeof value === 'string' && value.startsWith('spacing.');
+};
 
 const getSpacingValue = (
   spacingValue:
@@ -26,8 +33,8 @@ const getSpacingValue = (
     return undefined;
   }
 
-  const responsiveSpacingValue: SpacingValueType | SpacingValueType[] = getResponsiveValue(
-    spacingValue as MakeValueResponsive<string | string[]>,
+  const responsiveSpacingValue = getResponsiveValue(
+    spacingValue as MakeValueResponsive<SpacingValueType | SpacingValueType[]>,
     breakpoint,
   );
 
@@ -43,9 +50,9 @@ const getSpacingValue = (
     return responsiveSpacingValue.map((value) => getSpacingValue(value, theme)).join(' ');
   }
 
-  if (typeof responsiveSpacingValue === 'string' && responsiveSpacingValue.startsWith('spacing.')) {
+  if (isSpacingToken(responsiveSpacingValue)) {
     const spacingReturnValue = getIn(theme, responsiveSpacingValue);
-    return isEmpty(spacingReturnValue) ? makeSpace(spacingReturnValue) : undefined;
+    return isEmpty(spacingReturnValue) ? makeSpace(spacingReturnValue!) : undefined;
   }
 
   // pixel or with unit values
@@ -58,6 +65,7 @@ const getColorValue = (
   breakpoint?: keyof Breakpoints,
 ): string => {
   const responsiveBackgroundValue = getResponsiveValue(color, breakpoint);
+  // @ts-expect-error: We always return any from getResponsiveValue so value can't be inferred here
   const tokenValue = getIn(theme, `colors.${responsiveBackgroundValue}`);
   return tokenValue ?? responsiveBackgroundValue;
 };
@@ -70,7 +78,8 @@ const getBorderRadiusValue = (
   const responsiveBorderRadiusValue = getResponsiveValue(borderRadius, breakpoint);
   return isEmpty(responsiveBorderRadiusValue)
     ? undefined
-    : makeBorderSize(getIn(theme, `border.radius.${responsiveBorderRadiusValue}`));
+    : // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex
+      makeBorderSize(getIn(theme, `border.radius.${responsiveBorderRadiusValue}`));
 };
 
 const getBorderWidthValue = (
@@ -81,7 +90,8 @@ const getBorderWidthValue = (
   const responsiveBorderWidthValue = getResponsiveValue(borderWidth, breakpoint);
   return isEmpty(responsiveBorderWidthValue)
     ? undefined
-    : makeBorderSize(getIn(theme, `border.width.${responsiveBorderWidthValue}`));
+    : // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex
+      makeBorderSize(getIn(theme, `border.width.${responsiveBorderWidthValue}`));
 };
 
 export const getElevationValue = (
@@ -92,7 +102,9 @@ export const getElevationValue = (
   const responsiveElevationValue = getResponsiveValue(elevation, breakpoint);
   return isEmpty(responsiveElevationValue)
     ? undefined
-    : getIn(theme, `elevation.${responsiveElevationValue}`);
+    : // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex
+      getIn(theme, `elevation.${responsiveElevationValue!}`);
 };
 
 const getAllProps = (
diff --git a/packages/blade/src/components/Box/BaseBox/getResponsiveValue.web.ts b/packages/blade/src/components/Box/BaseBox/getResponsiveValue.web.ts
index dab6bbe75bc..631015cb53d 100644
--- a/packages/blade/src/components/Box/BaseBox/getResponsiveValue.web.ts
+++ b/packages/blade/src/components/Box/BaseBox/getResponsiveValue.web.ts
@@ -30,7 +30,7 @@ const getResponsiveValue = <T extends string | number | string[]>(
   value: MakeValueResponsive<T> | undefined,
   breakpoint: keyof Breakpoints = 'base',
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-): any | undefined => {
+): T | undefined => {
   if (value === undefined || value === null) {
     return undefined;
   }
@@ -57,7 +57,7 @@ const getResponsiveValue = <T extends string | number | string[]>(
      * ```
      */
     if (breakpoint === 'base') {
-      return value;
+      return value as T;
     }
 
     return undefined;
diff --git a/packages/blade/src/components/Box/BaseBox/storybookArgTypes.ts b/packages/blade/src/components/Box/BaseBox/storybookArgTypes.ts
index 17610f8b862..37a4be5fa01 100644
--- a/packages/blade/src/components/Box/BaseBox/storybookArgTypes.ts
+++ b/packages/blade/src/components/Box/BaseBox/storybookArgTypes.ts
@@ -209,6 +209,12 @@ const getBoxArgTypes = (): StorybookArgTypes<BoxProps> => {
         options: validBoxAsValues,
       },
     },
+    elevation: {
+      control: {
+        type: 'radio',
+        options: ['lowRaised', 'midRaised', 'highRaised'],
+      },
+    },
   };
 };
 
diff --git a/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts b/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts
index 25fcdf15f6a..04e382d8e40 100644
--- a/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts
+++ b/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts
@@ -4,9 +4,10 @@ import type { MarginProps, PaddingProps, SpacingValueType } from './spacingTypes
 import type { MakeObjectResponsive } from './responsiveTypes';
 import type { Theme } from '~components/BladeProvider';
 import type { Border, Elevation } from '~tokens/global';
-import type { DotNotationColorStringToken, PickCSSByPlatform, TestID } from '~utils/types';
+import type { PickCSSByPlatform, TestID } from '~utils/types';
 import type { Platform } from '~utils';
 import type { BladeCommonEvents } from '~components/types';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 
 type LayoutProps = MakeObjectResponsive<
   {
@@ -97,11 +98,12 @@ type GridProps = MakeObjectResponsive<
   >
 >;
 
-type ColorObjects = 'feedback' | 'surface' | 'action';
-type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<
-  Theme['colors'][T]['background']
->}`;
-type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationColorStringToken<
+type ColorObjects = 'feedback' | 'surface' | 'interactive';
+type BackgroundOnlyColorObjects = 'popup' | 'overlay';
+type BackgroundColorString<
+  T extends ColorObjects | BackgroundOnlyColorObjects
+> = `${T}.background.${DotNotationToken<Theme['colors'][T]['background']>}`;
+type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationToken<
   Theme['colors'][T]['border']
 >}`;
 
@@ -120,22 +122,20 @@ const validBoxAsValues = [
 
 type BoxAsType = typeof validBoxAsValues[number];
 
-type BrandColorString = `brand.${DotNotationColorStringToken<Theme['colors']['brand']>}`;
-
 // Visual props that are common for both Box and BaseBox
 type CommonBoxVisualProps = MakeObjectResponsive<
   {
     borderRadius: keyof Border['radius'];
     borderWidth: keyof Border['width'];
-    borderColor: BorderColorString<'surface'> | BrandColorString;
+    borderColor: BorderColorString<'surface'>;
     borderTopWidth: keyof Border['width'];
-    borderTopColor: BorderColorString<'surface'> | BrandColorString;
+    borderTopColor: BorderColorString<'surface'>;
     borderRightWidth: keyof Border['width'];
-    borderRightColor: BorderColorString<'surface'> | BrandColorString;
+    borderRightColor: BorderColorString<'surface'>;
     borderBottomWidth: keyof Border['width'];
-    borderBottomColor: BorderColorString<'surface'> | BrandColorString;
+    borderBottomColor: BorderColorString<'surface'>;
     borderLeftWidth: keyof Border['width'];
-    borderLeftColor: BorderColorString<'surface'> | BrandColorString;
+    borderLeftColor: BorderColorString<'surface'>;
     borderTopLeftRadius: keyof Border['radius'];
     borderTopRightRadius: keyof Border['radius'];
     borderBottomRightRadius: keyof Border['radius'];
@@ -174,8 +174,9 @@ type BaseBoxVisualProps = MakeObjectResponsive<
     backgroundColor:
       | BackgroundColorString<'feedback'>
       | BackgroundColorString<'surface'>
-      | BackgroundColorString<'action'>
-      | BrandColorString
+      | BackgroundColorString<'interactive'>
+      | BackgroundColorString<'overlay'>
+      | BackgroundColorString<'popup'>
       | 'transparent'
       | (string & Record<never, never>);
     lineHeight: SpacingValueType;
@@ -194,7 +195,7 @@ type BaseBoxVisualProps = MakeObjectResponsive<
 
 // Visual props that are specific to Box
 type BoxVisualProps = MakeObjectResponsive<{
-  backgroundColor: BackgroundColorString<'surface'> | BrandColorString | 'transparent';
+  backgroundColor: BackgroundColorString<'surface'> | 'transparent';
 }> & {
   // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object
   // styled-components do not support passing `as` prop as an object
diff --git a/packages/blade/src/components/Box/Box.stories.tsx b/packages/blade/src/components/Box/Box.stories.tsx
index c6f1d912b8b..0db8bb1749d 100644
--- a/packages/blade/src/components/Box/Box.stories.tsx
+++ b/packages/blade/src/components/Box/Box.stories.tsx
@@ -4,7 +4,7 @@ import { getBoxArgTypes } from './BaseBox/storybookArgTypes';
 import type { BoxRefType } from './BaseBox/types';
 import type { BoxProps } from '.';
 import { Box } from '.';
-import { Text, Title } from '~components/Typography';
+import { Text, Heading } from '~components/Typography';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { LinkToStorybook } from '~utils/storybook/LinkToStorybook';
 import { castWebType, isReactNative } from '~utils';
@@ -32,7 +32,7 @@ const BoxStoryMeta = {
           propsDescription="All Box props support responsive objects. Props marked with 💅🏼 next to their names are the props that can also be used as styled-props on other blade components. Check out styled-props documentation for more details."
         >
           <Box paddingY="spacing.5" paddingBottom="spacing.8">
-            <Title size="medium">Layout Primitives Documentation</Title>
+            <Heading size="xlarge">Layout Primitives Documentation</Heading>
             <Text marginTop="spacing.3">
               Check Out{' '}
               <LinkToStorybook url="Components/Layout Primitives (Box)/How to Create Layouts?">
@@ -65,11 +65,11 @@ export const Responsive = (args: BoxProps): React.ReactElement => {
     <>
       <Text>Change screen size to see flexDirection switch between row and column</Text>
       <Box {...args}>
-        <Box flex="1" backgroundColor="brand.primary.500" padding="spacing.5">
-          <Text contrast="high">Box1</Text>
+        <Box flex="1" backgroundColor="surface.background.primary.intense" padding="spacing.5">
+          <Text color="surface.text.staticWhite.normal">Box1</Text>
         </Box>
-        <Box flex="1" backgroundColor="surface.background.level2.highContrast" padding="spacing.5">
-          <Text contrast="high">Box2</Text>
+        <Box flex="1" backgroundColor="surface.background.cloud.intense" padding="spacing.5">
+          <Text color="surface.text.onCloud.onIntense">Box2</Text>
         </Box>
       </Box>
     </>
@@ -82,6 +82,35 @@ Responsive.args = {
   flexDirection: { base: 'column', m: 'row' },
 } as BoxProps;
 
+export const Elevations = (args: BoxProps): React.ReactElement => {
+  return (
+    <Box
+      backgroundColor="surface.background.gray.moderate"
+      paddingY="spacing.11"
+      paddingX={isReactNative() ? 'spacing.0' : 'spacing.4'}
+      display="flex"
+      flexDirection="row"
+      gap="spacing.8"
+    >
+      <Box {...args} elevation="lowRaised">
+        <Text>Low </Text>
+      </Box>
+      <Box {...args} elevation="midRaised">
+        <Text>Mid</Text>
+      </Box>
+      <Box {...args} elevation="highRaised">
+        <Text>High</Text>
+      </Box>
+    </Box>
+  );
+};
+
+Elevations.args = {
+  padding: 'spacing.8',
+  backgroundColor: 'surface.background.level2.lowContrast',
+  borderRadius: 'large',
+} as BoxProps;
+
 export const AsSection = (args: BoxProps): React.ReactElement => {
   if (isReactNative()) {
     return (
@@ -106,7 +135,7 @@ export const WithRef = (args: BoxProps): React.ReactElement => {
   const ref = React.useRef<BoxRefType>(null);
 
   return (
-    <Box height="300px" overflow="auto" backgroundColor="surface.background.level2.lowContrast">
+    <Box height="300px" overflow="auto" backgroundColor="surface.background.gray.moderate">
       <Button
         onClick={() => {
           if (!isReactNative()) {
@@ -164,7 +193,7 @@ export const WithDragAndDropEvents = (args: BoxProps): React.ReactElement => {
       <Box
         {...args}
         margin="spacing.5"
-        backgroundColor="surface.background.level2.lowContrast"
+        backgroundColor="surface.background.gray.moderate"
         onDragEnter={(e) => {
           e.preventDefault();
           console.log('onDragEnter', e);
@@ -198,7 +227,7 @@ export const WithId = (): React.ReactElement => {
       <Box height="100vh" as="section" id="section-1">
         <Text>
           Section of the page with id{' '}
-          <Text as="span" weight="bold">
+          <Text as="span" weight="semibold">
             section-1
           </Text>{' '}
           that we want to scroll to.
@@ -211,7 +240,7 @@ export const WithId = (): React.ReactElement => {
 export const Polygon = (): React.ReactElement => {
   return (
     <Box
-      backgroundColor="brand.primary.500"
+      backgroundColor="surface.background.primary.intense"
       padding="spacing.3"
       margin="spacing.3"
       height="300px"
@@ -219,7 +248,7 @@ export const Polygon = (): React.ReactElement => {
       transformOrigin="top left"
       transform="rotate(10deg) translate(100px, 20%)"
     >
-      <Text as="span" weight="bold" contrast="high">
+      <Text as="span" weight="semibold" color="surface.text.staticWhite.normal">
         Custom Polygon
       </Text>
     </Box>
diff --git a/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx b/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx
index 0b61e4eab8b..5e72c87b289 100644
--- a/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx
+++ b/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx
@@ -3,7 +3,7 @@ import type { BaseBoxProps } from './BaseBox';
 import BaseBox from './BaseBox';
 import { Box } from '.';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
-import { Code, Heading, Text, Title } from '~components/Typography';
+import { Code, Heading, Text } from '~components/Typography';
 import {
   Sandbox,
   SandboxProvider,
@@ -61,7 +61,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
       showStorybookControls={false}
     >
       <hr />
-      <Title size="small">Table of Content</Title>
+      <Heading size="large">Table of Content</Heading>
       <List marginY="spacing.6" marginBottom="spacing.8">
         <ListItem>
           <ScrollIntoViewLink href="#playground">Playground</ScrollIntoViewLink>
@@ -113,7 +113,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
       </List>
       <hr />
       <Section id="playground">
-        <Title size="small">Playground</Title>
+        <Heading size="large">Playground</Heading>
         <Sandbox padding="spacing.0">
           {`
             import { Box, Text } from '@razorpay/blade/components'
@@ -154,9 +154,9 @@ function LayoutPrimitivesDocs(): React.ReactElement {
         </Text>
       </Section>
       <Section id="box-usage">
-        <Title size="small" marginBottom="spacing.3">
+        <Heading size="large" marginBottom="spacing.3">
           📦 Box Usage
-        </Title>
+        </Heading>
         <Text>
           Box is a primitive Layout component which can be used for creating different responsive
           layouts in UI. You might have used <Code>Box</Code> in other component libraries as well
@@ -289,9 +289,9 @@ function LayoutPrimitivesDocs(): React.ReactElement {
       </Section>
 
       <Section id="styled-props" paddingBottom="spacing.0">
-        <Title size="small" marginBottom="spacing.3">
+        <Heading size="large" marginBottom="spacing.3">
           💅🏼 Styled Props for Blade Components
-        </Title>
+        </Heading>
         <Text>
           Want to add spacing between 2 elements? add layout props directly on the Blade components
           ✨
@@ -357,9 +357,9 @@ function LayoutPrimitivesDocs(): React.ReactElement {
       </Section>
 
       <Section id="questions-you-might-have" paddingTop="spacing.0">
-        <Title size="small" marginBottom="spacing.3" marginTop="spacing.6">
+        <Heading size="large" marginBottom="spacing.3" marginTop="spacing.6">
           🧐 Questions you might have
-        </Title>
+        </Heading>
         <Text>
           This is a summary and some questions you might have regarding API. You can check out
           complete API decisions at{' '}
@@ -473,7 +473,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
         </BaseBox>
       </Section>
       <Section id="references">
-        <Title size="small">References</Title>
+        <Heading size="large">References</Heading>
         <List marginTop="spacing.4">
           <ListItem>
             <ListItemLink href="/?path=/docs/components-layout-primitives-box-box--default&globals=measureEnabled:false">
diff --git a/packages/blade/src/components/Box/__tests__/BaseBox.native.test.tsx b/packages/blade/src/components/Box/__tests__/BaseBox.native.test.tsx
index 04d93b1766f..7c849b3b01c 100644
--- a/packages/blade/src/components/Box/__tests__/BaseBox.native.test.tsx
+++ b/packages/blade/src/components/Box/__tests__/BaseBox.native.test.tsx
@@ -37,7 +37,7 @@ describe('<BaseBox />', () => {
       <BaseBox
         width="200px"
         height="200px"
-        backgroundColor="surface.background.level1.lowContrast"
+        backgroundColor="surface.background.cloud.intense"
         elevation="highRaised"
       >
         <Text>Should only have 1 View wrapper</Text>
diff --git a/packages/blade/src/components/Box/__tests__/Box.native.test.tsx b/packages/blade/src/components/Box/__tests__/Box.native.test.tsx
index 85ba417602a..a9b1d0e1637 100644
--- a/packages/blade/src/components/Box/__tests__/Box.native.test.tsx
+++ b/packages/blade/src/components/Box/__tests__/Box.native.test.tsx
@@ -115,14 +115,14 @@ describe('<Box />', () => {
   // https://github.com/razorpay/blade/issues/1624
   it('should apply borderBottomColor prop to border bottom only', () => {
     const { toJSON } = renderWithTheme(
-      <Box borderBottomColor="surface.border.normal.lowContrast">I am Visible</Box>,
+      <Box borderBottomColor="surface.border.gray.normal">I am Visible</Box>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('should apply borderColor prop to all borders', () => {
     const { toJSON } = renderWithTheme(
-      <Box borderColor="surface.border.normal.lowContrast">I am Visible</Box>,
+      <Box borderColor="surface.border.gray.normal">I am Visible</Box>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Box/__tests__/Box.web.test.tsx b/packages/blade/src/components/Box/__tests__/Box.web.test.tsx
index d1ec9e8147c..72a6273f483 100644
--- a/packages/blade/src/components/Box/__tests__/Box.web.test.tsx
+++ b/packages/blade/src/components/Box/__tests__/Box.web.test.tsx
@@ -101,11 +101,13 @@ describe('<Box />', () => {
   // https://github.com/razorpay/blade/issues/1480
   it('should not throw error and render properly with undefined backgroundColor', () => {
     const { container } = renderWithTheme(
-      <Box backgroundColor={{ base: 'brand.primary.300', l: undefined }}>I am Visible</Box>,
+      <Box backgroundColor={{ base: 'surface.background.cloud.intense', l: undefined }}>
+        I am Visible
+      </Box>,
     );
     expect(container).toMatchInlineSnapshot(`
       .c0.c0.c0.c0.c0 {
-        background-color: hsla(218,89%,51%,0.09);
+        background-color: hsla(200,61%,20%,1);
       }
 
       <div>
@@ -121,16 +123,18 @@ describe('<Box />', () => {
 
   it('should accept "transparent" value for backgroundColor', () => {
     const { container } = renderWithTheme(
-      <Box backgroundColor={{ base: 'brand.primary.300', l: 'transparent' }}>I am Visible</Box>,
+      <Box backgroundColor={{ base: 'surface.background.cloud.intense', l: 'transparent' }}>
+        I am Visible
+      </Box>,
     );
     expect(container).toMatchInlineSnapshot(`
       .c0.c0.c0.c0.c0 {
-        background-color: hsla(218,89%,51%,0.09);
+        background-color: hsla(200,61%,20%,1);
       }
 
       @media screen and (min-width:1024px) {
         .c0.c0.c0.c0.c0 {
-          background-color: transparent;
+          background-color: hsla(0,0%,100%,0);
         }
       }
 
@@ -205,14 +209,14 @@ describe('<Box />', () => {
   // https://github.com/razorpay/blade/issues/1624
   it('should apply borderBottomColor prop to border bottom only', () => {
     const { container } = renderWithTheme(
-      <Box borderBottomColor="surface.border.normal.lowContrast">I am Visible</Box>,
+      <Box borderBottomColor="surface.border.gray.normal">I am Visible</Box>,
     );
     expect(container).toMatchSnapshot();
   });
 
   it('should apply borderColor prop to all borders', () => {
     const { container } = renderWithTheme(
-      <Box borderColor="surface.border.normal.lowContrast">I am Visible</Box>,
+      <Box borderColor="surface.border.gray.normal">I am Visible</Box>,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.native.test.tsx.snap b/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.native.test.tsx.snap
index 6ce02fb9d23..1b072fe2bb5 100644
--- a/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.native.test.tsx.snap
+++ b/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.native.test.tsx.snap
@@ -9,26 +9,26 @@ exports[`<BaseBox /> should render BaseBox component with elevation 1`] = `
   }
 >
   <View
-    backgroundColor="surface.background.level1.lowContrast"
+    backgroundColor="surface.background.cloud.intense"
     data-blade-component="base-box"
     elevation="highRaised"
     height="200px"
     style={
       [
         {
-          "backgroundColor": "hsla(220, 30%, 96%, 1)",
+          "backgroundColor": "hsla(200, 61%, 20%, 1)",
           "height": 200,
           "width": 200,
         },
         {
-          "elevation": 26,
-          "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+          "elevation": 24,
+          "shadowColor": "hsla(217, 56%, 17%, 0.8)",
           "shadowOffset": {
-            "height": 18,
+            "height": 6,
             "width": 0,
           },
-          "shadowOpacity": 0.2,
-          "shadowRadius": 12,
+          "shadowOpacity": 0.16,
+          "shadowRadius": 14,
         },
         undefined,
       ]
@@ -37,7 +37,7 @@ exports[`<BaseBox /> should render BaseBox component with elevation 1`] = `
   >
     <Text
       accessible={true}
-      color="surface.text.normal.lowContrast"
+      color="surface.text.gray.normal"
       data-blade-component="text"
       fontFamily="text"
       fontSize={100}
@@ -47,11 +47,12 @@ exports[`<BaseBox /> should render BaseBox component with elevation 1`] = `
       style={
         [
           {
-            "color": "hsla(217, 56%, 17%, 1)",
-            "fontFamily": "Lato",
+            "color": "hsla(212, 39%, 16%, 1)",
+            "fontFamily": "Inter",
             "fontSize": 14,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "letterSpacing": 0,
             "lineHeight": 20,
             "marginBottom": 0,
             "marginLeft": 0,
diff --git a/packages/blade/src/components/Box/__tests__/__snapshots__/Box.native.test.tsx.snap b/packages/blade/src/components/Box/__tests__/__snapshots__/Box.native.test.tsx.snap
index d50e8a954c0..84c6018272d 100644
--- a/packages/blade/src/components/Box/__tests__/__snapshots__/Box.native.test.tsx.snap
+++ b/packages/blade/src/components/Box/__tests__/__snapshots__/Box.native.test.tsx.snap
@@ -9,12 +9,12 @@ exports[`<Box /> should apply borderBottomColor prop to border bottom only 1`] =
   }
 >
   <View
-    borderBottomColor="surface.border.normal.lowContrast"
+    borderBottomColor="surface.border.gray.normal"
     data-blade-component="box"
     style={
       [
         {
-          "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+          "borderBottomColor": "hsla(211, 24%, 65%, 1)",
           "borderBottomStyle": "solid",
         },
       ]
@@ -34,12 +34,12 @@ exports[`<Box /> should apply borderColor prop to all borders 1`] = `
   }
 >
   <View
-    borderColor="surface.border.normal.lowContrast"
+    borderColor="surface.border.gray.normal"
     data-blade-component="box"
     style={
       [
         {
-          "borderColor": "hsla(216, 15%, 54%, 0.18)",
+          "borderColor": "hsla(211, 24%, 65%, 1)",
           "borderStyle": "solid",
         },
       ]
diff --git a/packages/blade/src/components/Box/__tests__/__snapshots__/Box.web.test.tsx.snap b/packages/blade/src/components/Box/__tests__/__snapshots__/Box.web.test.tsx.snap
index cdb2d73da30..e44ad7613b7 100644
--- a/packages/blade/src/components/Box/__tests__/__snapshots__/Box.web.test.tsx.snap
+++ b/packages/blade/src/components/Box/__tests__/__snapshots__/Box.web.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Box /> should apply borderBottomColor prop to border bottom only 1`] = `
 .c0.c0.c0.c0.c0 {
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,24%,65%,1);
   border-bottom-style: solid;
 }
 
@@ -48,7 +48,7 @@ exports[`<Box /> should apply borderBottomColor prop to border bottom only 1`] =
 
 exports[`<Box /> should apply borderColor prop to all borders 1`] = `
 .c0.c0.c0.c0.c0 {
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,24%,65%,1);
   border-style: solid;
 }
 
diff --git a/packages/blade/src/components/Box/__tests__/baseBoxStyles.native.test.ts b/packages/blade/src/components/Box/__tests__/baseBoxStyles.native.test.ts
index a9c266ae69b..917ef64b7a3 100644
--- a/packages/blade/src/components/Box/__tests__/baseBoxStyles.native.test.ts
+++ b/packages/blade/src/components/Box/__tests__/baseBoxStyles.native.test.ts
@@ -7,7 +7,7 @@ import {
 import { getResponsiveValue } from '../BaseBox/getResponsiveValue.native';
 import type { BaseBoxProps } from '../BaseBox';
 import { removeUndefinedValues } from './baseBoxStyles.test';
-import paymentLightTheme from '~components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme';
+import bladeLightTheme from '~components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme';
 import type { Theme } from '~components/BladeProvider';
 
 describe('getResponsiveValue', () => {
@@ -36,18 +36,18 @@ describe('getResponsiveValue', () => {
 
 describe('getSpacingValue', () => {
   it('should always return s token value if exist', () => {
-    expect(getSpacingValue('spacing.2', paymentLightTheme, 'base')).toBe('4px');
-    expect(getSpacingValue('spacing.2', paymentLightTheme, 'm')).toBe(undefined);
+    expect(getSpacingValue('spacing.2', bladeLightTheme, 'base')).toBe('4px');
+    expect(getSpacingValue('spacing.2', bladeLightTheme, 'm')).toBe(undefined);
 
     const responsiveSpacingProp: BaseBoxProps['padding'] = {
       base: 'spacing.10',
       xs: '12px',
       s: ['spacing.1', '12px', '100%', 'auto'],
     };
-    expect(getSpacingValue(responsiveSpacingProp, paymentLightTheme, 'base')).toBe(
+    expect(getSpacingValue(responsiveSpacingProp, bladeLightTheme, 'base')).toBe(
       '2px 12px 100% auto',
     );
-    expect(getSpacingValue(responsiveSpacingProp, paymentLightTheme, 'xs')).toBe(
+    expect(getSpacingValue(responsiveSpacingProp, bladeLightTheme, 'xs')).toBe(
       '2px 12px 100% auto',
     );
   });
@@ -62,7 +62,7 @@ describe('getBaseBoxStyles', () => {
         m: '22px',
         xl: 'auto',
       },
-      theme: paymentLightTheme,
+      theme: bladeLightTheme,
     });
     const boxStylesWithoutUndefined = JSON.parse(JSON.stringify(boxStyles));
     expect(boxStylesWithoutUndefined).toMatchInlineSnapshot(`
@@ -75,7 +75,7 @@ describe('getBaseBoxStyles', () => {
 
 describe('getAllMediaQueries', () => {
   it('should return empty object', () => {
-    expect(getAllMediaQueries({ display: 'flex', theme: paymentLightTheme })).toMatchInlineSnapshot(
+    expect(getAllMediaQueries({ display: 'flex', theme: bladeLightTheme })).toMatchInlineSnapshot(
       `{}`,
     );
   });
@@ -87,7 +87,7 @@ describe('getAllProps', () => {
       display: 'flex',
       padding: { base: 'spacing.1', s: '20px' },
       margin: { m: 'spacing.1' },
-      theme: paymentLightTheme,
+      theme: bladeLightTheme,
     };
 
     expect(removeUndefinedValues(getAllProps(baseBoxProps))).toMatchInlineSnapshot(`
diff --git a/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts b/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts
index 2db0c00d9eb..53e57b2041d 100644
--- a/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts
+++ b/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts
@@ -4,7 +4,7 @@ import {
   getBaseBoxStyles,
   getBorderRadiusValue,
 } from '../BaseBox/baseBoxStyles';
-import paymentLightTheme from '~components/BladeProvider/__tests__/paymentLightTheme';
+import bladeLightTheme from '~components/BladeProvider/__tests__/bladeLightTheme';
 
 export const removeUndefinedValues = (props: Record<string, unknown>): Record<string, unknown> =>
   JSON.parse(JSON.stringify(props));
@@ -12,40 +12,38 @@ export const removeUndefinedValues = (props: Record<string, unknown>): Record<st
 describe('getColorValue', () => {
   it('should return correct background color value', () => {
     expect(
-      getColorValue('action.background.primary.active', paymentLightTheme, 'base'),
-    ).toMatchInlineSnapshot(`"hsla(230, 100%, 42%, 1)"`);
-    expect(getColorValue('red', paymentLightTheme, 'base')).toBe('red');
-    expect(getColorValue('red', paymentLightTheme, 'm')).toBe(undefined);
-    expect(getColorValue({ base: 'red', s: '#f30' }, paymentLightTheme, 's')).toBe('#f30');
+      getColorValue('interactive.background.primary.default', bladeLightTheme, 'base'),
+    ).toMatchInlineSnapshot(`"hsla(227, 100%, 59%, 1)"`);
+    expect(getColorValue('red', bladeLightTheme, 'base')).toBe('red');
+    expect(getColorValue('red', bladeLightTheme, 'm')).toBe(undefined);
+    expect(getColorValue({ base: 'red', s: '#f30' }, bladeLightTheme, 's')).toBe('#f30');
   });
 });
 
 describe('getBorderRadiusValue', () => {
   it('should return correct border-radius value', () => {
-    expect(getBorderRadiusValue('max', paymentLightTheme, 'base')).toBe('9999px');
-    expect(getBorderRadiusValue('small', paymentLightTheme, 'base')).toBe('2px');
-    expect(getBorderRadiusValue(undefined, paymentLightTheme, 'm')).toBe(undefined);
-    expect(getBorderRadiusValue({ base: 'medium', s: 'max' }, paymentLightTheme, 's')).toBe(
-      '9999px',
-    );
+    expect(getBorderRadiusValue('max', bladeLightTheme, 'base')).toBe('9999px');
+    expect(getBorderRadiusValue('small', bladeLightTheme, 'base')).toBe('2px');
+    expect(getBorderRadiusValue(undefined, bladeLightTheme, 'm')).toBe(undefined);
+    expect(getBorderRadiusValue({ base: 'medium', s: 'max' }, bladeLightTheme, 's')).toBe('9999px');
   });
 });
 
 describe('getSpacingValue', () => {
   it('handle tokens, absolute values, and auto', () => {
-    expect(getSpacingValue('spacing.1', paymentLightTheme, 'base')).toBe('2px');
-    expect(getSpacingValue('spacing.0', paymentLightTheme, 'base')).toBe('0px');
-    expect(getSpacingValue('1234px', paymentLightTheme, 'base')).toBe('1234px');
-    expect(getSpacingValue('auto', paymentLightTheme, 'base')).toBe('auto');
+    expect(getSpacingValue('spacing.1', bladeLightTheme, 'base')).toBe('2px');
+    expect(getSpacingValue('spacing.0', bladeLightTheme, 'base')).toBe('0px');
+    expect(getSpacingValue('1234px', bladeLightTheme, 'base')).toBe('1234px');
+    expect(getSpacingValue('auto', bladeLightTheme, 'base')).toBe('auto');
   });
 
   it('handle array shorthands', () => {
-    expect(getSpacingValue(['spacing.1', '12px', 'auto', '100%'], paymentLightTheme, 'base')).toBe(
+    expect(getSpacingValue(['spacing.1', '12px', 'auto', '100%'], bladeLightTheme, 'base')).toBe(
       '2px 12px auto 100%',
     );
 
-    expect(getSpacingValue(['spacing.0', '100px'], paymentLightTheme, 'base')).toBe('0px 100px');
-    expect(getSpacingValue(['spacing.0', '100px', 'spacing.1'], paymentLightTheme, 'base')).toBe(
+    expect(getSpacingValue(['spacing.0', '100px'], bladeLightTheme, 'base')).toBe('0px 100px');
+    expect(getSpacingValue(['spacing.0', '100px', 'spacing.1'], bladeLightTheme, 'base')).toBe(
       '0px 100px 2px',
     );
   });
@@ -53,7 +51,7 @@ describe('getSpacingValue', () => {
 
 describe('getBaseBoxStyles', () => {
   it('should add base css property', () => {
-    const boxStyles = getBaseBoxStyles({ backgroundColor: 'red', theme: paymentLightTheme });
+    const boxStyles = getBaseBoxStyles({ backgroundColor: 'red', theme: bladeLightTheme });
     const boxStylesWithoutUndefined = JSON.parse(JSON.stringify(boxStyles));
     expect(boxStylesWithoutUndefined).toMatchInlineSnapshot(`
       {
@@ -64,7 +62,7 @@ describe('getBaseBoxStyles', () => {
 
   it('should add no css', () => {
     const boxStyles = getBaseBoxStyles({
-      theme: paymentLightTheme,
+      theme: bladeLightTheme,
     });
     const boxStylesWithoutUndefined = JSON.parse(JSON.stringify(boxStyles));
     expect(boxStylesWithoutUndefined).toMatchInlineSnapshot(`{}`);
diff --git a/packages/blade/src/components/Box/__tests__/baseBoxStyles.web.test.ts b/packages/blade/src/components/Box/__tests__/baseBoxStyles.web.test.ts
index 0c0f3d5f0f9..36f88fb02a3 100644
--- a/packages/blade/src/components/Box/__tests__/baseBoxStyles.web.test.ts
+++ b/packages/blade/src/components/Box/__tests__/baseBoxStyles.web.test.ts
@@ -8,7 +8,7 @@ import {
 import { getResponsiveValue } from '../BaseBox/getResponsiveValue.web';
 import type { BaseBoxProps } from '../BaseBox';
 import { removeUndefinedValues } from './baseBoxStyles.test';
-import paymentLightTheme from '~components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme';
+import bladeLightTheme from '~components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme';
 import type { Theme } from '~components/BladeProvider';
 
 describe('getResponsiveValue', () => {
@@ -51,19 +51,17 @@ describe('shouldAddBreakpoint', () => {
 
 describe('getSpacingValue', () => {
   it('should return correct responsive spacing value', () => {
-    expect(getSpacingValue('spacing.2', paymentLightTheme, 'base')).toBe('4px');
-    expect(getSpacingValue('spacing.2', paymentLightTheme, 'm')).toBe(undefined);
+    expect(getSpacingValue('spacing.2', bladeLightTheme, 'base')).toBe('4px');
+    expect(getSpacingValue('spacing.2', bladeLightTheme, 'm')).toBe(undefined);
 
     const responsiveSpacingProp: BaseBoxProps['padding'] = {
       base: 'spacing.10',
       xs: '12px',
       s: ['spacing.1', '12px', '100%', 'auto'],
     };
-    expect(getSpacingValue(responsiveSpacingProp, paymentLightTheme, 'base')).toBe('48px');
-    expect(getSpacingValue(responsiveSpacingProp, paymentLightTheme, 'xs')).toBe('12px');
-    expect(getSpacingValue(responsiveSpacingProp, paymentLightTheme, 's')).toBe(
-      '2px 12px 100% auto',
-    );
+    expect(getSpacingValue(responsiveSpacingProp, bladeLightTheme, 'base')).toBe('48px');
+    expect(getSpacingValue(responsiveSpacingProp, bladeLightTheme, 'xs')).toBe('12px');
+    expect(getSpacingValue(responsiveSpacingProp, bladeLightTheme, 's')).toBe('2px 12px 100% auto');
   });
 });
 
@@ -76,7 +74,7 @@ describe('getBaseBoxStyles', () => {
         m: '22px',
         xl: 'auto',
       },
-      theme: paymentLightTheme,
+      theme: bladeLightTheme,
     });
     const boxStylesWithoutUndefined = JSON.parse(JSON.stringify(boxStyles));
     expect(boxStylesWithoutUndefined).toMatchInlineSnapshot(`
@@ -99,7 +97,7 @@ describe('getBaseBoxStyles', () => {
 describe('getAllMediaQueries', () => {
   it('should return empty object', () => {
     expect(
-      removeUndefinedValues(getAllMediaQueries({ display: 'block', theme: paymentLightTheme })),
+      removeUndefinedValues(getAllMediaQueries({ display: 'block', theme: bladeLightTheme })),
     ).toMatchInlineSnapshot(`{}`);
   });
 
@@ -108,7 +106,7 @@ describe('getAllMediaQueries', () => {
       removeUndefinedValues(
         getAllMediaQueries({
           display: { base: 'block', m: 'none', xl: 'flex' },
-          theme: paymentLightTheme,
+          theme: bladeLightTheme,
         }),
       ),
     ).toMatchInlineSnapshot(`
@@ -130,7 +128,7 @@ describe('getAllProps', () => {
       display: 'block',
       padding: { base: 'spacing.1', l: '20px' },
       margin: { m: 'spacing.1' },
-      theme: paymentLightTheme,
+      theme: bladeLightTheme,
     };
 
     expect(removeUndefinedValues(getAllProps(baseBoxProps))).toMatchInlineSnapshot(`
diff --git a/packages/blade/src/components/Box/__tests__/useMemoizedStyles.web.test.tsx b/packages/blade/src/components/Box/__tests__/useMemoizedStyles.web.test.tsx
index 01220a229ef..408621cdfb6 100644
--- a/packages/blade/src/components/Box/__tests__/useMemoizedStyles.web.test.tsx
+++ b/packages/blade/src/components/Box/__tests__/useMemoizedStyles.web.test.tsx
@@ -1,12 +1,12 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { getMemoDependency, useMemoizedStyles } from '../BaseBox/useMemoizedStyles';
-import paymentLightTheme from '~components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme.web';
+import bladeLightTheme from '~components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme.web';
 import { BladeProvider } from '~components/BladeProvider';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 
 const BladeThemeProvider = ({ children }: { children: React.ReactNode }): React.ReactElement => {
   return (
-    <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+    <BladeProvider themeTokens={bladeTheme} colorScheme="light">
       {children}
     </BladeProvider>
   );
@@ -22,10 +22,10 @@ describe('getDependencyProp', () => {
         className: 'hi',
         children: 'wuuhuuu',
         // @ts-expect-error: we don't have to care about actual theme object. It is ignored in this function
-        theme: { name: 'paymentTheme', something: 'something' },
+        theme: { name: 'bladeTheme', something: 'something' },
         colorScheme: 'light',
       }),
-    ).toMatchInlineSnapshot(`"{"paddingLeft":"12px","display":"block"}-paymentTheme-light"`);
+    ).toMatchInlineSnapshot(`"{"paddingLeft":"12px","display":"block"}-bladeTheme-light"`);
   });
 });
 
@@ -36,7 +36,7 @@ describe('useMemoizedStyles', () => {
         useMemoizedStyles({
           padding: 'spacing.10',
           margin: ['spacing.1', 'spacing.2'],
-          theme: paymentLightTheme,
+          theme: bladeLightTheme,
         }),
       {
         wrapper: BladeThemeProvider,
diff --git a/packages/blade/src/components/Box/styledProps/StyledProps.stories.tsx b/packages/blade/src/components/Box/styledProps/StyledProps.stories.tsx
index 943bee29821..864f92e9d87 100644
--- a/packages/blade/src/components/Box/styledProps/StyledProps.stories.tsx
+++ b/packages/blade/src/components/Box/styledProps/StyledProps.stories.tsx
@@ -4,7 +4,7 @@ import { getStyledPropsArgTypes } from '../BaseBox/storybookArgTypes';
 import type { BoxProps } from '..';
 import { Box } from '..';
 import type { StyledPropsBlade as StyledPropsType } from './getStyledProps';
-import { Text, Title } from '~components/Typography';
+import { Text, Heading } from '~components/Typography';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { Link } from '~components/Link';
 import { Button } from '~components/Button';
@@ -34,7 +34,7 @@ const BoxStoryMeta = {
             marginBottom="spacing.8"
           />
           <Box paddingBottom="spacing.8">
-            <Title size="medium">Layout Primitives Documentation</Title>
+            <Heading size="xlarge">Layout Primitives Documentation</Heading>
             <Text marginTop="spacing.3">
               Check Out{' '}
               <Link href="/?path=/docs/components-layout-primitives-box-how-to-create-layouts--page#styled-props">
diff --git a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
index 67555c8788b..3edafe98850 100644
--- a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
+++ b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import styled from 'styled-components';
@@ -5,6 +6,8 @@ import type { GestureResponderEvent } from 'react-native';
 import StyledBaseButton from './StyledBaseButton';
 import type { ButtonTypography, ButtonMinHeight } from './buttonTokens';
 import {
+  textColor,
+  backgroundColor,
   buttonIconOnlyPadding,
   buttonIconOnlySizeToIconSizeMap,
   typography as buttonTypography,
@@ -14,6 +17,7 @@ import {
   buttonIconPadding,
   buttonPadding,
 } from './buttonTokens';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 import getIn from '~utils/lodashButBetter/get';
 import type { BaseLinkProps } from '~components/Link/BaseLink';
 import type { Theme } from '~components/BladeProvider';
@@ -69,7 +73,7 @@ type BaseButtonCommonProps = {
   isLoading?: boolean;
   accessibilityProps?: Partial<AccessibilityProps>;
   variant?: 'primary' | 'secondary' | 'tertiary';
-  color?: 'default' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
+  color?: 'primary' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
 } & TestID &
   StyledPropsBlade &
   BladeCommonEvents;
@@ -96,9 +100,8 @@ type BaseButtonWithIconProps = BaseButtonCommonProps & {
 export type BaseButtonProps = BaseButtonWithIconProps | BaseButtonWithoutIconProps;
 
 type BaseButtonColorTokenModifiers = {
-  property: 'background' | 'border' | 'text' | 'icon';
   variant: NonNullable<BaseButtonProps['variant']>;
-  state: 'default' | 'hover' | 'active' | 'focus' | 'disabled';
+  state: 'default' | 'hover' | 'focus' | 'disabled';
   color: BaseButtonProps['color'];
 };
 
@@ -119,29 +122,58 @@ const getRenderElement = (href?: string): 'a' | 'button' | undefined => {
   return 'button';
 };
 
-const getColorToken = ({
+const getBackgroundColorToken = ({
   property,
   variant,
   state,
   color,
-}: BaseButtonColorTokenModifiers):
-  | `action.${BaseButtonColorTokenModifiers['property']}.${BaseButtonColorTokenModifiers['variant']}.${BaseButtonColorTokenModifiers['state']}`
-  | `white.action.${BaseButtonColorTokenModifiers['property']}.${BaseButtonColorTokenModifiers['variant']}.${BaseButtonColorTokenModifiers['state']}`
-  | `feedback.${NonNullable<
-      Exclude<BaseButtonColorTokenModifiers['color'], 'default' | 'white'>
-    >}.action.${BaseButtonColorTokenModifiers['property']}.primary.${BaseButtonColorTokenModifiers['state']}.${
-      | 'high'
-      | 'low'}Contrast` => {
-  if (!color || color === 'default') {
-    return `action.${property}.${variant}.${state}`;
+}: BaseButtonColorTokenModifiers & {
+  property: 'background' | 'border';
+}): DotNotationToken<Theme['colors']> => {
+  const _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
+  const tokens = backgroundColor(property);
+
+  if (color === 'white') {
+    return tokens.white[variant][_state];
+  }
+
+  if (color && color !== 'primary') {
+    if (variant === 'tertiary') {
+      throw new Error(
+        `Tertiary variant can only be used with color: "primary" or "white" but received "${color}"`,
+      );
+    }
+    return tokens.color(color)[variant][_state];
   }
+
+  return tokens.base[variant][_state];
+};
+
+const getTextColorToken = ({
+  property,
+  variant,
+  state,
+  color,
+}: BaseButtonColorTokenModifiers & {
+  property: 'icon' | 'text';
+}): DotNotationToken<Theme['colors']> => {
+  const tokens = textColor(property);
+  const _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
+
   if (color === 'white') {
-    return `white.action.${property}.${variant}.${state}`;
+    return tokens.white[variant][_state];
+  }
+
+  if (color && color !== 'primary') {
+    if (variant === 'tertiary') {
+      throw new Error(
+        `Tertiary variant can only be used with color: "primary" or "white" but received "${color}"`,
+      );
+    }
+    return tokens.color(color)[variant][_state];
   }
 
-  return `feedback.${color}.action.${property}.primary.${state}.${
-    variant === 'primary' ? 'high' : 'low'
-  }Contrast`;
+  return tokens.base[variant][_state];
 };
 
 type BaseButtonStyleProps = {
@@ -162,8 +194,6 @@ type BaseButtonStyleProps = {
   defaultBorderColor: string;
   hoverBackgroundColor: string;
   hoverBorderColor: string;
-  activeBackgroundColor: string;
-  activeBorderColor: string;
   focusBackgroundColor: string;
   focusBorderColor: string;
   focusRingColor: string;
@@ -192,7 +222,7 @@ const getProps = ({
   variant: NonNullable<BaseButtonProps['variant']>;
   color: BaseButtonProps['color'];
 }): BaseButtonStyleProps => {
-  if (variant === 'tertiary' && color !== 'default' && color !== 'white') {
+  if (variant === 'tertiary' && color !== 'primary' && color !== 'white') {
     throwBladeError({
       moduleName: 'BaseButton',
       message: `Tertiary variant can only be used with color: "default" or "white" but received "${color}"`,
@@ -207,13 +237,13 @@ const getProps = ({
     lineHeight: buttonTypographyTokens.lineHeights[size],
     minHeight: makeSize(buttonMinHeight[size]),
     iconPadding: hasIcon && children?.trim() ? `spacing.${buttonIconPadding[size]}` : undefined,
-    iconColor: getColorToken({
+    iconColor: getTextColorToken({
       property: 'icon',
       variant,
       color,
       state: 'default',
     }) as IconColor,
-    textColor: getColorToken({
+    textColor: getTextColorToken({
       property: 'text',
       variant,
       color,
@@ -234,39 +264,31 @@ const getProps = ({
     text: size === 'xsmall' ? children?.trim().toUpperCase() : children?.trim(),
     defaultBackgroundColor: getIn(
       theme.colors,
-      getColorToken({ property: 'background', variant, color, state: 'default' }),
+      getBackgroundColorToken({ property: 'background', variant, color, state: 'default' }),
     ),
     defaultBorderColor: getIn(
       theme.colors,
-      getColorToken({ property: 'border', variant, color, state: 'default' }),
+      getBackgroundColorToken({ property: 'border', variant, color, state: 'default' }),
     ),
     hoverBackgroundColor: getIn(
       theme.colors,
-      getColorToken({ property: 'background', variant, color, state: 'hover' }),
+      getBackgroundColorToken({ property: 'background', variant, color, state: 'hover' }),
     ),
     hoverBorderColor: getIn(
       theme.colors,
-      getColorToken({ property: 'border', variant, color, state: 'hover' }),
-    ),
-    activeBackgroundColor: getIn(
-      theme.colors,
-      getColorToken({ property: 'background', variant, color, state: 'active' }),
-    ),
-    activeBorderColor: getIn(
-      theme.colors,
-      getColorToken({ property: 'border', variant, color, state: 'active' }),
+      getBackgroundColorToken({ property: 'border', variant, color, state: 'hover' }),
     ),
     focusBackgroundColor: getIn(
       theme.colors,
-      getColorToken({ property: 'background', variant, color, state: 'focus' }),
+      getBackgroundColorToken({ property: 'background', variant, color, state: 'focus' }),
     ),
     focusBorderColor: getIn(
       theme.colors,
-      getColorToken({ property: 'border', variant, color, state: 'focus' }),
+      getBackgroundColorToken({ property: 'border', variant, color, state: 'focus' }),
     ),
-    focusRingColor: getIn(theme.colors, 'brand.primary.400'),
-    borderWidth: makeBorderSize(theme.border.width.thin),
-    borderRadius: makeBorderSize(theme.border.radius.small),
+    focusRingColor: getIn(theme.colors, 'surface.border.primary.muted'),
+    borderWidth: variant == 'secondary' ? makeBorderSize(theme.border.width.thin) : '0px',
+    borderRadius: makeBorderSize(theme.border.radius.medium),
     motionDuration: 'duration.xquick',
     motionEasing: 'easing.standard.effective',
   };
@@ -274,19 +296,19 @@ const getProps = ({
   if (isDisabled) {
     const disabledBackgroundColor = getIn(
       theme.colors,
-      getColorToken({ property: 'background', variant, color, state: 'disabled' }),
+      getBackgroundColorToken({ property: 'background', variant, color, state: 'disabled' }),
     );
     const disabledBorderColor = getIn(
       theme.colors,
-      getColorToken({ property: 'border', variant, color, state: 'disabled' }),
+      getBackgroundColorToken({ property: 'border', variant, color, state: 'disabled' }),
     );
-    props.iconColor = getColorToken({
+    props.iconColor = getTextColorToken({
       property: 'icon',
       variant,
       color,
       state: 'disabled',
     }) as IconColor;
-    props.textColor = getColorToken({
+    props.textColor = getTextColorToken({
       property: 'text',
       variant,
       color,
@@ -296,8 +318,6 @@ const getProps = ({
     props.defaultBorderColor = disabledBorderColor;
     props.hoverBackgroundColor = disabledBackgroundColor;
     props.hoverBorderColor = disabledBorderColor;
-    props.activeBackgroundColor = disabledBackgroundColor;
-    props.activeBorderColor = disabledBorderColor;
     props.focusBackgroundColor = disabledBackgroundColor;
     props.focusBorderColor = disabledBorderColor;
   }
@@ -315,7 +335,7 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
     target,
     rel,
     variant = 'primary',
-    color = 'default',
+    color = 'primary',
     size = 'medium',
     icon: Icon,
     iconPosition = 'left',
@@ -340,11 +360,11 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
   },
   ref,
 ) => {
+  const { theme } = useTheme();
   const isLink = Boolean(href);
   const childrenString = getStringFromReactText(children);
   // Button cannot be disabled when its rendered as Link
   const disabled = isLoading || (isDisabled && !isLink);
-  const { theme } = useTheme();
 
   if (__DEV__) {
     if (!Icon && !childrenString?.trim()) {
@@ -364,8 +384,6 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
   }, [isLoading, prevLoading]);
 
   const {
-    activeBorderColor,
-    activeBackgroundColor,
     defaultBorderColor,
     defaultBackgroundColor,
     minHeight,
@@ -422,8 +440,6 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
       variant={variant}
       isLoading={isLoading}
       disabled={disabled}
-      activeBorderColor={activeBorderColor}
-      activeBackgroundColor={activeBackgroundColor}
       defaultBorderColor={defaultBorderColor}
       minHeight={minHeight}
       buttonPaddingTop={buttonPaddingTop}
@@ -465,6 +481,7 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
           left="0px"
           bottom="0px"
           right="0px"
+          zIndex={1}
         >
           <BaseSpinner accessibilityLabel="Loading" size={spinnerSize} color={color} />
         </BaseBox>
@@ -476,6 +493,7 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
         justifyContent="center"
         flex={1}
         isHidden={isLoading}
+        zIndex={1}
       >
         {Icon && iconPosition == 'left' ? (
           <BaseBox
@@ -491,7 +509,11 @@ const _BaseButton: React.ForwardRefRenderFunction<BladeElementRef, BaseButtonPro
           <BaseText
             lineHeight={lineHeight}
             fontSize={fontSize}
-            fontWeight="bold"
+            // figma and web have different font-smoothing properties
+            // which causes web version of button text to look much bolder
+            // than figma version. To fix this we are changing font-weight from 600 to 500
+            // https://forum.figma.com/t/why-does-a-font-weight-in-figma-seem-lighter-than-the-same-weight-in-the-browser/2207
+            fontWeight="medium"
             textAlign="center"
             color={textColor}
           >
diff --git a/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx b/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx
index 26a145c5bcc..b67c3447b9a 100644
--- a/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx
+++ b/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx
@@ -60,11 +60,9 @@ const _StyledBaseButton: React.ForwardRefRenderFunction<TextInput, StyledBaseBut
     defaultBackgroundColor,
     defaultBorderColor,
     hoverBackgroundColor,
-    activeBackgroundColor,
     focusBackgroundColor,
     focusRingColor,
     hoverBorderColor,
-    activeBorderColor,
     focusBorderColor,
     borderWidth,
     borderRadius,
@@ -86,17 +84,15 @@ const _StyledBaseButton: React.ForwardRefRenderFunction<TextInput, StyledBaseBut
   const isPressed = useSharedValue(false);
   const duration = getIn(theme.motion, motionDuration);
   const easing = getIn(theme.motion, motionEasing);
+
   const animatedStyles = useAnimatedStyle(() => {
     return {
-      backgroundColor: withTiming(
-        isPressed.value ? activeBackgroundColor : defaultBackgroundColor,
-        {
-          duration,
-          easing,
-        },
-      ),
+      backgroundColor: withTiming(isPressed.value ? focusBackgroundColor : defaultBackgroundColor, {
+        duration,
+        easing,
+      }),
       ...(variant !== 'tertiary' && {
-        borderColor: withTiming(isPressed.value ? activeBorderColor : defaultBorderColor, {
+        borderColor: withTiming(isPressed.value ? focusBorderColor : defaultBorderColor, {
           duration,
           easing,
         }),
@@ -138,11 +134,9 @@ const _StyledBaseButton: React.ForwardRefRenderFunction<TextInput, StyledBaseBut
       defaultBackgroundColor={defaultBackgroundColor}
       defaultBorderColor={defaultBorderColor}
       hoverBackgroundColor={hoverBackgroundColor}
-      activeBackgroundColor={activeBackgroundColor}
       focusBackgroundColor={focusBackgroundColor}
       focusRingColor={focusRingColor}
       hoverBorderColor={hoverBorderColor}
-      activeBorderColor={activeBorderColor}
       focusBorderColor={focusBorderColor}
       borderWidth={borderWidth}
       borderRadius={borderRadius}
diff --git a/packages/blade/src/components/Button/BaseButton/StyledBaseButton.web.tsx b/packages/blade/src/components/Button/BaseButton/StyledBaseButton.web.tsx
index 204e3fd1f22..b53334dc2cf 100644
--- a/packages/blade/src/components/Button/BaseButton/StyledBaseButton.web.tsx
+++ b/packages/blade/src/components/Button/BaseButton/StyledBaseButton.web.tsx
@@ -32,9 +32,9 @@ const StyledBaseButton = styled.button
       }),
     },
     '&:active': {
-      backgroundColor: props.activeBackgroundColor,
+      backgroundColor: props.focusBackgroundColor,
       ...(props.variant !== 'tertiary' && {
-        borderColor: props.activeBorderColor,
+        borderColor: props.focusBorderColor,
       }),
     },
     '&:focus-visible': {
@@ -42,11 +42,11 @@ const StyledBaseButton = styled.button
       ...(props.variant !== 'tertiary' && {
         borderColor: props.focusBorderColor,
       }),
-      outline: `1px solid ${props.theme.colors.surface.background.level1.lowContrast}`,
+      outline: `1px solid ${props.theme.colors.surface.background.primary.subtle}`,
       boxShadow: `0px 0px 0px 4px ${props.focusRingColor}`,
     },
     '*': {
-      transitionProperty: 'color, fill',
+      transitionProperty: 'color, fill, opacity',
       transitionDuration: castWebType(
         makeMotionTime(getIn(props.theme.motion, props.motionDuration)),
       ),
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/BaseButton.native.test.tsx b/packages/blade/src/components/Button/BaseButton/__tests__/BaseButton.native.test.tsx
index 80f99f92841..c0f354361c1 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/BaseButton.native.test.tsx
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/BaseButton.native.test.tsx
@@ -10,7 +10,7 @@ afterAll(() => jest.restoreAllMocks());
 
 const variants: BaseButtonProps['variant'][] = ['primary', 'secondary', 'tertiary'];
 const colors: BaseButtonProps['color'][] = [
-  'default',
+  'primary',
   'white',
   'positive',
   'negative',
@@ -161,7 +161,7 @@ describe('<BaseButton />', () => {
   colors.forEach((color) => {
     variants.forEach((variant) => {
       // We support only white and default color for tertiary variant
-      if (variant === 'tertiary' && color !== 'white' && color !== 'default') return;
+      if (variant === 'tertiary' && color !== 'white' && color !== 'primary') return;
 
       it(`should render ${color} color ${variant} button`, () => {
         const buttonText = 'Pay Now';
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/BaseButton.web.test.tsx b/packages/blade/src/components/Button/BaseButton/__tests__/BaseButton.web.test.tsx
index 8a84544eb2a..5a490051d95 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/BaseButton.web.test.tsx
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/BaseButton.web.test.tsx
@@ -10,7 +10,7 @@ import { CloseIcon, CreditCardIcon } from '~components/Icons';
 
 const variants: BaseButtonProps['variant'][] = ['primary', 'secondary', 'tertiary'];
 const colors: BaseButtonProps['color'][] = [
-  'default',
+  'primary',
   'white',
   'positive',
   'negative',
@@ -167,7 +167,7 @@ describe('<BaseButton />', () => {
   colors.forEach((color) => {
     variants.forEach((variant) => {
       // We support only white and default color for tertiary variant
-      if (variant === 'tertiary' && color !== 'white' && color !== 'default') return;
+      if (variant === 'tertiary' && color !== 'white' && color !== 'primary') return;
 
       it(`should render ${color} color ${variant} button`, () => {
         const buttonText = 'Pay Now';
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
index e47216c4d2f..a9a3a60a199 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
@@ -28,24 +28,22 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -66,15 +64,16 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -85,8 +84,8 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -109,28 +108,31 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -182,24 +184,22 @@ exports[`<BaseButton /> should render button with full width 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={true}
     isLoading={false}
     minHeight="36px"
@@ -220,15 +220,16 @@ exports[`<BaseButton /> should render button with full width 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -239,8 +240,8 @@ exports[`<BaseButton /> should render button with full width 1`] = `
           "width": "100%",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -263,28 +264,31 @@ exports[`<BaseButton /> should render button with full width 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -336,24 +340,22 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -374,15 +376,16 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -393,8 +396,8 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -417,12 +420,14 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <View
         alignItems="center"
@@ -498,19 +503,20 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
       </View>
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -562,24 +568,22 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -600,15 +604,16 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -619,8 +624,8 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -643,12 +648,14 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <View
         alignItems="center"
@@ -724,19 +731,20 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
       </View>
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -788,24 +796,22 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -826,15 +832,16 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -845,8 +852,8 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -869,28 +876,31 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1014,24 +1024,22 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="8px"
     buttonPaddingRight="8px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1052,15 +1060,16 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 8,
           "paddingRight": 8,
@@ -1071,8 +1080,8 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -1095,12 +1104,14 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <View
         alignItems="center"
@@ -1178,7 +1189,7 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render default color primary button 1`] = `
+exports[`<BaseButton /> should render disabled button 1`] = `
 <View
   style={
     {
@@ -1192,7 +1203,7 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": false,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -1206,24 +1217,22 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1244,15 +1253,16 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "pointer",
+          "borderWidth": 0,
+          "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1263,8 +1273,8 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
     }
@@ -1287,28 +1297,31 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 0.18)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1332,7 +1345,7 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render default color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled information color primary button 1`] = `
 <View
   style={
     {
@@ -1346,7 +1359,7 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": false,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -1360,24 +1373,22 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(218, 89%, 51%, 0.32)"
-    activeBorderColor="hsla(218, 89%, 51%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 0)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(218, 89%, 51%, 0.18)"
-    focusBorderColor="hsla(218, 89%, 51%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(200, 84%, 44%, 0.09)"
+    defaultBorderColor="hsla(200, 84%, 44%, 0.18)"
+    focusBackgroundColor="hsla(200, 84%, 44%, 0.09)"
+    focusBorderColor="hsla(200, 84%, 44%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(218, 89%, 51%, 0.09)"
-    hoverBorderColor="hsla(218, 89%, 51%, 1)"
+    hoverBackgroundColor="hsla(200, 84%, 44%, 0.09)"
+    hoverBorderColor="hsla(200, 84%, 44%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1398,15 +1409,16 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 0)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+          "borderColor": "hsla(200, 84%, 44%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "pointer",
+          "borderWidth": 0,
+          "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1417,8 +1429,8 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 0)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+          "borderColor": "hsla(200, 84%, 44%, 0.18)",
         },
       ]
     }
@@ -1441,28 +1453,31 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.secondary.default"
+        color="interactive.text.information.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(200, 84%, 44%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1486,7 +1501,7 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render default color tertiary button 1`] = `
+exports[`<BaseButton /> should render disabled information color secondary button 1`] = `
 <View
   style={
     {
@@ -1500,7 +1515,7 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": false,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -1514,9 +1529,7 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 15%, 54%, 0.32)"
-    activeBorderColor="hsla(216, 19%, 89%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -1524,14 +1537,14 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    defaultBorderColor="hsla(216, 44%, 23%, 0)"
-    focusBackgroundColor="hsla(216, 15%, 54%, 0.32)"
-    focusBorderColor="hsla(216, 19%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(200, 84%, 44%, 0.09)"
+    defaultBorderColor="hsla(200, 84%, 44%, 0.18)"
+    focusBackgroundColor="hsla(200, 84%, 44%, 0.09)"
+    focusBorderColor="hsla(200, 84%, 44%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 15%, 54%, 0.18)"
-    hoverBorderColor="hsla(216, 19%, 89%, 1)"
+    hoverBackgroundColor="hsla(200, 84%, 44%, 0.09)"
+    hoverBorderColor="hsla(200, 84%, 44%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1552,15 +1565,16 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-          "borderColor": "hsla(216, 44%, 23%, 0)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+          "borderColor": "hsla(200, 84%, 44%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
-          "cursor": "pointer",
+          "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1571,7 +1585,8 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+          "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+          "borderColor": "hsla(200, 84%, 44%, 0.18)",
         },
       ]
     }
@@ -1594,28 +1609,31 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.tertiary.default"
+        color="interactive.text.information.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 33%, 29%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(200, 84%, 44%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1639,7 +1657,7 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled button 1`] = `
+exports[`<BaseButton /> should render disabled negative color primary button 1`] = `
 <View
   style={
     {
@@ -1667,24 +1685,22 @@ exports[`<BaseButton /> should render disabled button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 19%, 89%, 1)"
-    activeBorderColor="hsla(216, 19%, 89%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 19%, 89%, 1)"
-    defaultBorderColor="hsla(216, 19%, 89%, 1)"
-    focusBackgroundColor="hsla(216, 19%, 89%, 1)"
-    focusBorderColor="hsla(216, 19%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    defaultBorderColor="hsla(4, 74%, 49%, 0.18)"
+    focusBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    focusBorderColor="hsla(4, 74%, 49%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 19%, 89%, 1)"
-    hoverBorderColor="hsla(216, 19%, 89%, 1)"
+    hoverBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    hoverBorderColor="hsla(4, 74%, 49%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1705,15 +1721,16 @@ exports[`<BaseButton /> should render disabled button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1724,8 +1741,8 @@ exports[`<BaseButton /> should render disabled button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 0.18)",
         },
       ]
     }
@@ -1748,28 +1765,31 @@ exports[`<BaseButton /> should render disabled button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.disabled"
+        color="interactive.text.negative.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(4, 74%, 49%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1793,7 +1813,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled default color primary button 1`] = `
+exports[`<BaseButton /> should render disabled negative color secondary button 1`] = `
 <View
   style={
     {
@@ -1821,9 +1841,7 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 19%, 89%, 1)"
-    activeBorderColor="hsla(216, 19%, 89%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -1831,14 +1849,14 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 19%, 89%, 1)"
-    defaultBorderColor="hsla(216, 19%, 89%, 1)"
-    focusBackgroundColor="hsla(216, 19%, 89%, 1)"
-    focusBorderColor="hsla(216, 19%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    defaultBorderColor="hsla(4, 74%, 49%, 0.18)"
+    focusBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    focusBorderColor="hsla(4, 74%, 49%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 19%, 89%, 1)"
-    hoverBorderColor="hsla(216, 19%, 89%, 1)"
+    hoverBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    hoverBorderColor="hsla(4, 74%, 49%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1859,15 +1877,16 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1878,8 +1897,8 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 0.18)",
         },
       ]
     }
@@ -1902,28 +1921,31 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.disabled"
+        color="interactive.text.negative.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(4, 74%, 49%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1947,7 +1969,7 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled default color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled neutral color primary button 1`] = `
 <View
   style={
     {
@@ -1975,24 +1997,22 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 44%, 23%, 0)"
-    activeBorderColor="hsla(218, 19%, 81%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 44%, 23%, 0)"
-    defaultBorderColor="hsla(218, 19%, 81%, 1)"
-    focusBackgroundColor="hsla(216, 44%, 23%, 0)"
-    focusBorderColor="hsla(218, 19%, 81%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    defaultBorderColor="hsla(214, 28%, 84%, 1)"
+    focusBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    focusBorderColor="hsla(214, 28%, 84%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 44%, 23%, 0)"
-    hoverBorderColor="hsla(218, 19%, 81%, 1)"
+    hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    hoverBorderColor="hsla(214, 28%, 84%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2013,15 +2033,16 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 44%, 23%, 0)",
-          "borderColor": "hsla(218, 19%, 81%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
+          "borderColor": "hsla(214, 28%, 84%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2032,8 +2053,8 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 44%, 23%, 0)",
-          "borderColor": "hsla(218, 19%, 81%, 1)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
+          "borderColor": "hsla(214, 28%, 84%, 1)",
         },
       ]
     }
@@ -2056,28 +2077,31 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.secondary.disabled"
+        color="interactive.text.neutral.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 19%, 81%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(211, 20%, 52%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2101,7 +2125,7 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled default color tertiary button 1`] = `
+exports[`<BaseButton /> should render disabled neutral color secondary button 1`] = `
 <View
   style={
     {
@@ -2129,9 +2153,7 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    activeBorderColor="hsla(216, 19%, 89%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -2139,14 +2161,14 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    defaultBorderColor="hsla(216, 19%, 89%, 1)"
-    focusBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    focusBorderColor="hsla(216, 19%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    defaultBorderColor="hsla(214, 28%, 84%, 1)"
+    focusBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    focusBorderColor="hsla(214, 28%, 84%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    hoverBorderColor="hsla(216, 19%, 89%, 1)"
+    hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    hoverBorderColor="hsla(214, 28%, 84%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2167,15 +2189,16 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
+          "borderColor": "hsla(214, 28%, 84%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2186,7 +2209,8 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
+          "borderColor": "hsla(214, 28%, 84%, 1)",
         },
       ]
     }
@@ -2209,28 +2233,31 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.tertiary.disabled"
+        color="interactive.text.neutral.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 19%, 81%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(211, 20%, 52%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2254,7 +2281,7 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled information color primary button 1`] = `
+exports[`<BaseButton /> should render disabled notice color primary button 1`] = `
 <View
   style={
     {
@@ -2282,24 +2309,22 @@ exports[`<BaseButton /> should render disabled information color primary button
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(193, 100%, 35%, 1)"
-    activeBorderColor="hsla(187, 68%, 52%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(193, 100%, 35%, 1)"
-    defaultBorderColor="hsla(187, 68%, 52%, 1)"
-    focusBackgroundColor="hsla(193, 100%, 35%, 1)"
-    focusBorderColor="hsla(187, 68%, 52%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(25, 90%, 48%, 0.09)"
+    defaultBorderColor="hsla(25, 90%, 48%, 0.18)"
+    focusBackgroundColor="hsla(25, 90%, 48%, 0.09)"
+    focusBorderColor="hsla(25, 90%, 48%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(193, 100%, 35%, 1)"
-    hoverBorderColor="hsla(187, 68%, 52%, 1)"
+    hoverBackgroundColor="hsla(25, 90%, 48%, 0.09)"
+    hoverBorderColor="hsla(25, 90%, 48%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2320,15 +2345,16 @@ exports[`<BaseButton /> should render disabled information color primary button
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(193, 100%, 35%, 1)",
-          "borderColor": "hsla(187, 68%, 52%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+          "borderColor": "hsla(25, 90%, 48%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2339,8 +2365,8 @@ exports[`<BaseButton /> should render disabled information color primary button
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(193, 100%, 35%, 1)",
-          "borderColor": "hsla(187, 68%, 52%, 1)",
+          "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+          "borderColor": "hsla(25, 90%, 48%, 0.18)",
         },
       ]
     }
@@ -2363,28 +2389,31 @@ exports[`<BaseButton /> should render disabled information color primary button
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.information.action.text.primary.disabled.highContrast"
+        color="interactive.text.notice.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(187, 68%, 52%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(25, 90%, 48%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2408,7 +2437,7 @@ exports[`<BaseButton /> should render disabled information color primary button
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled information color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled notice color secondary button 1`] = `
 <View
   style={
     {
@@ -2436,9 +2465,7 @@ exports[`<BaseButton /> should render disabled information color secondary butto
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(193, 100%, 35%, 0.09)"
-    activeBorderColor="hsla(193, 100%, 35%, 0.32)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -2446,14 +2473,14 @@ exports[`<BaseButton /> should render disabled information color secondary butto
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(193, 100%, 35%, 0.09)"
-    defaultBorderColor="hsla(193, 100%, 35%, 0.32)"
-    focusBackgroundColor="hsla(193, 100%, 35%, 0.09)"
-    focusBorderColor="hsla(193, 100%, 35%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(25, 90%, 48%, 0.09)"
+    defaultBorderColor="hsla(25, 90%, 48%, 0.18)"
+    focusBackgroundColor="hsla(25, 90%, 48%, 0.09)"
+    focusBorderColor="hsla(25, 90%, 48%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(193, 100%, 35%, 0.09)"
-    hoverBorderColor="hsla(193, 100%, 35%, 0.32)"
+    hoverBackgroundColor="hsla(25, 90%, 48%, 0.09)"
+    hoverBorderColor="hsla(25, 90%, 48%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2474,15 +2501,16 @@ exports[`<BaseButton /> should render disabled information color secondary butto
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
-          "borderColor": "hsla(193, 100%, 35%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+          "borderColor": "hsla(25, 90%, 48%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2493,8 +2521,8 @@ exports[`<BaseButton /> should render disabled information color secondary butto
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
-          "borderColor": "hsla(193, 100%, 35%, 0.32)",
+          "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+          "borderColor": "hsla(25, 90%, 48%, 0.18)",
         },
       ]
     }
@@ -2517,28 +2545,31 @@ exports[`<BaseButton /> should render disabled information color secondary butto
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.information.action.text.primary.disabled.lowContrast"
+        color="interactive.text.notice.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(193, 100%, 35%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(25, 90%, 48%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2562,7 +2593,7 @@ exports[`<BaseButton /> should render disabled information color secondary butto
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled negative color primary button 1`] = `
+exports[`<BaseButton /> should render disabled positive color primary button 1`] = `
 <View
   style={
     {
@@ -2590,24 +2621,22 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(8, 73%, 47%, 1)"
-    activeBorderColor="hsla(8, 99%, 65%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(8, 73%, 47%, 1)"
-    defaultBorderColor="hsla(8, 99%, 65%, 1)"
-    focusBackgroundColor="hsla(8, 73%, 47%, 1)"
-    focusBorderColor="hsla(8, 99%, 65%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    defaultBorderColor="hsla(150, 100%, 32%, 0.18)"
+    focusBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    focusBorderColor="hsla(150, 100%, 32%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(8, 73%, 47%, 1)"
-    hoverBorderColor="hsla(8, 99%, 65%, 1)"
+    hoverBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    hoverBorderColor="hsla(150, 100%, 32%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2628,15 +2657,16 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(8, 73%, 47%, 1)",
-          "borderColor": "hsla(8, 99%, 65%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2647,8 +2677,8 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(8, 73%, 47%, 1)",
-          "borderColor": "hsla(8, 99%, 65%, 1)",
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 0.18)",
         },
       ]
     }
@@ -2671,28 +2701,31 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.primary.disabled.highContrast"
+        color="interactive.text.positive.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(8, 99%, 65%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(150, 100%, 32%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2716,7 +2749,7 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled negative color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled positive color secondary button 1`] = `
 <View
   style={
     {
@@ -2744,9 +2777,7 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    activeBorderColor="hsla(9, 91%, 56%, 0.32)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -2754,14 +2785,14 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    defaultBorderColor="hsla(9, 91%, 56%, 0.32)"
-    focusBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    focusBorderColor="hsla(9, 91%, 56%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    defaultBorderColor="hsla(150, 100%, 32%, 0.18)"
+    focusBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    focusBorderColor="hsla(150, 100%, 32%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    hoverBorderColor="hsla(9, 91%, 56%, 0.32)"
+    hoverBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    hoverBorderColor="hsla(150, 100%, 32%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2782,15 +2813,16 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-          "borderColor": "hsla(9, 91%, 56%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2801,8 +2833,8 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-          "borderColor": "hsla(9, 91%, 56%, 0.32)",
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 0.18)",
         },
       ]
     }
@@ -2825,28 +2857,31 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.primary.disabled.lowContrast"
+        color="interactive.text.positive.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(9, 91%, 56%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(150, 100%, 32%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2870,7 +2905,7 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled neutral color primary button 1`] = `
+exports[`<BaseButton /> should render disabled primary color primary button 1`] = `
 <View
   style={
     {
@@ -2898,24 +2933,22 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 33%, 29%, 1)"
-    activeBorderColor="hsla(216, 15%, 54%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 33%, 29%, 1)"
-    defaultBorderColor="hsla(216, 15%, 54%, 1)"
-    focusBackgroundColor="hsla(216, 33%, 29%, 1)"
-    focusBorderColor="hsla(216, 15%, 54%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 33%, 29%, 1)"
-    hoverBorderColor="hsla(216, 15%, 54%, 1)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2936,15 +2969,16 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 33%, 29%, 1)",
-          "borderColor": "hsla(216, 15%, 54%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2955,8 +2989,8 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 33%, 29%, 1)",
-          "borderColor": "hsla(216, 15%, 54%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
     }
@@ -2979,28 +3013,31 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.neutral.action.text.primary.disabled.highContrast"
+        color="interactive.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 15%, 54%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 0.18)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3024,7 +3061,7 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled neutral color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled primary color secondary button 1`] = `
 <View
   style={
     {
@@ -3052,9 +3089,7 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    activeBorderColor="hsla(216, 15%, 54%, 0.32)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -3062,14 +3097,14 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    defaultBorderColor="hsla(216, 15%, 54%, 0.32)"
-    focusBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    focusBorderColor="hsla(216, 15%, 54%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+    defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0)"
+    focusBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    hoverBorderColor="hsla(216, 15%, 54%, 0.32)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0)"
+    hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3090,15 +3125,16 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-          "borderColor": "hsla(216, 15%, 54%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3109,8 +3145,8 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-          "borderColor": "hsla(216, 15%, 54%, 0.32)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
     }
@@ -3133,28 +3169,31 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.neutral.action.text.primary.disabled.lowContrast"
+        color="interactive.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 15%, 54%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 0.18)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3178,7 +3217,7 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled notice color primary button 1`] = `
+exports[`<BaseButton /> should render disabled primary color tertiary button 1`] = `
 <View
   style={
     {
@@ -3206,24 +3245,22 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(38, 97%, 38%, 1)"
-    activeBorderColor="hsla(35, 84%, 54%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(38, 97%, 38%, 1)"
-    defaultBorderColor="hsla(35, 84%, 54%, 1)"
-    focusBackgroundColor="hsla(38, 97%, 38%, 1)"
-    focusBorderColor="hsla(35, 84%, 54%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    defaultBorderColor="hsla(214, 40%, 92%, 1)"
+    focusBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    focusBorderColor="hsla(214, 40%, 92%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(38, 97%, 38%, 1)"
-    hoverBorderColor="hsla(35, 84%, 54%, 1)"
+    hoverBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    hoverBorderColor="hsla(214, 40%, 92%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3244,15 +3281,16 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(38, 97%, 38%, 1)",
-          "borderColor": "hsla(35, 84%, 54%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+          "borderColor": "hsla(214, 40%, 92%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3263,8 +3301,7 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(38, 97%, 38%, 1)",
-          "borderColor": "hsla(35, 84%, 54%, 1)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
         },
       ]
     }
@@ -3287,28 +3324,31 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.notice.action.text.primary.disabled.highContrast"
+        color="interactive.text.gray.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(35, 84%, 54%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(211, 20%, 52%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3332,7 +3372,7 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled notice color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled white color primary button 1`] = `
 <View
   style={
     {
@@ -3360,24 +3400,22 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(36, 100%, 44%, 0.09)"
-    activeBorderColor="hsla(36, 100%, 44%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(36, 100%, 44%, 0.09)"
-    defaultBorderColor="hsla(36, 100%, 44%, 0.32)"
-    focusBackgroundColor="hsla(36, 100%, 44%, 0.09)"
-    focusBorderColor="hsla(36, 100%, 44%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(36, 100%, 44%, 0.09)"
-    hoverBorderColor="hsla(36, 100%, 44%, 0.32)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.32)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3398,15 +3436,16 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
-          "borderColor": "hsla(36, 100%, 44%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderColor": "hsla(0, 0%, 100%, 0.32)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3417,8 +3456,8 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
-          "borderColor": "hsla(36, 100%, 44%, 0.32)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderColor": "hsla(0, 0%, 100%, 0.32)",
         },
       ]
     }
@@ -3441,28 +3480,31 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.notice.action.text.primary.disabled.lowContrast"
+        color="interactive.text.staticBlack.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(36, 100%, 44%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 0%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3486,7 +3528,7 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled positive color primary button 1`] = `
+exports[`<BaseButton /> should render disabled white color secondary button 1`] = `
 <View
   style={
     {
@@ -3514,9 +3556,7 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(160, 100%, 26%, 1)"
-    activeBorderColor="hsla(149, 99%, 35%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -3524,14 +3564,14 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(160, 100%, 26%, 1)"
-    defaultBorderColor="hsla(149, 99%, 35%, 1)"
-    focusBackgroundColor="hsla(160, 100%, 26%, 1)"
-    focusBorderColor="hsla(149, 99%, 35%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(160, 100%, 26%, 1)"
-    hoverBorderColor="hsla(149, 99%, 35%, 1)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.32)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3552,15 +3592,16 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(160, 100%, 26%, 1)",
-          "borderColor": "hsla(149, 99%, 35%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(0, 0%, 100%, 0.32)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3571,8 +3612,8 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(160, 100%, 26%, 1)",
-          "borderColor": "hsla(149, 99%, 35%, 1)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(0, 0%, 100%, 0.32)",
         },
       ]
     }
@@ -3595,28 +3636,31 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.primary.disabled.highContrast"
+        color="interactive.text.staticWhite.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(149, 99%, 35%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3640,7 +3684,7 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled positive color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled white color tertiary button 1`] = `
 <View
   style={
     {
@@ -3668,24 +3712,22 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    activeBorderColor="hsla(155, 100%, 31%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    defaultBorderColor="hsla(155, 100%, 31%, 0.32)"
-    focusBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    focusBorderColor="hsla(155, 100%, 31%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.18)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    hoverBorderColor="hsla(155, 100%, 31%, 0.32)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3706,15 +3748,16 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-          "borderColor": "hsla(155, 100%, 31%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3725,8 +3768,7 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-          "borderColor": "hsla(155, 100%, 31%, 0.32)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
         },
       ]
     }
@@ -3749,28 +3791,31 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.primary.disabled.lowContrast"
+        color="interactive.text.staticWhite.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(155, 100%, 31%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3794,7 +3839,7 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled white color primary button 1`] = `
+exports[`<BaseButton /> should render information color primary button 1`] = `
 <View
   style={
     {
@@ -3808,7 +3853,7 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": true,
+        "disabled": false,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -3822,24 +3867,22 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    activeBorderColor="hsla(210, 6%, 94%, 0.18)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    defaultBorderColor="hsla(210, 6%, 94%, 0.18)"
-    focusBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    focusBorderColor="hsla(210, 6%, 94%, 0.18)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(200, 84%, 44%, 1)"
+    defaultBorderColor="hsla(200, 84%, 44%, 1)"
+    focusBackgroundColor="hsla(200, 84%, 37%, 1)"
+    focusBorderColor="hsla(200, 84%, 37%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    hoverBorderColor="hsla(210, 6%, 94%, 0.18)"
+    hoverBackgroundColor="hsla(200, 84%, 37%, 1)"
+    hoverBorderColor="hsla(200, 84%, 37%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3860,15 +3903,16 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(210, 6%, 94%, 0.18)",
-          "borderColor": "hsla(210, 6%, 94%, 0.18)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(200, 84%, 44%, 1)",
+          "borderColor": "hsla(200, 84%, 44%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "not-allowed",
+          "borderWidth": 0,
+          "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3879,8 +3923,8 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(210, 6%, 94%, 0.18)",
-          "borderColor": "hsla(210, 6%, 94%, 0.18)",
+          "backgroundColor": "hsla(200, 84%, 44%, 1)",
+          "borderColor": "hsla(200, 84%, 44%, 1)",
         },
       ]
     }
@@ -3903,28 +3947,31 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.primary.disabled"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(210, 6%, 94%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3948,7 +3995,7 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled white color secondary button 1`] = `
+exports[`<BaseButton /> should render information color secondary button 1`] = `
 <View
   style={
     {
@@ -3962,7 +4009,7 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": true,
+        "disabled": false,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -3976,9 +4023,7 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(214, 15%, 18%, 0)"
-    activeBorderColor="hsla(210, 6%, 94%, 0.32)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -3986,14 +4031,14 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(214, 15%, 18%, 0)"
-    defaultBorderColor="hsla(210, 6%, 94%, 0.32)"
-    focusBackgroundColor="hsla(214, 15%, 18%, 0)"
-    focusBorderColor="hsla(210, 6%, 94%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(200, 84%, 44%, 0.09)"
+    defaultBorderColor="hsla(200, 84%, 44%, 1)"
+    focusBackgroundColor="hsla(200, 84%, 44%, 0.18)"
+    focusBorderColor="hsla(200, 84%, 44%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(214, 15%, 18%, 0)"
-    hoverBorderColor="hsla(210, 6%, 94%, 0.32)"
+    hoverBackgroundColor="hsla(200, 84%, 44%, 0.18)"
+    hoverBorderColor="hsla(200, 84%, 44%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -4014,15 +4059,16 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(214, 15%, 18%, 0)",
-          "borderColor": "hsla(210, 6%, 94%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+          "borderColor": "hsla(200, 84%, 44%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
-          "cursor": "not-allowed",
+          "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -4033,8 +4079,8 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(214, 15%, 18%, 0)",
-          "borderColor": "hsla(210, 6%, 94%, 0.32)",
+          "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+          "borderColor": "hsla(200, 84%, 44%, 1)",
         },
       ]
     }
@@ -4057,28 +4103,31 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.secondary.disabled"
+        color="interactive.text.information.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(210, 6%, 94%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(200, 84%, 37%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -4102,7 +4151,7 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
 </View>
 `;
 
-exports[`<BaseButton /> should render disabled white color tertiary button 1`] = `
+exports[`<BaseButton /> should render large size button 1`] = `
 <View
   style={
     {
@@ -4116,7 +4165,7 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": true,
+        "disabled": false,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -4130,27 +4179,25 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    activeBorderColor="hsla(214, 15%, 18%, 0)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    defaultBorderColor="hsla(214, 15%, 18%, 0)"
-    focusBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    focusBorderColor="hsla(214, 15%, 18%, 0)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    hoverBorderColor="hsla(214, 15%, 18%, 0)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
-    minHeight="36px"
+    minHeight="48px"
     motionDuration="duration.xquick"
     motionEasing="easing.standard.effective"
     onBlur={[Function]}
@@ -4168,15 +4215,16 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(210, 6%, 94%, 0.09)",
-          "borderColor": "hsla(214, 15%, 18%, 0)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "not-allowed",
+          "borderWidth": 0,
+          "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
-          "minHeight": 36,
+          "minHeight": 48,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -4187,7 +4235,8 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(210, 6%, 94%, 0.09)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -4210,29 +4259,32 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.tertiary.disabled"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
-        fontSize={100}
-        fontWeight="bold"
-        lineHeight={100}
+        fontSize={200}
+        fontWeight="medium"
+        lineHeight={200}
         style={
           [
             {
-              "color": "hsla(210, 6%, 94%, 0.32)",
-              "fontFamily": "Lato",
-              "fontSize": 14,
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 20,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 24,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
@@ -4255,7 +4307,7 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
 </View>
 `;
 
-exports[`<BaseButton /> should render information color primary button 1`] = `
+exports[`<BaseButton /> should render loading button 1`] = `
 <View
   style={
     {
@@ -4269,7 +4321,7 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": false,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -4283,26 +4335,24 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(196, 100%, 27%, 1)"
-    activeBorderColor="hsla(180, 100%, 97%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(193, 100%, 35%, 1)"
-    defaultBorderColor="hsla(180, 100%, 97%, 1)"
-    focusBackgroundColor="hsla(196, 100%, 27%, 1)"
-    focusBorderColor="hsla(180, 100%, 97%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(195, 100%, 31%, 1)"
-    hoverBorderColor="hsla(180, 100%, 97%, 1)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
-    isLoading={false}
+    isLoading={true}
     minHeight="36px"
     motionDuration="duration.xquick"
     motionEasing="easing.standard.effective"
@@ -4321,15 +4371,16 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(193, 100%, 35%, 1)",
-          "borderColor": "hsla(180, 100%, 97%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "pointer",
+          "borderWidth": 0,
+          "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -4340,19 +4391,171 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(193, 100%, 35%, 1)",
-          "borderColor": "hsla(180, 100%, 97%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
     }
     type="button"
   >
+    <View
+      alignItems="center"
+      bottom="0px"
+      data-blade-component="base-box"
+      display="flex"
+      justifyContent="center"
+      left="0px"
+      position="absolute"
+      right="0px"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "bottom": 0,
+            "display": "flex",
+            "justifyContent": "center",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          },
+        ]
+      }
+      top="0px"
+      zIndex={1}
+    >
+      <View
+        data-blade-component="spinner"
+        style={
+          [
+            {},
+          ]
+        }
+      >
+        <View
+          accessibilityLabel="Loading"
+          accessibilityRole="progressbar"
+          accessible={true}
+          alignItems="center"
+          data-blade-component="base-box"
+          display="flex"
+          flexDirection="row"
+          style={
+            [
+              {
+                "alignItems": "center",
+                "display": "flex",
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <View
+            alignSelf="center"
+            data-blade-component="base-box"
+            style={
+              [
+                {
+                  "alignSelf": "center",
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                {
+                  "transform": [
+                    {
+                      "rotateZ": "0deg",
+                    },
+                  ],
+                }
+              }
+            >
+              <RNSVGSvgView
+                accessibilityElementsHidden={true}
+                align="xMidYMid"
+                bbHeight="20px"
+                bbWidth="20px"
+                data-blade-component="icon"
+                fill="none"
+                focusable={false}
+                height="20px"
+                importantForAccessibility="no-hide-descendants"
+                meetOrSlice={0}
+                minX={0}
+                minY={0}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "borderWidth": 0,
+                    },
+                    [
+                      {},
+                    ],
+                    {
+                      "flex": 0,
+                      "height": 20,
+                      "width": 20,
+                    },
+                  ]
+                }
+                vbHeight={24}
+                vbWidth={24}
+                width="20px"
+              >
+                <RNSVGGroup
+                  fill={null}
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                >
+                  <RNSVGPath
+                    d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
+                    fill={4281228287}
+                    fillOpacity={0.2}
+                    propList={
+                      [
+                        "fill",
+                        "fillOpacity",
+                      ]
+                    }
+                  />
+                  <RNSVGPath
+                    d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
+                    fill={4281228287}
+                    propList={
+                      [
+                        "fill",
+                      ]
+                    }
+                  />
+                  <RNSVGPath
+                    d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
+                    fill={4281228287}
+                    propList={
+                      [
+                        "fill",
+                      ]
+                    }
+                  />
+                </RNSVGGroup>
+              </RNSVGSvgView>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
     <View
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
-      isHidden={false}
+      isHidden={true}
       justifyContent="center"
       style={
         [
@@ -4364,28 +4567,31 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
-            "opacity": 1,
+            "opacity": 0,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.information.action.text.primary.default.highContrast"
+        color="interactive.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(180, 100%, 97%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 0.18)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -4409,7 +4615,7 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render information color secondary button 1`] = `
+exports[`<BaseButton /> should render medium size button 1`] = `
 <View
   style={
     {
@@ -4437,24 +4643,22 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(193, 100%, 35%, 0.32)"
-    activeBorderColor="hsla(193, 100%, 35%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(193, 100%, 35%, 0.09)"
-    defaultBorderColor="hsla(193, 100%, 35%, 0.32)"
-    focusBackgroundColor="hsla(193, 100%, 35%, 0.32)"
-    focusBorderColor="hsla(193, 100%, 35%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(193, 100%, 35%, 0.18)"
-    hoverBorderColor="hsla(193, 100%, 35%, 0.32)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -4475,15 +4679,16 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
-          "borderColor": "hsla(193, 100%, 35%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -4494,8 +4699,8 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
-          "borderColor": "hsla(193, 100%, 35%, 0.32)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -4518,28 +4723,31 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.information.action.text.primary.default.lowContrast"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(195, 100%, 31%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -4563,7 +4771,7 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render large size button 1`] = `
+exports[`<BaseButton /> should render negative color primary button 1`] = `
 <View
   style={
     {
@@ -4591,27 +4799,25 @@ exports[`<BaseButton /> should render large size button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(4, 74%, 49%, 1)"
+    defaultBorderColor="hsla(4, 74%, 49%, 1)"
+    focusBackgroundColor="hsla(4, 77%, 40%, 1)"
+    focusBorderColor="hsla(4, 77%, 40%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(4, 77%, 40%, 1)"
+    hoverBorderColor="hsla(4, 77%, 40%, 1)"
     isFullWidth={false}
     isLoading={false}
-    minHeight="48px"
+    minHeight="36px"
     motionDuration="duration.xquick"
     motionEasing="easing.standard.effective"
     onBlur={[Function]}
@@ -4629,15 +4835,16 @@ exports[`<BaseButton /> should render large size button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(4, 74%, 49%, 1)",
+          "borderColor": "hsla(4, 74%, 49%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
-          "minHeight": 48,
+          "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -4648,8 +4855,8 @@ exports[`<BaseButton /> should render large size button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(4, 74%, 49%, 1)",
+          "borderColor": "hsla(4, 74%, 49%, 1)",
         },
       ]
     }
@@ -4672,29 +4879,32 @@ exports[`<BaseButton /> should render large size button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
-        fontSize={200}
-        fontWeight="bold"
-        lineHeight={300}
+        fontSize={100}
+        fontWeight="medium"
+        lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 24,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
@@ -4717,7 +4927,7 @@ exports[`<BaseButton /> should render large size button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render loading button 1`] = `
+exports[`<BaseButton /> should render negative color secondary button 1`] = `
 <View
   style={
     {
@@ -4731,7 +4941,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": true,
+        "disabled": false,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -4745,9 +4955,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 19%, 89%, 1)"
-    activeBorderColor="hsla(216, 19%, 89%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -4755,16 +4963,16 @@ exports[`<BaseButton /> should render loading button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 19%, 89%, 1)"
-    defaultBorderColor="hsla(216, 19%, 89%, 1)"
-    focusBackgroundColor="hsla(216, 19%, 89%, 1)"
-    focusBorderColor="hsla(216, 19%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    defaultBorderColor="hsla(4, 74%, 49%, 1)"
+    focusBackgroundColor="hsla(4, 74%, 49%, 0.18)"
+    focusBorderColor="hsla(4, 74%, 49%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 19%, 89%, 1)"
-    hoverBorderColor="hsla(216, 19%, 89%, 1)"
+    hoverBackgroundColor="hsla(4, 74%, 49%, 0.18)"
+    hoverBorderColor="hsla(4, 74%, 49%, 1)"
     isFullWidth={false}
-    isLoading={true}
+    isLoading={false}
     minHeight="36px"
     motionDuration="duration.xquick"
     motionEasing="easing.standard.effective"
@@ -4783,15 +4991,16 @@ exports[`<BaseButton /> should render loading button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
-          "cursor": "not-allowed",
+          "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -4802,169 +5011,19 @@ exports[`<BaseButton /> should render loading button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 1)",
         },
       ]
     }
     type="button"
   >
-    <View
-      alignItems="center"
-      bottom="0px"
-      data-blade-component="base-box"
-      display="flex"
-      justifyContent="center"
-      left="0px"
-      position="absolute"
-      right="0px"
-      style={
-        [
-          {
-            "alignItems": "center",
-            "bottom": 0,
-            "display": "flex",
-            "justifyContent": "center",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-        ]
-      }
-      top="0px"
-    >
-      <View
-        data-blade-component="spinner"
-        style={
-          [
-            {},
-          ]
-        }
-      >
-        <View
-          accessibilityLabel="Loading"
-          accessibilityRole="progressbar"
-          accessible={true}
-          alignItems="center"
-          data-blade-component="base-box"
-          display="flex"
-          flexDirection="row"
-          style={
-            [
-              {
-                "alignItems": "center",
-                "display": "flex",
-                "flexDirection": "row",
-              },
-            ]
-          }
-        >
-          <View
-            alignSelf="center"
-            data-blade-component="base-box"
-            style={
-              [
-                {
-                  "alignSelf": "center",
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "transform": [
-                    {
-                      "rotateZ": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <RNSVGSvgView
-                accessibilityElementsHidden={true}
-                align="xMidYMid"
-                bbHeight="20px"
-                bbWidth="20px"
-                data-blade-component="icon"
-                fill="none"
-                focusable={false}
-                height="20px"
-                importantForAccessibility="no-hide-descendants"
-                meetOrSlice={0}
-                minX={0}
-                minY={0}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "borderWidth": 0,
-                    },
-                    [
-                      {},
-                    ],
-                    {
-                      "flex": 0,
-                      "height": 20,
-                      "width": 20,
-                    },
-                  ]
-                }
-                vbHeight={24}
-                vbWidth={24}
-                width="20px"
-              >
-                <RNSVGGroup
-                  fill={null}
-                  propList={
-                    [
-                      "fill",
-                    ]
-                  }
-                >
-                  <RNSVGPath
-                    d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                    fill={4284378759}
-                    fillOpacity={0.2}
-                    propList={
-                      [
-                        "fill",
-                        "fillOpacity",
-                      ]
-                    }
-                  />
-                  <RNSVGPath
-                    d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                    fill={4284378759}
-                    propList={
-                      [
-                        "fill",
-                      ]
-                    }
-                  />
-                  <RNSVGPath
-                    d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                    fill={4284378759}
-                    propList={
-                      [
-                        "fill",
-                      ]
-                    }
-                  />
-                </RNSVGGroup>
-              </RNSVGSvgView>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
     <View
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
-      isHidden={true}
+      isHidden={false}
       justifyContent="center"
       style={
         [
@@ -4976,28 +5035,31 @@ exports[`<BaseButton /> should render loading button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
-            "opacity": 0,
+            "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.disabled"
+        color="interactive.text.negative.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(4, 74%, 49%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -5021,7 +5083,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render medium size button 1`] = `
+exports[`<BaseButton /> should render neutral color primary button 1`] = `
 <View
   style={
     {
@@ -5049,24 +5111,22 @@ exports[`<BaseButton /> should render medium size button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(211, 29%, 26%, 1)"
+    defaultBorderColor="hsla(211, 20%, 52%, 1)"
+    focusBackgroundColor="hsla(211, 33%, 21%, 1)"
+    focusBorderColor="hsla(211, 20%, 52%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(211, 33%, 21%, 1)"
+    hoverBorderColor="hsla(211, 20%, 52%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -5087,15 +5147,16 @@ exports[`<BaseButton /> should render medium size button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(211, 29%, 26%, 1)",
+          "borderColor": "hsla(211, 20%, 52%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -5106,8 +5167,8 @@ exports[`<BaseButton /> should render medium size button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(211, 29%, 26%, 1)",
+          "borderColor": "hsla(211, 20%, 52%, 1)",
         },
       ]
     }
@@ -5130,28 +5191,31 @@ exports[`<BaseButton /> should render medium size button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -5175,7 +5239,7 @@ exports[`<BaseButton /> should render medium size button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render negative color primary button 1`] = `
+exports[`<BaseButton /> should render neutral color secondary button 1`] = `
 <View
   style={
     {
@@ -5203,9 +5267,7 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(5, 69%, 32%, 1)"
-    activeBorderColor="hsla(0, 100%, 97%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -5213,14 +5275,14 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(8, 73%, 47%, 1)"
-    defaultBorderColor="hsla(0, 100%, 97%, 1)"
-    focusBackgroundColor="hsla(5, 69%, 32%, 1)"
-    focusBorderColor="hsla(0, 100%, 97%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    defaultBorderColor="hsla(211, 20%, 52%, 1)"
+    focusBackgroundColor="hsla(211, 20%, 52%, 0.32)"
+    focusBorderColor="hsla(211, 20%, 52%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(7, 72%, 40%, 1)"
-    hoverBorderColor="hsla(0, 100%, 97%, 1)"
+    hoverBackgroundColor="hsla(211, 20%, 52%, 0.32)"
+    hoverBorderColor="hsla(211, 20%, 52%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -5241,15 +5303,16 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(8, 73%, 47%, 1)",
-          "borderColor": "hsla(0, 100%, 97%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
+          "borderColor": "hsla(211, 20%, 52%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -5260,8 +5323,8 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(8, 73%, 47%, 1)",
-          "borderColor": "hsla(0, 100%, 97%, 1)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
+          "borderColor": "hsla(211, 20%, 52%, 1)",
         },
       ]
     }
@@ -5284,28 +5347,31 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.primary.default.highContrast"
+        color="interactive.text.neutral.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(0, 100%, 97%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(211, 33%, 21%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -5329,7 +5395,7 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render negative color secondary button 1`] = `
+exports[`<BaseButton /> should render notice color primary button 1`] = `
 <View
   style={
     {
@@ -5357,24 +5423,22 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(9, 91%, 56%, 0.32)"
-    activeBorderColor="hsla(9, 91%, 56%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    defaultBorderColor="hsla(9, 91%, 56%, 0.32)"
-    focusBackgroundColor="hsla(9, 91%, 56%, 0.32)"
-    focusBorderColor="hsla(9, 91%, 56%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(25, 90%, 48%, 1)"
+    defaultBorderColor="hsla(25, 90%, 48%, 1)"
+    focusBackgroundColor="hsla(25, 85%, 42%, 1)"
+    focusBorderColor="hsla(25, 85%, 42%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(9, 91%, 56%, 0.18)"
-    hoverBorderColor="hsla(9, 91%, 56%, 0.32)"
+    hoverBackgroundColor="hsla(25, 85%, 42%, 1)"
+    hoverBorderColor="hsla(25, 85%, 42%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -5395,15 +5459,16 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-          "borderColor": "hsla(9, 91%, 56%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(25, 90%, 48%, 1)",
+          "borderColor": "hsla(25, 90%, 48%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -5414,8 +5479,8 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-          "borderColor": "hsla(9, 91%, 56%, 0.32)",
+          "backgroundColor": "hsla(25, 90%, 48%, 1)",
+          "borderColor": "hsla(25, 90%, 48%, 1)",
         },
       ]
     }
@@ -5438,28 +5503,31 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.primary.default.lowContrast"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(8, 73%, 47%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -5483,7 +5551,7 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render neutral color primary button 1`] = `
+exports[`<BaseButton /> should render notice color secondary button 1`] = `
 <View
   style={
     {
@@ -5511,9 +5579,7 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(217, 56%, 17%, 1)"
-    activeBorderColor="hsla(214, 18%, 69%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -5521,14 +5587,14 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 33%, 29%, 1)"
-    defaultBorderColor="hsla(214, 18%, 69%, 1)"
-    focusBackgroundColor="hsla(217, 56%, 17%, 1)"
-    focusBorderColor="hsla(214, 18%, 69%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(25, 90%, 48%, 0.09)"
+    defaultBorderColor="hsla(25, 90%, 48%, 1)"
+    focusBackgroundColor="hsla(25, 90%, 48%, 0.18)"
+    focusBorderColor="hsla(25, 90%, 48%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 44%, 23%, 1)"
-    hoverBorderColor="hsla(214, 18%, 69%, 1)"
+    hoverBackgroundColor="hsla(25, 90%, 48%, 0.18)"
+    hoverBorderColor="hsla(25, 90%, 48%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -5549,15 +5615,16 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 33%, 29%, 1)",
-          "borderColor": "hsla(214, 18%, 69%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+          "borderColor": "hsla(25, 90%, 48%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -5568,8 +5635,8 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 33%, 29%, 1)",
-          "borderColor": "hsla(214, 18%, 69%, 1)",
+          "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+          "borderColor": "hsla(25, 90%, 48%, 1)",
         },
       ]
     }
@@ -5592,28 +5659,31 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.neutral.action.text.primary.default.highContrast"
+        color="interactive.text.notice.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(220, 27%, 98%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(25, 85%, 42%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -5637,7 +5707,7 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render neutral color secondary button 1`] = `
+exports[`<BaseButton /> should render positive color primary button 1`] = `
 <View
   style={
     {
@@ -5665,24 +5735,22 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 15%, 54%, 0.32)"
-    activeBorderColor="hsla(216, 15%, 54%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    defaultBorderColor="hsla(216, 15%, 54%, 0.32)"
-    focusBackgroundColor="hsla(216, 15%, 54%, 0.32)"
-    focusBorderColor="hsla(216, 15%, 54%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(150, 100%, 32%, 1)"
+    defaultBorderColor="hsla(150, 100%, 32%, 1)"
+    focusBackgroundColor="hsla(150, 100%, 27%, 1)"
+    focusBorderColor="hsla(150, 100%, 27%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 15%, 54%, 0.18)"
-    hoverBorderColor="hsla(216, 15%, 54%, 0.32)"
+    hoverBackgroundColor="hsla(150, 100%, 27%, 1)"
+    hoverBorderColor="hsla(150, 100%, 27%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -5703,15 +5771,16 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-          "borderColor": "hsla(216, 15%, 54%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(150, 100%, 32%, 1)",
+          "borderColor": "hsla(150, 100%, 32%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -5722,8 +5791,8 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-          "borderColor": "hsla(216, 15%, 54%, 0.32)",
+          "backgroundColor": "hsla(150, 100%, 32%, 1)",
+          "borderColor": "hsla(150, 100%, 32%, 1)",
         },
       ]
     }
@@ -5746,28 +5815,31 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.neutral.action.text.primary.default.lowContrast"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 27%, 36%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -5791,7 +5863,7 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render notice color primary button 1`] = `
+exports[`<BaseButton /> should render positive color secondary button 1`] = `
 <View
   style={
     {
@@ -5819,9 +5891,7 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(41, 82%, 26%, 1)"
-    activeBorderColor="hsla(32, 100%, 94%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -5829,14 +5899,14 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(38, 97%, 38%, 1)"
-    defaultBorderColor="hsla(32, 100%, 94%, 1)"
-    focusBackgroundColor="hsla(41, 82%, 26%, 1)"
-    focusBorderColor="hsla(32, 100%, 94%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    defaultBorderColor="hsla(150, 100%, 32%, 1)"
+    focusBackgroundColor="hsla(150, 100%, 32%, 0.18)"
+    focusBorderColor="hsla(150, 100%, 32%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(40, 90%, 32%, 1)"
-    hoverBorderColor="hsla(32, 100%, 94%, 1)"
+    hoverBackgroundColor="hsla(150, 100%, 32%, 0.18)"
+    hoverBorderColor="hsla(150, 100%, 32%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -5857,15 +5927,16 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(38, 97%, 38%, 1)",
-          "borderColor": "hsla(32, 100%, 94%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -5876,8 +5947,8 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(38, 97%, 38%, 1)",
-          "borderColor": "hsla(32, 100%, 94%, 1)",
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 1)",
         },
       ]
     }
@@ -5900,28 +5971,31 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.notice.action.text.primary.default.highContrast"
+        color="interactive.text.positive.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(32, 100%, 94%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(150, 100%, 27%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -5945,7 +6019,7 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render notice color secondary button 1`] = `
+exports[`<BaseButton /> should render primary color primary button 1`] = `
 <View
   style={
     {
@@ -5973,24 +6047,22 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(36, 100%, 44%, 0.32)"
-    activeBorderColor="hsla(36, 100%, 44%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(36, 100%, 44%, 0.09)"
-    defaultBorderColor="hsla(36, 100%, 44%, 0.32)"
-    focusBackgroundColor="hsla(36, 100%, 44%, 0.32)"
-    focusBorderColor="hsla(36, 100%, 44%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(36, 100%, 44%, 0.18)"
-    hoverBorderColor="hsla(36, 100%, 44%, 0.32)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -6011,15 +6083,16 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
-          "borderColor": "hsla(36, 100%, 44%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -6030,8 +6103,8 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
-          "borderColor": "hsla(36, 100%, 44%, 0.32)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -6054,28 +6127,31 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.notice.action.text.primary.default.lowContrast"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(38, 97%, 38%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -6099,7 +6175,7 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render positive color primary button 1`] = `
+exports[`<BaseButton /> should render primary color secondary button 1`] = `
 <View
   style={
     {
@@ -6127,9 +6203,7 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(164, 100%, 17%, 1)"
-    activeBorderColor="hsla(107, 100%, 96%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -6137,14 +6211,14 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(160, 100%, 26%, 1)"
-    defaultBorderColor="hsla(107, 100%, 96%, 1)"
-    focusBackgroundColor="hsla(164, 100%, 17%, 1)"
-    focusBorderColor="hsla(107, 100%, 96%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(163, 100%, 22%, 1)"
-    hoverBorderColor="hsla(107, 100%, 96%, 1)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -6165,15 +6239,16 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(160, 100%, 26%, 1)",
-          "borderColor": "hsla(107, 100%, 96%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -6184,8 +6259,8 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(160, 100%, 26%, 1)",
-          "borderColor": "hsla(107, 100%, 96%, 1)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -6208,28 +6283,31 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.primary.default.highContrast"
+        color="interactive.text.primary.subtle"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(107, 100%, 96%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -6253,7 +6331,7 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
 </View>
 `;
 
-exports[`<BaseButton /> should render positive color secondary button 1`] = `
+exports[`<BaseButton /> should render primary color tertiary button 1`] = `
 <View
   style={
     {
@@ -6281,24 +6359,22 @@ exports[`<BaseButton /> should render positive color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(155, 100%, 31%, 0.32)"
-    activeBorderColor="hsla(155, 100%, 31%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    defaultBorderColor="hsla(155, 100%, 31%, 0.32)"
-    focusBackgroundColor="hsla(155, 100%, 31%, 0.32)"
-    focusBorderColor="hsla(155, 100%, 31%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    defaultBorderColor="hsla(211, 27%, 76%, 1)"
+    focusBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    focusBorderColor="hsla(211, 27%, 76%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(155, 100%, 31%, 0.18)"
-    hoverBorderColor="hsla(155, 100%, 31%, 0.32)"
+    hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    hoverBorderColor="hsla(211, 27%, 76%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -6319,15 +6395,16 @@ exports[`<BaseButton /> should render positive color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-          "borderColor": "hsla(155, 100%, 31%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+          "borderColor": "hsla(211, 27%, 76%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -6338,8 +6415,7 @@ exports[`<BaseButton /> should render positive color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-          "borderColor": "hsla(155, 100%, 31%, 0.32)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
         },
       ]
     }
@@ -6362,28 +6438,31 @@ exports[`<BaseButton /> should render positive color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.primary.default.lowContrast"
+        color="interactive.text.gray.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(160, 100%, 26%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -6435,24 +6514,22 @@ exports[`<BaseButton /> should render small size button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="12px"
     buttonPaddingRight="12px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="32px"
@@ -6473,15 +6550,16 @@ exports[`<BaseButton /> should render small size button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 32,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 12,
           "paddingRight": 12,
@@ -6492,8 +6570,8 @@ exports[`<BaseButton /> should render small size button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -6516,29 +6594,32 @@ exports[`<BaseButton /> should render small size button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
-        lineHeight={50}
+        fontSize={50}
+        fontWeight="medium"
+        lineHeight={75}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "fontFamily": "Inter",
+              "fontSize": 11,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 16,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 18,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
@@ -6589,10 +6670,8 @@ exports[`<BaseButton /> should render white color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 4%, 89%, 1)"
-    activeBorderColor="hsla(216, 4%, 89%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
@@ -6601,12 +6680,12 @@ exports[`<BaseButton /> should render white color primary button 1`] = `
     data-blade-component="button"
     defaultBackgroundColor="hsla(0, 0%, 100%, 1)"
     defaultBorderColor="hsla(0, 0%, 100%, 1)"
-    focusBackgroundColor="hsla(216, 4%, 89%, 1)"
-    focusBorderColor="hsla(216, 4%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.8)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.8)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 6%, 94%, 1)"
-    hoverBorderColor="hsla(216, 6%, 94%, 1)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.8)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.8)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -6629,13 +6708,14 @@ exports[`<BaseButton /> should render white color primary button 1`] = `
           "alignSelf": "center",
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
           "borderColor": "hsla(0, 0%, 100%, 1)",
-          "borderRadius": 2,
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -6670,28 +6750,31 @@ exports[`<BaseButton /> should render white color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.primary.default"
+        color="interactive.text.staticBlack.muted"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 0%, 0.72)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -6743,9 +6826,7 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(210, 6%, 94%, 0.32)"
-    activeBorderColor="hsla(0, 0%, 100%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -6753,14 +6834,14 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(214, 15%, 18%, 0)"
-    defaultBorderColor="hsla(0, 0%, 100%, 1)"
-    focusBackgroundColor="hsla(210, 6%, 94%, 0.32)"
-    focusBorderColor="hsla(0, 0%, 100%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.8)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.8)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    hoverBorderColor="hsla(0, 0%, 100%, 1)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.8)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -6781,15 +6862,16 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(214, 15%, 18%, 0)",
-          "borderColor": "hsla(0, 0%, 100%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(0, 0%, 100%, 0.8)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -6800,8 +6882,8 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(214, 15%, 18%, 0)",
-          "borderColor": "hsla(0, 0%, 100%, 1)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(0, 0%, 100%, 0.8)",
         },
       ]
     }
@@ -6824,28 +6906,31 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.secondary.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -6897,24 +6982,22 @@ exports[`<BaseButton /> should render white color tertiary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(210, 6%, 94%, 0.32)"
-    activeBorderColor="hsla(214, 15%, 18%, 0)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    defaultBorderColor="hsla(214, 15%, 18%, 0)"
-    focusBackgroundColor="hsla(210, 6%, 94%, 0.32)"
-    focusBorderColor="hsla(214, 15%, 18%, 0)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.18)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.32)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    hoverBorderColor="hsla(214, 15%, 18%, 0)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.32)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.32)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -6935,15 +7018,16 @@ exports[`<BaseButton /> should render white color tertiary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(210, 6%, 94%, 0.09)",
-          "borderColor": "hsla(214, 15%, 18%, 0)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -6954,7 +7038,7 @@ exports[`<BaseButton /> should render white color tertiary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(210, 6%, 94%, 0.09)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
         },
       ]
     }
@@ -6977,28 +7061,31 @@ exports[`<BaseButton /> should render white color tertiary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.tertiary.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -7050,24 +7137,22 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="8px"
     buttonPaddingRight="8px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="28px"
@@ -7088,15 +7173,16 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 28,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 8,
           "paddingRight": 8,
@@ -7107,8 +7193,8 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -7131,29 +7217,32 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
-        lineHeight={50}
+        fontSize={50}
+        fontWeight="medium"
+        lineHeight={75}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "fontFamily": "Inter",
+              "fontSize": 11,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 16,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 18,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap
index 7f406a07e9b..a4e6a1b9665 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseButton /> should render button with icon with left iconPosition 1`] = `"<div id="root"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 juLFkx"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div data-blade-component="base-box" class="BaseBox-bmPWx vtnBD"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO hcXerP" data-blade-component="base-text">Pay Now</div></div></button></div>"`;
+exports[`<BaseButton /> should render button with icon with left iconPosition 1`] = `"<div id="root"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctKBsz"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div data-blade-component="base-box" class="BaseBox-bmPWx vtnBD"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO bewYNq" data-blade-component="base-text">Pay Now</div></div></button></div>"`;
 
 exports[`<BaseButton /> should render button with icon with left iconPosition 2`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -26,6 +26,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 2`
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -40,25 +41,25 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 2`
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -67,13 +68,17 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 2`
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -98,6 +103,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 2`
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c3.c3.c3.c3.c3 {
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
index 749537f919b..afdd82b00a2 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
@@ -5,10 +5,10 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -24,6 +24,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -38,25 +39,25 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -67,10 +68,10 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -86,6 +87,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -100,25 +102,25 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
 }
 
 .c4.c4.c4.c4.c4:hover {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c4.c4.c4.c4.c4:active {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c4.c4.c4.c4.c4:focus-visible {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c4.c4.c4.c4.c4 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -127,27 +129,35 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c9.c9.c9.c9.c9 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -172,6 +182,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c5.c5.c5.c5.c5 {
@@ -188,6 +199,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
   -ms-flex-pack: center;
   justify-content: center;
   position: absolute;
+  z-index: 1;
   top: 0px;
   right: 0px;
   bottom: 0px;
@@ -285,18 +297,18 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
               <path
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
                 data-blade-component="svg-path"
-                fill="hsla(217, 18%, 45%, 1)"
+                fill="hsla(227, 100%, 59%, 1)"
                 fill-opacity="0.2"
               />
               <path
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 data-blade-component="svg-path"
-                fill="hsla(217, 18%, 45%, 1)"
+                fill="hsla(227, 100%, 59%, 1)"
               />
               <path
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 data-blade-component="svg-path"
-                fill="hsla(217, 18%, 45%, 1)"
+                fill="hsla(227, 100%, 59%, 1)"
               />
             </svg>
           </div>
@@ -323,10 +335,10 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -342,6 +354,7 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -356,25 +369,25 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -383,13 +396,17 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -414,6 +431,7 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -447,10 +465,10 @@ exports[`<BaseButton /> should render button with full width 1`] = `
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -466,6 +484,7 @@ exports[`<BaseButton /> should render button with full width 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -480,25 +499,25 @@ exports[`<BaseButton /> should render button with full width 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -507,13 +526,17 @@ exports[`<BaseButton /> should render button with full width 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -538,6 +561,7 @@ exports[`<BaseButton /> should render button with full width 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -571,10 +595,10 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -590,6 +614,7 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -604,25 +629,25 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -631,13 +656,17 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -662,6 +691,7 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c3.c3.c3.c3.c3 {
@@ -733,10 +763,10 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -752,6 +782,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -766,25 +797,25 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -793,13 +824,17 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -824,6 +859,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c3.c3.c3.c3.c3 {
@@ -895,10 +931,10 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -914,6 +950,7 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -928,25 +965,25 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -955,13 +992,17 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -986,6 +1027,7 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c4.c4.c4.c4.c4 {
@@ -1057,10 +1099,10 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1076,6 +1118,7 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1090,25 +1133,25 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1134,6 +1177,7 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1193,15 +1237,15 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render default color primary button 1`] = `
+exports[`<BaseButton /> should render disabled button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  cursor: not-allowed;
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1217,6 +1261,7 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1231,25 +1276,25 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1257,14 +1302,18 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1289,6 +1338,7 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1299,6 +1349,7 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
   <button
     class="c0"
     data-blade-component="button"
+    disabled=""
     role="button"
     type="button"
   >
@@ -1317,15 +1368,15 @@ exports[`<BaseButton /> should render default color primary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render default color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled information color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: pointer;
-  background-color: hsla(218,89%,51%,0);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  cursor: not-allowed;
+  background-color: hsla(200,84%,44%,0.09);
+  border-color: hsla(200,84%,44%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1341,6 +1392,7 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1355,25 +1407,25 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(200,84%,44%,0.09);
+  border-color: hsla(200,84%,44%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(218,89%,51%,0.32);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(200,84%,44%,0.09);
+  border-color: hsla(200,84%,44%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(218,89%,51%,0.18);
-  border-color: hsla(218,89%,51%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(200,84%,44%,0.09);
+  border-color: hsla(200,84%,44%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1381,14 +1433,18 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,44%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1413,6 +1469,7 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1423,6 +1480,7 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
   <button
     class="c0"
     data-blade-component="button"
+    disabled=""
     role="button"
     type="button"
   >
@@ -1441,15 +1499,15 @@ exports[`<BaseButton /> should render default color secondary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render default color tertiary button 1`] = `
+exports[`<BaseButton /> should render disabled information color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: pointer;
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,44%,23%,0);
+  cursor: not-allowed;
+  background-color: hsla(200,84%,44%,0.09);
+  border-color: hsla(200,84%,44%,0.18);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1465,6 +1523,7 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1479,22 +1538,25 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(200,84%,44%,0.09);
+  border-color: hsla(200,84%,44%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,15%,54%,0.32);
+  background-color: hsla(200,84%,44%,0.09);
+  border-color: hsla(200,84%,44%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,15%,54%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(200,84%,44%,0.09);
+  border-color: hsla(200,84%,44%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1502,14 +1564,18 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,33%,29%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,44%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1534,6 +1600,7 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1544,6 +1611,7 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
   <button
     class="c0"
     data-blade-component="button"
+    disabled=""
     role="button"
     type="button"
   >
@@ -1562,15 +1630,15 @@ exports[`<BaseButton /> should render default color tertiary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled button 1`] = `
+exports[`<BaseButton /> should render disabled negative color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1586,6 +1654,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1600,25 +1669,25 @@ exports[`<BaseButton /> should render disabled button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1626,14 +1695,18 @@ exports[`<BaseButton /> should render disabled button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1658,6 +1731,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1687,15 +1761,15 @@ exports[`<BaseButton /> should render disabled button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled default color primary button 1`] = `
+exports[`<BaseButton /> should render disabled negative color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1711,6 +1785,7 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1725,25 +1800,25 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1751,14 +1826,18 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1783,6 +1862,7 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1812,15 +1892,15 @@ exports[`<BaseButton /> should render disabled default color primary button 1`]
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled default color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled neutral color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,44%,23%,0);
-  border-color: hsla(218,19%,81%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(211,20%,52%,0.18);
+  border-color: hsla(214,28%,84%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1836,6 +1916,7 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1850,25 +1931,25 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,44%,23%,0);
-  border-color: hsla(218,19%,81%,1);
+  background-color: hsla(211,20%,52%,0.18);
+  border-color: hsla(214,28%,84%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,44%,23%,0);
-  border-color: hsla(218,19%,81%,1);
+  background-color: hsla(211,20%,52%,0.18);
+  border-color: hsla(214,28%,84%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,44%,23%,0);
-  border-color: hsla(218,19%,81%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-color: hsla(214,28%,84%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1876,14 +1957,18 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,19%,81%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1908,6 +1993,7 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1937,15 +2023,15 @@ exports[`<BaseButton /> should render disabled default color secondary button 1`
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled default color tertiary button 1`] = `
+exports[`<BaseButton /> should render disabled neutral color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(211,20%,52%,0.18);
+  border-color: hsla(214,28%,84%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1961,6 +2047,7 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1975,22 +2062,25 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
+  border-color: hsla(214,28%,84%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.18);
+  border-color: hsla(214,28%,84%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,15%,54%,0.09);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-color: hsla(214,28%,84%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1998,14 +2088,18 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,19%,81%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2030,6 +2124,7 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2059,15 +2154,15 @@ exports[`<BaseButton /> should render disabled default color tertiary button 1`]
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled information color primary button 1`] = `
+exports[`<BaseButton /> should render disabled notice color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(193,100%,35%,1);
-  border-color: hsla(187,68%,52%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(25,90%,48%,0.09);
+  border-color: hsla(25,90%,48%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2083,6 +2178,7 @@ exports[`<BaseButton /> should render disabled information color primary button
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2097,25 +2193,25 @@ exports[`<BaseButton /> should render disabled information color primary button
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(193,100%,35%,1);
-  border-color: hsla(187,68%,52%,1);
+  background-color: hsla(25,90%,48%,0.09);
+  border-color: hsla(25,90%,48%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(193,100%,35%,1);
-  border-color: hsla(187,68%,52%,1);
+  background-color: hsla(25,90%,48%,0.09);
+  border-color: hsla(25,90%,48%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(193,100%,35%,1);
-  border-color: hsla(187,68%,52%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(25,90%,48%,0.09);
+  border-color: hsla(25,90%,48%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2123,14 +2219,18 @@ exports[`<BaseButton /> should render disabled information color primary button
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(187,68%,52%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,90%,48%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2155,6 +2255,7 @@ exports[`<BaseButton /> should render disabled information color primary button
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2184,15 +2285,15 @@ exports[`<BaseButton /> should render disabled information color primary button
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled information color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled notice color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(193,100%,35%,0.09);
-  border-color: hsla(193,100%,35%,0.32);
+  background-color: hsla(25,90%,48%,0.09);
+  border-color: hsla(25,90%,48%,0.18);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2208,6 +2309,7 @@ exports[`<BaseButton /> should render disabled information color secondary butto
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2222,25 +2324,25 @@ exports[`<BaseButton /> should render disabled information color secondary butto
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(193,100%,35%,0.09);
-  border-color: hsla(193,100%,35%,0.32);
+  background-color: hsla(25,90%,48%,0.09);
+  border-color: hsla(25,90%,48%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(193,100%,35%,0.09);
-  border-color: hsla(193,100%,35%,0.32);
+  background-color: hsla(25,90%,48%,0.09);
+  border-color: hsla(25,90%,48%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(193,100%,35%,0.09);
-  border-color: hsla(193,100%,35%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(25,90%,48%,0.09);
+  border-color: hsla(25,90%,48%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2248,14 +2350,18 @@ exports[`<BaseButton /> should render disabled information color secondary butto
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(193,100%,35%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,90%,48%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2280,6 +2386,7 @@ exports[`<BaseButton /> should render disabled information color secondary butto
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2309,15 +2416,15 @@ exports[`<BaseButton /> should render disabled information color secondary butto
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled negative color primary button 1`] = `
+exports[`<BaseButton /> should render disabled positive color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(8,99%,65%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2333,6 +2440,7 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2347,25 +2455,25 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(8,99%,65%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(8,99%,65%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(8,99%,65%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2373,14 +2481,18 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(8,99%,65%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,32%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2405,6 +2517,7 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2434,15 +2547,15 @@ exports[`<BaseButton /> should render disabled negative color primary button 1`]
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled negative color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled positive color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2458,6 +2571,7 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2472,25 +2586,25 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2498,14 +2612,18 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(9,91%,56%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,32%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2530,6 +2648,7 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2559,15 +2678,15 @@ exports[`<BaseButton /> should render disabled negative color secondary button 1
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled neutral color primary button 1`] = `
+exports[`<BaseButton /> should render disabled primary color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,33%,29%,1);
-  border-color: hsla(216,15%,54%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2583,6 +2702,7 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2597,25 +2717,25 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,33%,29%,1);
-  border-color: hsla(216,15%,54%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,33%,29%,1);
-  border-color: hsla(216,15%,54%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,33%,29%,1);
-  border-color: hsla(216,15%,54%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2623,14 +2743,18 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,15%,54%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2655,6 +2779,7 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2684,15 +2809,15 @@ exports[`<BaseButton /> should render disabled neutral color primary button 1`]
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled neutral color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled primary color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,15%,54%,0.32);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,0.18);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2708,6 +2833,7 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2722,25 +2848,25 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,15%,54%,0.32);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,15%,54%,0.32);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,15%,54%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2748,14 +2874,18 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,15%,54%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2780,6 +2910,7 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2809,15 +2940,15 @@ exports[`<BaseButton /> should render disabled neutral color secondary button 1`
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled notice color primary button 1`] = `
+exports[`<BaseButton /> should render disabled primary color tertiary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(38,97%,38%,1);
-  border-color: hsla(35,84%,54%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(211,20%,52%,0.09);
+  border-color: hsla(214,40%,92%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2833,6 +2964,7 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2847,25 +2979,22 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(38,97%,38%,1);
-  border-color: hsla(35,84%,54%,1);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(38,97%,38%,1);
-  border-color: hsla(35,84%,54%,1);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(38,97%,38%,1);
-  border-color: hsla(35,84%,54%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2873,14 +3002,18 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(35,84%,54%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2905,6 +3038,7 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2934,15 +3068,15 @@ exports[`<BaseButton /> should render disabled notice color primary button 1`] =
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled notice color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled white color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(36,100%,44%,0.09);
-  border-color: hsla(36,100%,44%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.32);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2958,6 +3092,7 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2972,25 +3107,25 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(36,100%,44%,0.09);
-  border-color: hsla(36,100%,44%,0.32);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(36,100%,44%,0.09);
-  border-color: hsla(36,100%,44%,0.32);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(36,100%,44%,0.09);
-  border-color: hsla(36,100%,44%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.32);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2998,14 +3133,18 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(36,100%,44%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,0%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3030,6 +3169,7 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3059,15 +3199,15 @@ exports[`<BaseButton /> should render disabled notice color secondary button 1`]
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled positive color primary button 1`] = `
+exports[`<BaseButton /> should render disabled white color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(149,99%,35%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.32);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3083,6 +3223,7 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3097,25 +3238,25 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(149,99%,35%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(149,99%,35%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(149,99%,35%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.32);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3123,14 +3264,18 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(149,99%,35%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3155,6 +3300,7 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3184,15 +3330,15 @@ exports[`<BaseButton /> should render disabled positive color primary button 1`]
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled positive color secondary button 1`] = `
+exports[`<BaseButton /> should render disabled white color tertiary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3208,6 +3354,7 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3222,25 +3369,22 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(0,0%,100%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(0,0%,100%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3248,14 +3392,18 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(155,100%,31%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3280,6 +3428,7 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3309,15 +3458,15 @@ exports[`<BaseButton /> should render disabled positive color secondary button 1
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled white color primary button 1`] = `
+exports[`<BaseButton /> should render information color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: not-allowed;
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(210,6%,94%,0.18);
-  border-width: 1px;
-  border-radius: 2px;
+  cursor: pointer;
+  background-color: hsla(200,84%,44%,1);
+  border-color: hsla(200,84%,44%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3333,6 +3482,7 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3347,25 +3497,25 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(210,6%,94%,0.18);
+  background-color: hsla(200,84%,37%,1);
+  border-color: hsla(200,84%,37%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(210,6%,94%,0.18);
+  background-color: hsla(200,84%,37%,1);
+  border-color: hsla(200,84%,37%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(210,6%,94%,0.18);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(200,84%,37%,1);
+  border-color: hsla(200,84%,37%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3373,14 +3523,18 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(210,6%,94%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3405,6 +3559,7 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3415,7 +3570,6 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
   <button
     class="c0"
     data-blade-component="button"
-    disabled=""
     role="button"
     type="button"
   >
@@ -3434,15 +3588,15 @@ exports[`<BaseButton /> should render disabled white color primary button 1`] =
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled white color secondary button 1`] = `
+exports[`<BaseButton /> should render information color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: not-allowed;
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(210,6%,94%,0.32);
+  cursor: pointer;
+  background-color: hsla(200,84%,44%,0.09);
+  border-color: hsla(200,84%,44%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3458,6 +3612,7 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3472,25 +3627,25 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(210,6%,94%,0.32);
+  background-color: hsla(200,84%,44%,0.18);
+  border-color: hsla(200,84%,44%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(210,6%,94%,0.32);
+  background-color: hsla(200,84%,44%,0.18);
+  border-color: hsla(200,84%,44%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(210,6%,94%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(200,84%,44%,0.18);
+  border-color: hsla(200,84%,44%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3498,14 +3653,18 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(210,6%,94%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,37%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3530,6 +3689,7 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3540,7 +3700,6 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
   <button
     class="c0"
     data-blade-component="button"
-    disabled=""
     role="button"
     type="button"
   >
@@ -3559,15 +3718,15 @@ exports[`<BaseButton /> should render disabled white color secondary button 1`]
 </div>
 `;
 
-exports[`<BaseButton /> should render disabled white color tertiary button 1`] = `
+exports[`<BaseButton /> should render large size button 1`] = `
 .c0.c0.c0.c0.c0 {
-  min-height: 36px;
+  min-height: 48px;
   width: auto;
-  cursor: not-allowed;
-  background-color: hsla(210,6%,94%,0.09);
-  border-color: hsla(214,15%,18%,0);
-  border-width: 1px;
-  border-radius: 2px;
+  cursor: pointer;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3583,6 +3742,7 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3597,22 +3757,25 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(210,6%,94%,0.09);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(210,6%,94%,0.09);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(210,6%,94%,0.09);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3620,14 +3783,18 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(210,6%,94%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 700;
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.25rem;
+  line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3652,6 +3819,7 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3662,7 +3830,6 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
   <button
     class="c0"
     data-blade-component="button"
-    disabled=""
     role="button"
     type="button"
   >
@@ -3681,15 +3848,15 @@ exports[`<BaseButton /> should render disabled white color tertiary button 1`] =
 </div>
 `;
 
-exports[`<BaseButton /> should render information color primary button 1`] = `
+exports[`<BaseButton /> should render medium size button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(193,100%,35%,1);
-  border-color: hsla(180,100%,97%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3705,6 +3872,7 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3719,25 +3887,25 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(195,100%,31%,1);
-  border-color: hsla(180,100%,97%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(196,100%,27%,1);
-  border-color: hsla(180,100%,97%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(196,100%,27%,1);
-  border-color: hsla(180,100%,97%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3745,14 +3913,18 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(180,100%,97%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3777,6 +3949,7 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3805,15 +3978,15 @@ exports[`<BaseButton /> should render information color primary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render information color secondary button 1`] = `
+exports[`<BaseButton /> should render negative color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(193,100%,35%,0.09);
-  border-color: hsla(193,100%,35%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(4,74%,49%,1);
+  border-color: hsla(4,74%,49%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3829,6 +4002,7 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3843,25 +4017,25 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(193,100%,35%,0.18);
-  border-color: hsla(193,100%,35%,0.32);
+  background-color: hsla(4,77%,40%,1);
+  border-color: hsla(4,77%,40%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(193,100%,35%,0.32);
-  border-color: hsla(193,100%,35%,0.32);
+  background-color: hsla(4,77%,40%,1);
+  border-color: hsla(4,77%,40%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(193,100%,35%,0.32);
-  border-color: hsla(193,100%,35%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(4,77%,40%,1);
+  border-color: hsla(4,77%,40%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3869,14 +4043,18 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(195,100%,31%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3901,6 +4079,7 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3929,15 +4108,15 @@ exports[`<BaseButton /> should render information color secondary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render large size button 1`] = `
+exports[`<BaseButton /> should render negative color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
-  min-height: 48px;
+  min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3953,6 +4132,7 @@ exports[`<BaseButton /> should render large size button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3967,25 +4147,25 @@ exports[`<BaseButton /> should render large size button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(4,74%,49%,0.18);
+  border-color: hsla(4,74%,49%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(4,74%,49%,0.18);
+  border-color: hsla(4,74%,49%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(4,74%,49%,0.18);
+  border-color: hsla(4,74%,49%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3993,14 +4173,18 @@ exports[`<BaseButton /> should render large size button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 700;
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.5rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -4025,6 +4209,7 @@ exports[`<BaseButton /> should render large size button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -4053,15 +4238,15 @@ exports[`<BaseButton /> should render large size button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render medium size button 1`] = `
+exports[`<BaseButton /> should render neutral color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(211,29%,26%,1);
+  border-color: hsla(211,20%,52%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -4077,6 +4262,7 @@ exports[`<BaseButton /> should render medium size button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4091,25 +4277,25 @@ exports[`<BaseButton /> should render medium size button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(211,33%,21%,1);
+  border-color: hsla(211,20%,52%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(211,33%,21%,1);
+  border-color: hsla(211,20%,52%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,33%,21%,1);
+  border-color: hsla(211,20%,52%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -4118,13 +4304,17 @@ exports[`<BaseButton /> should render medium size button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -4149,6 +4339,7 @@ exports[`<BaseButton /> should render medium size button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -4177,15 +4368,15 @@ exports[`<BaseButton /> should render medium size button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render negative color primary button 1`] = `
+exports[`<BaseButton /> should render neutral color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(0,100%,97%,1);
+  background-color: hsla(211,20%,52%,0.18);
+  border-color: hsla(211,20%,52%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -4201,6 +4392,7 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4215,25 +4407,25 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(7,72%,40%,1);
-  border-color: hsla(0,100%,97%,1);
+  background-color: hsla(211,20%,52%,0.32);
+  border-color: hsla(211,20%,52%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(5,69%,32%,1);
-  border-color: hsla(0,100%,97%,1);
+  background-color: hsla(211,20%,52%,0.32);
+  border-color: hsla(211,20%,52%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(5,69%,32%,1);
-  border-color: hsla(0,100%,97%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,20%,52%,0.32);
+  border-color: hsla(211,20%,52%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -4241,14 +4433,18 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(0,100%,97%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -4273,6 +4469,7 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -4301,15 +4498,15 @@ exports[`<BaseButton /> should render negative color primary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render negative color secondary button 1`] = `
+exports[`<BaseButton /> should render notice color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(25,90%,48%,1);
+  border-color: hsla(25,90%,48%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -4325,6 +4522,7 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4339,25 +4537,25 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(9,91%,56%,0.18);
-  border-color: hsla(9,91%,56%,0.32);
+  background-color: hsla(25,85%,42%,1);
+  border-color: hsla(25,85%,42%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(9,91%,56%,0.32);
-  border-color: hsla(9,91%,56%,0.32);
+  background-color: hsla(25,85%,42%,1);
+  border-color: hsla(25,85%,42%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(9,91%,56%,0.32);
-  border-color: hsla(9,91%,56%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(25,85%,42%,1);
+  border-color: hsla(25,85%,42%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -4365,14 +4563,18 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -4397,6 +4599,7 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -4425,15 +4628,15 @@ exports[`<BaseButton /> should render negative color secondary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render neutral color primary button 1`] = `
+exports[`<BaseButton /> should render notice color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(216,33%,29%,1);
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(25,90%,48%,0.09);
+  border-color: hsla(25,90%,48%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -4449,6 +4652,7 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4463,25 +4667,25 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,44%,23%,1);
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(25,90%,48%,0.18);
+  border-color: hsla(25,90%,48%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(217,56%,17%,1);
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(25,90%,48%,0.18);
+  border-color: hsla(25,90%,48%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(217,56%,17%,1);
-  border-color: hsla(214,18%,69%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(25,90%,48%,0.18);
+  border-color: hsla(25,90%,48%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -4489,14 +4693,18 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(220,27%,98%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,85%,42%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -4521,6 +4729,7 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -4549,15 +4758,15 @@ exports[`<BaseButton /> should render neutral color primary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render neutral color secondary button 1`] = `
+exports[`<BaseButton /> should render positive color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,15%,54%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(150,100%,32%,1);
+  border-color: hsla(150,100%,32%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -4573,6 +4782,7 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4587,25 +4797,25 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-color: hsla(216,15%,54%,0.32);
+  background-color: hsla(150,100%,27%,1);
+  border-color: hsla(150,100%,27%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,15%,54%,0.32);
-  border-color: hsla(216,15%,54%,0.32);
+  background-color: hsla(150,100%,27%,1);
+  border-color: hsla(150,100%,27%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,15%,54%,0.32);
-  border-color: hsla(216,15%,54%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(150,100%,27%,1);
+  border-color: hsla(150,100%,27%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -4613,14 +4823,18 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -4645,6 +4859,7 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -4673,15 +4888,15 @@ exports[`<BaseButton /> should render neutral color secondary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render notice color primary button 1`] = `
+exports[`<BaseButton /> should render positive color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(38,97%,38%,1);
-  border-color: hsla(32,100%,94%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -4697,6 +4912,7 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4711,25 +4927,25 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(40,90%,32%,1);
-  border-color: hsla(32,100%,94%,1);
+  background-color: hsla(150,100%,32%,0.18);
+  border-color: hsla(150,100%,32%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(41,82%,26%,1);
-  border-color: hsla(32,100%,94%,1);
+  background-color: hsla(150,100%,32%,0.18);
+  border-color: hsla(150,100%,32%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(41,82%,26%,1);
-  border-color: hsla(32,100%,94%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(150,100%,32%,0.18);
+  border-color: hsla(150,100%,32%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -4737,14 +4953,18 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(32,100%,94%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -4769,6 +4989,7 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -4797,15 +5018,15 @@ exports[`<BaseButton /> should render notice color primary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render notice color secondary button 1`] = `
+exports[`<BaseButton /> should render primary color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(36,100%,44%,0.09);
-  border-color: hsla(36,100%,44%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -4821,6 +5042,7 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4835,25 +5057,25 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(36,100%,44%,0.18);
-  border-color: hsla(36,100%,44%,0.32);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(36,100%,44%,0.32);
-  border-color: hsla(36,100%,44%,0.32);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(36,100%,44%,0.32);
-  border-color: hsla(36,100%,44%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -4861,14 +5083,18 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(38,97%,38%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -4893,6 +5119,7 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -4921,15 +5148,15 @@ exports[`<BaseButton /> should render notice color secondary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render positive color primary button 1`] = `
+exports[`<BaseButton /> should render primary color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(107,100%,96%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -4945,6 +5172,7 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4959,25 +5187,25 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(163,100%,22%,1);
-  border-color: hsla(107,100%,96%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(164,100%,17%,1);
-  border-color: hsla(107,100%,96%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(164,100%,17%,1);
-  border-color: hsla(107,100%,96%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -4985,14 +5213,18 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(107,100%,96%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -5017,6 +5249,7 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -5045,15 +5278,15 @@ exports[`<BaseButton /> should render positive color primary button 1`] = `
 </div>
 `;
 
-exports[`<BaseButton /> should render positive color secondary button 1`] = `
+exports[`<BaseButton /> should render primary color tertiary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(211,20%,52%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -5069,6 +5302,7 @@ exports[`<BaseButton /> should render positive color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5083,25 +5317,22 @@ exports[`<BaseButton /> should render positive color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(155,100%,31%,0.18);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(155,100%,31%,0.32);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(155,100%,31%,0.32);
-  border-color: hsla(155,100%,31%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -5109,14 +5340,18 @@ exports[`<BaseButton /> should render positive color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -5141,6 +5376,7 @@ exports[`<BaseButton /> should render positive color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -5174,10 +5410,10 @@ exports[`<BaseButton /> should render small size button 1`] = `
   min-height: 32px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -5193,6 +5429,7 @@ exports[`<BaseButton /> should render small size button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5207,25 +5444,25 @@ exports[`<BaseButton /> should render small size button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -5234,13 +5471,17 @@ exports[`<BaseButton /> should render small size button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -5265,6 +5506,7 @@ exports[`<BaseButton /> should render small size button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -5300,8 +5542,8 @@ exports[`<BaseButton /> should render white color primary button 1`] = `
   cursor: pointer;
   background-color: hsla(0,0%,100%,1);
   border-color: hsla(0,0%,100%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -5317,6 +5559,7 @@ exports[`<BaseButton /> should render white color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5331,25 +5574,25 @@ exports[`<BaseButton /> should render white color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,6%,94%,1);
-  border-color: hsla(216,6%,94%,1);
+  background-color: hsla(0,0%,100%,0.8);
+  border-color: hsla(0,0%,100%,0.8);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,4%,89%,1);
-  border-color: hsla(216,4%,89%,1);
+  background-color: hsla(0,0%,100%,0.8);
+  border-color: hsla(0,0%,100%,0.8);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,4%,89%,1);
-  border-color: hsla(216,4%,89%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.8);
+  border-color: hsla(0,0%,100%,0.8);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -5357,14 +5600,18 @@ exports[`<BaseButton /> should render white color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,0%,0.72);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -5389,6 +5636,7 @@ exports[`<BaseButton /> should render white color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -5422,10 +5670,10 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(0,0%,100%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.8);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -5441,6 +5689,7 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5455,25 +5704,25 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(0,0%,100%,1);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.8);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(210,6%,94%,0.32);
-  border-color: hsla(0,0%,100%,1);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.8);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(210,6%,94%,0.32);
-  border-color: hsla(0,0%,100%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.8);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -5482,13 +5731,17 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -5513,6 +5766,7 @@ exports[`<BaseButton /> should render white color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -5546,10 +5800,10 @@ exports[`<BaseButton /> should render white color tertiary button 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(210,6%,94%,0.09);
-  border-color: hsla(214,15%,18%,0);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -5565,6 +5819,7 @@ exports[`<BaseButton /> should render white color tertiary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5579,22 +5834,22 @@ exports[`<BaseButton /> should render white color tertiary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(210,6%,94%,0.18);
+  background-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(210,6%,94%,0.32);
+  background-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(210,6%,94%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.32);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -5603,13 +5858,17 @@ exports[`<BaseButton /> should render white color tertiary button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -5634,6 +5893,7 @@ exports[`<BaseButton /> should render white color tertiary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -5667,10 +5927,10 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
   min-height: 28px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -5686,6 +5946,7 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5700,25 +5961,25 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -5727,13 +5988,17 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -5758,6 +6023,7 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
diff --git a/packages/blade/src/components/Button/BaseButton/buttonTokens.ts b/packages/blade/src/components/Button/BaseButton/buttonTokens.ts
index 0f4a8119d8f..b2ca5b113ed 100644
--- a/packages/blade/src/components/Button/BaseButton/buttonTokens.ts
+++ b/packages/blade/src/components/Button/BaseButton/buttonTokens.ts
@@ -1,9 +1,11 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import type { BaseButtonProps } from './BaseButton';
 import type { Theme } from '~components/BladeProvider';
 import type { IconSize } from '~components/Icons';
 import type { SpinnerProps } from '~components/Spinner';
 import type { Size } from '~tokens/global';
 import { size } from '~tokens/global';
+import type { FeedbackColors } from '~tokens/theme/theme';
 
 export type ButtonMinHeight = Size[28] | Size[32] | Size[36] | Size[48];
 
@@ -17,20 +19,135 @@ export type ButtonTypography = {
   >;
 };
 
+const backgroundColor = (property: 'background' | 'border') => {
+  const isBorder = property === 'border';
+  return {
+    base: {
+      primary: {
+        default: `interactive.${property}.primary.default`,
+        highlighted: `interactive.${property}.primary.highlighted`,
+        disabled: `interactive.${property}.primary.disabled`,
+      },
+      secondary: {
+        default: isBorder ? 'interactive.border.primary.default' : 'transparent',
+        highlighted: isBorder
+          ? `interactive.border.primary.default`
+          : `interactive.background.primary.faded`,
+        disabled: isBorder ? `interactive.border.primary.disabled` : `transparent`,
+      },
+      tertiary: {
+        default: `interactive.${property}.gray.default`,
+        highlighted: `interactive.${property}.gray.highlighted`,
+        disabled: `interactive.${property}.gray.disabled`,
+      },
+    },
+    white: {
+      primary: {
+        default: `interactive.${property}.staticWhite.default`,
+        highlighted: `interactive.${property}.staticWhite.highlighted`,
+        disabled: `interactive.${property}.staticWhite.disabled`,
+      },
+      secondary: {
+        default: isBorder ? 'interactive.border.staticWhite.highlighted' : 'transparent',
+        highlighted: isBorder
+          ? 'interactive.border.staticWhite.highlighted'
+          : 'interactive.background.staticWhite.faded',
+        disabled: isBorder ? `interactive.border.staticWhite.disabled` : 'transparent',
+      },
+      tertiary: {
+        default: `interactive.background.staticWhite.faded`,
+        highlighted: `interactive.background.staticWhite.fadedHighlighted`,
+        disabled: `interactive.background.staticWhite.disabled`,
+      },
+    },
+    color: (color: FeedbackColors) => {
+      return {
+        primary: {
+          default: `interactive.${property}.${color}.default`,
+          highlighted: `interactive.${property}.${color}.highlighted`,
+          disabled: `interactive.${property}.${color}.disabled`,
+        },
+        secondary: {
+          default: isBorder
+            ? (`interactive.border.${color}.default` as const)
+            : (`interactive.background.${color}.faded` as const),
+          highlighted: isBorder
+            ? (`interactive.border.${color}.default` as const)
+            : (`interactive.background.${color}.fadedHighlighted` as const),
+          disabled: `interactive.${property}.${color}.disabled`,
+        },
+      } as const;
+    },
+  } as const;
+};
+
+const textColor = (property: 'icon' | 'text') => {
+  return {
+    base: {
+      primary: {
+        default: `interactive.${property}.onPrimary.normal`,
+        highlighted: `interactive.${property}.onPrimary.normal`,
+        disabled: `interactive.${property}.primary.disabled`,
+      },
+      secondary: {
+        default: `interactive.${property}.primary.subtle`,
+        highlighted: `interactive.${property}.primary.subtle`,
+        disabled: `interactive.${property}.primary.disabled`,
+      },
+      tertiary: {
+        default: `interactive.${property}.gray.normal`,
+        highlighted: `interactive.${property}.gray.normal`,
+        disabled: `interactive.${property}.gray.disabled`,
+      },
+    },
+    white: {
+      primary: {
+        default: `interactive.${property}.staticBlack.muted`,
+        highlighted: `interactive.${property}.staticBlack.muted`,
+        disabled: `interactive.${property}.staticBlack.disabled`,
+      },
+      secondary: {
+        default: `interactive.${property}.staticWhite.normal`,
+        highlighted: `interactive.${property}.staticWhite.normal`,
+        disabled: `interactive.${property}.staticWhite.disabled`,
+      },
+      tertiary: {
+        default: `interactive.${property}.staticWhite.normal`,
+        highlighted: `interactive.${property}.staticWhite.normal`,
+        disabled: `interactive.${property}.staticWhite.disabled`,
+      },
+    },
+    color: (color: FeedbackColors) => {
+      return {
+        primary: {
+          default: `interactive.${property}.staticWhite.normal`,
+          highlighted: `interactive.${property}.staticWhite.normal`,
+          disabled: `interactive.${property}.${color}.disabled`,
+        },
+        secondary: {
+          default: `interactive.${property}.${color}.normal`,
+          highlighted: `interactive.${property}.${color}.normal`,
+          disabled: `interactive.${property}.${color}.disabled`,
+        },
+      } as const;
+    },
+  } as const;
+};
+
 const typography: ButtonTypography = {
   fonts: {
     size: {
-      xsmall: 75,
-      small: 75,
+      xsmall: 50,
+      small: 50,
       medium: 100,
       large: 200,
     },
   },
   lineHeights: {
-    xsmall: 50,
-    small: 50,
+    xsmall: 75,
+    small: 75,
     medium: 100,
-    large: 300,
+    large: 200,
   },
 };
 
@@ -133,6 +250,8 @@ const buttonIconPadding: Record<NonNullable<BaseButtonProps['size']>, keyof Them
 };
 
 export {
+  backgroundColor,
+  textColor,
   typography,
   minHeight,
   buttonSizeToIconSizeMap,
diff --git a/packages/blade/src/components/Button/BaseButton/getStyledBaseButtonStyles.ts b/packages/blade/src/components/Button/BaseButton/getStyledBaseButtonStyles.ts
index a17b86e1fc6..bb6f0233a2c 100644
--- a/packages/blade/src/components/Button/BaseButton/getStyledBaseButtonStyles.ts
+++ b/packages/blade/src/components/Button/BaseButton/getStyledBaseButtonStyles.ts
@@ -32,6 +32,7 @@ const getBaseButtonStyles = ({
   justifyContent: 'center',
   alignItems: 'center',
   textDecoration: 'none',
+  overflow: 'hidden',
 });
 
 export default getBaseButtonStyles;
diff --git a/packages/blade/src/components/Button/BaseButton/types.ts b/packages/blade/src/components/Button/BaseButton/types.ts
index 9a6d9cdc2cc..a2ef8c409a6 100644
--- a/packages/blade/src/components/Button/BaseButton/types.ts
+++ b/packages/blade/src/components/Button/BaseButton/types.ts
@@ -10,8 +10,6 @@ export type StyledBaseButtonProps = Omit<
   BaseButtonProps,
   'icon' | 'children' | 'accessibilityLabel'
 > & {
-  activeBorderColor: string;
-  activeBackgroundColor: string;
   defaultBorderColor: string;
   minHeight: `${ButtonMinHeight}px`;
   buttonPaddingTop: SpacingValues;
diff --git a/packages/blade/src/components/Button/Button/Button.stories.tsx b/packages/blade/src/components/Button/Button/Button.stories.tsx
index 79e04ec3722..836f3bd70be 100644
--- a/packages/blade/src/components/Button/Button/Button.stories.tsx
+++ b/packages/blade/src/components/Button/Button/Button.stories.tsx
@@ -25,12 +25,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentDescription="This is the Button component which can be used for various CTAs. It is available in 3 different variants."
       componentName="Button"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=5200%3A0',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=9611%3A78487',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=5200%3A0"
     >
       <Title>Usage</Title>
       <Sandbox showConsole>
@@ -66,7 +61,7 @@ export default {
   component: ButtonComponent,
   args: {
     variant: 'primary',
-    color: 'default',
+    color: 'primary',
     children: 'Pay Now',
     onClick: (): void => {
       console.log('clicked');
@@ -157,77 +152,95 @@ const ButtonWithColorTemplate: StoryFn<typeof ButtonComponent> = ({
   children = 'Button',
   ...args
 }) => {
-  const colors: ButtonProps['color'][] = ['default', 'white', 'positive', 'negative'];
+  const colors: ButtonProps['color'][] = ['primary', 'white', 'positive', 'negative'];
 
   return (
     <>
-      {colors.map((color) => (
-        <BaseBox
-          key={color}
-          display="flex"
-          flexDirection="row"
-          gap="spacing.5"
-          backgroundColor={color === 'white' ? 'brand.gray.700.lowContrast' : 'transparent'}
-          margin="spacing.4"
-          padding="spacing.5"
-        >
+      {colors.map((color) => {
+        const textColor =
+          color === 'white' ? 'surface.text.staticWhite.normal' : 'surface.text.staticBlack.normal';
+        return (
           <BaseBox
-            width="100px"
-            margin="spacing.2"
+            key={color}
             display="flex"
-            justifyContent="center"
-            alignItems="center"
+            flexDirection="row"
+            gap="spacing.5"
+            backgroundColor={color === 'white' ? 'surface.background.cloud.intense' : 'transparent'}
+            margin="spacing.4"
+            padding="spacing.5"
           >
-            <HeadingComponent
-              marginBottom="spacing.3"
-              contrast={color == 'white' ? 'high' : 'low'}
-              size="medium"
+            <BaseBox
+              width="100px"
+              margin="spacing.2"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
             >
-              {color}
-            </HeadingComponent>
-          </BaseBox>
-          <BaseBox margin="spacing.2">
-            <Text
-              marginBottom="spacing.3"
-              contrast={color == 'white' ? 'high' : 'low'}
-              weight="bold"
-            >
-              Primary
-            </Text>
-            <ButtonComponent {...args} color={color} variant="primary">
-              {children}
-            </ButtonComponent>
-          </BaseBox>
+              <HeadingComponent marginBottom="spacing.3" color={textColor} size="medium">
+                {color}
+              </HeadingComponent>
+            </BaseBox>
+            <BaseBox margin="spacing.2">
+              <Text marginBottom="spacing.3" color={textColor}>
+                Primary
+              </Text>
+              <ButtonComponent {...args} color={color} variant="primary">
+                {children}
+              </ButtonComponent>
 
-          <BaseBox margin="spacing.2">
-            <Text
-              marginBottom="spacing.3"
-              contrast={color == 'white' ? 'high' : 'low'}
-              weight="bold"
-            >
-              Secondary
-            </Text>
-            <ButtonComponent {...args} color={color} variant="secondary">
-              {children}
-            </ButtonComponent>
-          </BaseBox>
+              <ButtonComponent
+                marginLeft="spacing.4"
+                {...args}
+                color={color}
+                variant="primary"
+                isDisabled
+              >
+                {children}
+              </ButtonComponent>
+            </BaseBox>
 
-          {(color == 'default' || color == 'white') && (
             <BaseBox margin="spacing.2">
-              <Text
-                marginBottom="spacing.3"
-                contrast={color == 'white' ? 'high' : 'low'}
-                weight="bold"
-              >
-                Tertiary
+              <Text marginBottom="spacing.3" color={textColor}>
+                Secondary
               </Text>
-              <ButtonComponent {...args} color={color} variant="tertiary">
+              <ButtonComponent {...args} color={color} variant="secondary">
+                {children}
+              </ButtonComponent>
+
+              <ButtonComponent
+                marginLeft="spacing.4"
+                {...args}
+                color={color}
+                variant="secondary"
+                isDisabled
+              >
                 {children}
               </ButtonComponent>
             </BaseBox>
-          )}
-        </BaseBox>
-      ))}
+
+            {(color == 'primary' || color == 'white') && (
+              <BaseBox margin="spacing.2">
+                <Text marginBottom="spacing.3" color={textColor}>
+                  Tertiary
+                </Text>
+                <ButtonComponent {...args} color={color} variant="tertiary">
+                  {children}
+                </ButtonComponent>
+
+                <ButtonComponent
+                  marginLeft="spacing.4"
+                  {...args}
+                  color={color}
+                  variant="tertiary"
+                  isDisabled
+                >
+                  {children}
+                </ButtonComponent>
+              </BaseBox>
+            )}
+          </BaseBox>
+        );
+      })}
     </>
   );
 };
diff --git a/packages/blade/src/components/Button/Button/Button.tsx b/packages/blade/src/components/Button/Button/Button.tsx
index 39661850473..cfb05d5db38 100644
--- a/packages/blade/src/components/Button/Button/Button.tsx
+++ b/packages/blade/src/components/Button/Button/Button.tsx
@@ -28,7 +28,7 @@ type ButtonCommonProps = {
    */
   rel?: BaseButtonProps['rel'];
   variant?: 'primary' | 'secondary' | 'tertiary';
-  color?: 'default' | 'white' | 'positive' | 'negative';
+  color?: 'primary' | 'white' | 'positive' | 'negative';
   size?: 'xsmall' | 'small' | 'medium' | 'large';
   iconPosition?: 'left' | 'right';
   isDisabled?: boolean;
@@ -85,7 +85,7 @@ const _Button: React.ForwardRefRenderFunction<BladeElementRef, ButtonProps> = (
     size = 'medium',
     type = 'button',
     variant = 'primary',
-    color = 'default',
+    color = 'primary',
     accessibilityLabel,
     testID,
     onBlur,
diff --git a/packages/blade/src/components/Button/Button/__tests__/Button.native.test.tsx b/packages/blade/src/components/Button/Button/__tests__/Button.native.test.tsx
index 32be1bef659..f543a35208b 100644
--- a/packages/blade/src/components/Button/Button/__tests__/Button.native.test.tsx
+++ b/packages/blade/src/components/Button/Button/__tests__/Button.native.test.tsx
@@ -16,7 +16,7 @@ jest.mock('react-native/Libraries/Linking/Linking', () => ({
 }));
 
 const variants: ButtonProps['variant'][] = ['primary', 'secondary', 'tertiary'];
-const colors: ButtonProps['color'][] = ['default', 'white', 'positive', 'negative'];
+const colors: ButtonProps['color'][] = ['primary', 'white', 'positive', 'negative'];
 
 describe('<Button />', () => {
   it('should render button with default properties', () => {
@@ -89,7 +89,7 @@ describe('<Button />', () => {
   colors.forEach((color) => {
     variants.forEach((variant) => {
       // We support only white and default color for tertiary variant
-      if (variant === 'tertiary' && color !== 'white' && color !== 'default') return;
+      if (variant === 'tertiary' && color !== 'white' && color !== 'primary') return;
 
       it(`should render ${color} color ${variant} button`, () => {
         const buttonText = 'Pay Now';
diff --git a/packages/blade/src/components/Button/Button/__tests__/Button.web.test.tsx b/packages/blade/src/components/Button/Button/__tests__/Button.web.test.tsx
index 642d1e3f931..6b092561746 100644
--- a/packages/blade/src/components/Button/Button/__tests__/Button.web.test.tsx
+++ b/packages/blade/src/components/Button/Button/__tests__/Button.web.test.tsx
@@ -10,7 +10,7 @@ beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
 afterAll(() => jest.restoreAllMocks());
 
 const variants: ButtonProps['variant'][] = ['primary', 'secondary', 'tertiary'];
-const colors: ButtonProps['color'][] = ['default', 'white', 'positive', 'negative'];
+const colors: ButtonProps['color'][] = ['primary', 'white', 'positive', 'negative'];
 
 describe('<Button />', () => {
   it('should render button with default properties', () => {
@@ -85,7 +85,7 @@ describe('<Button />', () => {
   colors.forEach((color) => {
     variants.forEach((variant) => {
       // We support only white and default color for tertiary variant
-      if (variant === 'tertiary' && color !== 'white' && color !== 'default') return;
+      if (variant === 'tertiary' && color !== 'white' && color !== 'primary') return;
 
       it(`should render ${color} color ${variant} button`, () => {
         const buttonText = 'Pay Now';
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
index 864cb9092d9..ae55986957f 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
@@ -28,24 +28,22 @@ exports[`<Button /> should render button with default properties 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -66,15 +64,16 @@ exports[`<Button /> should render button with default properties 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -85,8 +84,8 @@ exports[`<Button /> should render button with default properties 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -109,28 +108,31 @@ exports[`<Button /> should render button with default properties 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -182,24 +184,22 @@ exports[`<Button /> should render button with full width 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={true}
     isLoading={false}
     minHeight="36px"
@@ -220,15 +220,16 @@ exports[`<Button /> should render button with full width 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -239,8 +240,8 @@ exports[`<Button /> should render button with full width 1`] = `
           "width": "100%",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -263,28 +264,31 @@ exports[`<Button /> should render button with full width 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -336,24 +340,22 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -374,15 +376,16 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -393,8 +396,8 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -417,12 +420,14 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <View
         alignItems="center"
@@ -498,19 +503,20 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
       </View>
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -562,24 +568,22 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -600,15 +604,16 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -619,8 +624,8 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -643,28 +648,31 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -760,7 +768,7 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
 </View>
 `;
 
-exports[`<Button /> should render default color primary button 1`] = `
+exports[`<Button /> should render disabled button 1`] = `
 <View
   style={
     {
@@ -774,7 +782,7 @@ exports[`<Button /> should render default color primary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": false,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -788,24 +796,22 @@ exports[`<Button /> should render default color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -826,15 +832,16 @@ exports[`<Button /> should render default color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "pointer",
+          "borderWidth": 0,
+          "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -845,8 +852,8 @@ exports[`<Button /> should render default color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
     }
@@ -869,28 +876,31 @@ exports[`<Button /> should render default color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 0.18)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -914,7 +924,7 @@ exports[`<Button /> should render default color primary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render default color secondary button 1`] = `
+exports[`<Button /> should render disabled negative color primary button 1`] = `
 <View
   style={
     {
@@ -928,7 +938,7 @@ exports[`<Button /> should render default color secondary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": false,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -942,24 +952,22 @@ exports[`<Button /> should render default color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(218, 89%, 51%, 0.32)"
-    activeBorderColor="hsla(218, 89%, 51%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 0)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(218, 89%, 51%, 0.18)"
-    focusBorderColor="hsla(218, 89%, 51%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    defaultBorderColor="hsla(4, 74%, 49%, 0.18)"
+    focusBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    focusBorderColor="hsla(4, 74%, 49%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(218, 89%, 51%, 0.09)"
-    hoverBorderColor="hsla(218, 89%, 51%, 1)"
+    hoverBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    hoverBorderColor="hsla(4, 74%, 49%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -980,15 +988,16 @@ exports[`<Button /> should render default color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 0)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "pointer",
+          "borderWidth": 0,
+          "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -999,8 +1008,8 @@ exports[`<Button /> should render default color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 0)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 0.18)",
         },
       ]
     }
@@ -1023,28 +1032,31 @@ exports[`<Button /> should render default color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.secondary.default"
+        color="interactive.text.negative.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(4, 74%, 49%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1068,7 +1080,7 @@ exports[`<Button /> should render default color secondary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render default color tertiary button 1`] = `
+exports[`<Button /> should render disabled negative color secondary button 1`] = `
 <View
   style={
     {
@@ -1082,7 +1094,7 @@ exports[`<Button /> should render default color tertiary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": false,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -1096,9 +1108,7 @@ exports[`<Button /> should render default color tertiary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 15%, 54%, 0.32)"
-    activeBorderColor="hsla(216, 19%, 89%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -1106,14 +1116,14 @@ exports[`<Button /> should render default color tertiary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    defaultBorderColor="hsla(216, 44%, 23%, 0)"
-    focusBackgroundColor="hsla(216, 15%, 54%, 0.32)"
-    focusBorderColor="hsla(216, 19%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    defaultBorderColor="hsla(4, 74%, 49%, 0.18)"
+    focusBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    focusBorderColor="hsla(4, 74%, 49%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 15%, 54%, 0.18)"
-    hoverBorderColor="hsla(216, 19%, 89%, 1)"
+    hoverBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    hoverBorderColor="hsla(4, 74%, 49%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1134,15 +1144,16 @@ exports[`<Button /> should render default color tertiary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-          "borderColor": "hsla(216, 44%, 23%, 0)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
-          "cursor": "pointer",
+          "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1153,7 +1164,8 @@ exports[`<Button /> should render default color tertiary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 0.18)",
         },
       ]
     }
@@ -1176,28 +1188,31 @@ exports[`<Button /> should render default color tertiary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.tertiary.default"
+        color="interactive.text.negative.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 33%, 29%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(4, 74%, 49%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1221,7 +1236,7 @@ exports[`<Button /> should render default color tertiary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render disabled button 1`] = `
+exports[`<Button /> should render disabled positive color primary button 1`] = `
 <View
   style={
     {
@@ -1249,24 +1264,22 @@ exports[`<Button /> should render disabled button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 19%, 89%, 1)"
-    activeBorderColor="hsla(216, 19%, 89%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 19%, 89%, 1)"
-    defaultBorderColor="hsla(216, 19%, 89%, 1)"
-    focusBackgroundColor="hsla(216, 19%, 89%, 1)"
-    focusBorderColor="hsla(216, 19%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    defaultBorderColor="hsla(150, 100%, 32%, 0.18)"
+    focusBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    focusBorderColor="hsla(150, 100%, 32%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 19%, 89%, 1)"
-    hoverBorderColor="hsla(216, 19%, 89%, 1)"
+    hoverBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    hoverBorderColor="hsla(150, 100%, 32%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1287,15 +1300,16 @@ exports[`<Button /> should render disabled button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1306,8 +1320,8 @@ exports[`<Button /> should render disabled button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 0.18)",
         },
       ]
     }
@@ -1330,28 +1344,31 @@ exports[`<Button /> should render disabled button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.disabled"
+        color="interactive.text.positive.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(150, 100%, 32%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1375,7 +1392,7 @@ exports[`<Button /> should render disabled button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render disabled default color primary button 1`] = `
+exports[`<Button /> should render disabled positive color secondary button 1`] = `
 <View
   style={
     {
@@ -1403,9 +1420,7 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 19%, 89%, 1)"
-    activeBorderColor="hsla(216, 19%, 89%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -1413,14 +1428,14 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 19%, 89%, 1)"
-    defaultBorderColor="hsla(216, 19%, 89%, 1)"
-    focusBackgroundColor="hsla(216, 19%, 89%, 1)"
-    focusBorderColor="hsla(216, 19%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    defaultBorderColor="hsla(150, 100%, 32%, 0.18)"
+    focusBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    focusBorderColor="hsla(150, 100%, 32%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 19%, 89%, 1)"
-    hoverBorderColor="hsla(216, 19%, 89%, 1)"
+    hoverBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    hoverBorderColor="hsla(150, 100%, 32%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1441,15 +1456,16 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1460,8 +1476,8 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 19%, 89%, 1)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 0.18)",
         },
       ]
     }
@@ -1484,28 +1500,31 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.disabled"
+        color="interactive.text.positive.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(150, 100%, 32%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1529,7 +1548,7 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render disabled default color secondary button 1`] = `
+exports[`<Button /> should render disabled primary color primary button 1`] = `
 <View
   style={
     {
@@ -1557,24 +1576,22 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 44%, 23%, 0)"
-    activeBorderColor="hsla(218, 19%, 81%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 44%, 23%, 0)"
-    defaultBorderColor="hsla(218, 19%, 81%, 1)"
-    focusBackgroundColor="hsla(216, 44%, 23%, 0)"
-    focusBorderColor="hsla(218, 19%, 81%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 44%, 23%, 0)"
-    hoverBorderColor="hsla(218, 19%, 81%, 1)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1595,15 +1612,16 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 44%, 23%, 0)",
-          "borderColor": "hsla(218, 19%, 81%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1614,8 +1632,8 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 44%, 23%, 0)",
-          "borderColor": "hsla(218, 19%, 81%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
     }
@@ -1638,28 +1656,31 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.secondary.disabled"
+        color="interactive.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 19%, 81%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 0.18)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1683,7 +1704,7 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
 </View>
 `;
 
-exports[`<Button /> should render disabled default color tertiary button 1`] = `
+exports[`<Button /> should render disabled primary color secondary button 1`] = `
 <View
   style={
     {
@@ -1711,9 +1732,7 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    activeBorderColor="hsla(216, 19%, 89%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -1721,14 +1740,14 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    defaultBorderColor="hsla(216, 19%, 89%, 1)"
-    focusBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    focusBorderColor="hsla(216, 19%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+    defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0)"
+    focusBorderColor="hsla(227, 100%, 59%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 15%, 54%, 0.09)"
-    hoverBorderColor="hsla(216, 19%, 89%, 1)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0)"
+    hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1749,15 +1768,16 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-          "borderColor": "hsla(216, 19%, 89%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1768,7 +1788,8 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(227, 100%, 59%, 0.18)",
         },
       ]
     }
@@ -1791,28 +1812,31 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.tertiary.disabled"
+        color="interactive.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 19%, 81%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 0.18)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1836,7 +1860,7 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render disabled negative color primary button 1`] = `
+exports[`<Button /> should render disabled primary color tertiary button 1`] = `
 <View
   style={
     {
@@ -1864,24 +1888,22 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(8, 73%, 47%, 1)"
-    activeBorderColor="hsla(8, 99%, 65%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(8, 73%, 47%, 1)"
-    defaultBorderColor="hsla(8, 99%, 65%, 1)"
-    focusBackgroundColor="hsla(8, 73%, 47%, 1)"
-    focusBorderColor="hsla(8, 99%, 65%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    defaultBorderColor="hsla(214, 40%, 92%, 1)"
+    focusBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    focusBorderColor="hsla(214, 40%, 92%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(8, 73%, 47%, 1)"
-    hoverBorderColor="hsla(8, 99%, 65%, 1)"
+    hoverBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    hoverBorderColor="hsla(214, 40%, 92%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1902,15 +1924,16 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(8, 73%, 47%, 1)",
-          "borderColor": "hsla(8, 99%, 65%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+          "borderColor": "hsla(214, 40%, 92%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1921,8 +1944,7 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(8, 73%, 47%, 1)",
-          "borderColor": "hsla(8, 99%, 65%, 1)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
         },
       ]
     }
@@ -1945,28 +1967,31 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.primary.disabled.highContrast"
+        color="interactive.text.gray.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(8, 99%, 65%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(211, 20%, 52%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1990,7 +2015,7 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render disabled negative color secondary button 1`] = `
+exports[`<Button /> should render disabled white color primary button 1`] = `
 <View
   style={
     {
@@ -2018,24 +2043,22 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    activeBorderColor="hsla(9, 91%, 56%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    defaultBorderColor="hsla(9, 91%, 56%, 0.32)"
-    focusBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    focusBorderColor="hsla(9, 91%, 56%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    hoverBorderColor="hsla(9, 91%, 56%, 0.32)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.32)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2056,15 +2079,16 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-          "borderColor": "hsla(9, 91%, 56%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderColor": "hsla(0, 0%, 100%, 0.32)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2075,8 +2099,8 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-          "borderColor": "hsla(9, 91%, 56%, 0.32)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderColor": "hsla(0, 0%, 100%, 0.32)",
         },
       ]
     }
@@ -2099,28 +2123,31 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.primary.disabled.lowContrast"
+        color="interactive.text.staticBlack.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(9, 91%, 56%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 0%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2144,7 +2171,7 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
 </View>
 `;
 
-exports[`<Button /> should render disabled positive color primary button 1`] = `
+exports[`<Button /> should render disabled white color secondary button 1`] = `
 <View
   style={
     {
@@ -2172,9 +2199,7 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(160, 100%, 26%, 1)"
-    activeBorderColor="hsla(149, 99%, 35%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -2182,14 +2207,14 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(160, 100%, 26%, 1)"
-    defaultBorderColor="hsla(149, 99%, 35%, 1)"
-    focusBackgroundColor="hsla(160, 100%, 26%, 1)"
-    focusBorderColor="hsla(149, 99%, 35%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(160, 100%, 26%, 1)"
-    hoverBorderColor="hsla(149, 99%, 35%, 1)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.32)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2210,15 +2235,16 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(160, 100%, 26%, 1)",
-          "borderColor": "hsla(149, 99%, 35%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(0, 0%, 100%, 0.32)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2229,8 +2255,8 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(160, 100%, 26%, 1)",
-          "borderColor": "hsla(149, 99%, 35%, 1)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(0, 0%, 100%, 0.32)",
         },
       ]
     }
@@ -2253,28 +2279,31 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.primary.disabled.highContrast"
+        color="interactive.text.staticWhite.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(149, 99%, 35%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2298,7 +2327,7 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render disabled positive color secondary button 1`] = `
+exports[`<Button /> should render disabled white color tertiary button 1`] = `
 <View
   style={
     {
@@ -2326,24 +2355,22 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    activeBorderColor="hsla(155, 100%, 31%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    defaultBorderColor="hsla(155, 100%, 31%, 0.32)"
-    focusBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    focusBorderColor="hsla(155, 100%, 31%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.18)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.18)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    hoverBorderColor="hsla(155, 100%, 31%, 0.32)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.18)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2364,15 +2391,16 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-          "borderColor": "hsla(155, 100%, 31%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "not-allowed",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2383,8 +2411,7 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-          "borderColor": "hsla(155, 100%, 31%, 0.32)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
         },
       ]
     }
@@ -2407,28 +2434,31 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.primary.disabled.lowContrast"
+        color="interactive.text.staticWhite.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(155, 100%, 31%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 0.32)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2452,7 +2482,7 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
 </View>
 `;
 
-exports[`<Button /> should render disabled white color primary button 1`] = `
+exports[`<Button /> should render large size button 1`] = `
 <View
   style={
     {
@@ -2466,7 +2496,7 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": true,
+        "disabled": false,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -2480,27 +2510,25 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    activeBorderColor="hsla(210, 6%, 94%, 0.18)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    defaultBorderColor="hsla(210, 6%, 94%, 0.18)"
-    focusBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    focusBorderColor="hsla(210, 6%, 94%, 0.18)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    hoverBorderColor="hsla(210, 6%, 94%, 0.18)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
-    minHeight="36px"
+    minHeight="48px"
     motionDuration="duration.xquick"
     motionEasing="easing.standard.effective"
     onBlur={[Function]}
@@ -2518,15 +2546,16 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(210, 6%, 94%, 0.18)",
-          "borderColor": "hsla(210, 6%, 94%, 0.18)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "not-allowed",
+          "borderWidth": 0,
+          "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
-          "minHeight": 36,
+          "minHeight": 48,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2537,8 +2566,8 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(210, 6%, 94%, 0.18)",
-          "borderColor": "hsla(210, 6%, 94%, 0.18)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -2561,29 +2590,32 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.primary.disabled"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
-        fontSize={100}
-        fontWeight="bold"
-        lineHeight={100}
+        fontSize={200}
+        fontWeight="medium"
+        lineHeight={200}
         style={
           [
             {
-              "color": "hsla(210, 6%, 94%, 0.32)",
-              "fontFamily": "Lato",
-              "fontSize": 14,
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 20,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 24,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
@@ -2606,7 +2638,7 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render disabled white color secondary button 1`] = `
+exports[`<Button /> should render medium size button 1`] = `
 <View
   style={
     {
@@ -2620,7 +2652,7 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": true,
+        "disabled": false,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -2634,24 +2666,22 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(214, 15%, 18%, 0)"
-    activeBorderColor="hsla(210, 6%, 94%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(214, 15%, 18%, 0)"
-    defaultBorderColor="hsla(210, 6%, 94%, 0.32)"
-    focusBackgroundColor="hsla(214, 15%, 18%, 0)"
-    focusBorderColor="hsla(210, 6%, 94%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(214, 15%, 18%, 0)"
-    hoverBorderColor="hsla(210, 6%, 94%, 0.32)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2672,15 +2702,16 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(214, 15%, 18%, 0)",
-          "borderColor": "hsla(210, 6%, 94%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "not-allowed",
+          "borderWidth": 0,
+          "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2691,8 +2722,8 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(214, 15%, 18%, 0)",
-          "borderColor": "hsla(210, 6%, 94%, 0.32)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -2715,28 +2746,31 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.secondary.disabled"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(210, 6%, 94%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2760,7 +2794,7 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render disabled white color tertiary button 1`] = `
+exports[`<Button /> should render negative color primary button 1`] = `
 <View
   style={
     {
@@ -2774,7 +2808,7 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": true,
+        "disabled": false,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -2788,24 +2822,22 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    activeBorderColor="hsla(214, 15%, 18%, 0)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    defaultBorderColor="hsla(214, 15%, 18%, 0)"
-    focusBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    focusBorderColor="hsla(214, 15%, 18%, 0)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(4, 74%, 49%, 1)"
+    defaultBorderColor="hsla(4, 74%, 49%, 1)"
+    focusBackgroundColor="hsla(4, 77%, 40%, 1)"
+    focusBorderColor="hsla(4, 77%, 40%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    hoverBorderColor="hsla(214, 15%, 18%, 0)"
+    hoverBackgroundColor="hsla(4, 77%, 40%, 1)"
+    hoverBorderColor="hsla(4, 77%, 40%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -2826,15 +2858,16 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(210, 6%, 94%, 0.09)",
-          "borderColor": "hsla(214, 15%, 18%, 0)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(4, 74%, 49%, 1)",
+          "borderColor": "hsla(4, 74%, 49%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
-          "cursor": "not-allowed",
+          "borderWidth": 0,
+          "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2845,7 +2878,8 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(210, 6%, 94%, 0.09)",
+          "backgroundColor": "hsla(4, 74%, 49%, 1)",
+          "borderColor": "hsla(4, 74%, 49%, 1)",
         },
       ]
     }
@@ -2868,28 +2902,31 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.tertiary.disabled"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(210, 6%, 94%, 0.32)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2913,7 +2950,7 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render large size button 1`] = `
+exports[`<Button /> should render negative color secondary button 1`] = `
 <View
   style={
     {
@@ -2941,9 +2978,7 @@ exports[`<Button /> should render large size button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -2951,17 +2986,17 @@ exports[`<Button /> should render large size button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(4, 74%, 49%, 0.09)"
+    defaultBorderColor="hsla(4, 74%, 49%, 1)"
+    focusBackgroundColor="hsla(4, 74%, 49%, 0.18)"
+    focusBorderColor="hsla(4, 74%, 49%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(4, 74%, 49%, 0.18)"
+    hoverBorderColor="hsla(4, 74%, 49%, 1)"
     isFullWidth={false}
     isLoading={false}
-    minHeight="48px"
+    minHeight="36px"
     motionDuration="duration.xquick"
     motionEasing="easing.standard.effective"
     onBlur={[Function]}
@@ -2979,15 +3014,16 @@ exports[`<Button /> should render large size button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
-          "minHeight": 48,
+          "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -2998,8 +3034,8 @@ exports[`<Button /> should render large size button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+          "borderColor": "hsla(4, 74%, 49%, 1)",
         },
       ]
     }
@@ -3022,29 +3058,32 @@ exports[`<Button /> should render large size button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.negative.normal"
         data-blade-component="base-text"
-        fontSize={200}
-        fontWeight="bold"
-        lineHeight={300}
+        fontSize={100}
+        fontWeight="medium"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 16,
+              "color": "hsla(4, 74%, 49%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 24,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
@@ -3067,7 +3106,7 @@ exports[`<Button /> should render large size button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render medium size button 1`] = `
+exports[`<Button /> should render positive color primary button 1`] = `
 <View
   style={
     {
@@ -3095,24 +3134,22 @@ exports[`<Button /> should render medium size button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(150, 100%, 32%, 1)"
+    defaultBorderColor="hsla(150, 100%, 32%, 1)"
+    focusBackgroundColor="hsla(150, 100%, 27%, 1)"
+    focusBorderColor="hsla(150, 100%, 27%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(150, 100%, 27%, 1)"
+    hoverBorderColor="hsla(150, 100%, 27%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3133,15 +3170,16 @@ exports[`<Button /> should render medium size button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(150, 100%, 32%, 1)",
+          "borderColor": "hsla(150, 100%, 32%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3152,8 +3190,8 @@ exports[`<Button /> should render medium size button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(150, 100%, 32%, 1)",
+          "borderColor": "hsla(150, 100%, 32%, 1)",
         },
       ]
     }
@@ -3176,28 +3214,31 @@ exports[`<Button /> should render medium size button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3221,7 +3262,7 @@ exports[`<Button /> should render medium size button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render negative color primary button 1`] = `
+exports[`<Button /> should render positive color secondary button 1`] = `
 <View
   style={
     {
@@ -3249,9 +3290,7 @@ exports[`<Button /> should render negative color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(5, 69%, 32%, 1)"
-    activeBorderColor="hsla(0, 100%, 97%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -3259,14 +3298,14 @@ exports[`<Button /> should render negative color primary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(8, 73%, 47%, 1)"
-    defaultBorderColor="hsla(0, 100%, 97%, 1)"
-    focusBackgroundColor="hsla(5, 69%, 32%, 1)"
-    focusBorderColor="hsla(0, 100%, 97%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(150, 100%, 32%, 0.09)"
+    defaultBorderColor="hsla(150, 100%, 32%, 1)"
+    focusBackgroundColor="hsla(150, 100%, 32%, 0.18)"
+    focusBorderColor="hsla(150, 100%, 32%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(7, 72%, 40%, 1)"
-    hoverBorderColor="hsla(0, 100%, 97%, 1)"
+    hoverBackgroundColor="hsla(150, 100%, 32%, 0.18)"
+    hoverBorderColor="hsla(150, 100%, 32%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3287,15 +3326,16 @@ exports[`<Button /> should render negative color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(8, 73%, 47%, 1)",
-          "borderColor": "hsla(0, 100%, 97%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3306,8 +3346,8 @@ exports[`<Button /> should render negative color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(8, 73%, 47%, 1)",
-          "borderColor": "hsla(0, 100%, 97%, 1)",
+          "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+          "borderColor": "hsla(150, 100%, 32%, 1)",
         },
       ]
     }
@@ -3330,28 +3370,31 @@ exports[`<Button /> should render negative color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.primary.default.highContrast"
+        color="interactive.text.positive.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(0, 100%, 97%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(150, 100%, 27%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3375,7 +3418,7 @@ exports[`<Button /> should render negative color primary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render negative color secondary button 1`] = `
+exports[`<Button /> should render primary color primary button 1`] = `
 <View
   style={
     {
@@ -3403,24 +3446,22 @@ exports[`<Button /> should render negative color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(9, 91%, 56%, 0.32)"
-    activeBorderColor="hsla(9, 91%, 56%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(9, 91%, 56%, 0.09)"
-    defaultBorderColor="hsla(9, 91%, 56%, 0.32)"
-    focusBackgroundColor="hsla(9, 91%, 56%, 0.32)"
-    focusBorderColor="hsla(9, 91%, 56%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(9, 91%, 56%, 0.18)"
-    hoverBorderColor="hsla(9, 91%, 56%, 0.32)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3441,15 +3482,16 @@ exports[`<Button /> should render negative color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-          "borderColor": "hsla(9, 91%, 56%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3460,8 +3502,8 @@ exports[`<Button /> should render negative color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-          "borderColor": "hsla(9, 91%, 56%, 0.32)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -3484,28 +3526,31 @@ exports[`<Button /> should render negative color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.primary.default.lowContrast"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(8, 73%, 47%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 100%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3529,7 +3574,7 @@ exports[`<Button /> should render negative color secondary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render positive color primary button 1`] = `
+exports[`<Button /> should render primary color secondary button 1`] = `
 <View
   style={
     {
@@ -3557,9 +3602,7 @@ exports[`<Button /> should render positive color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(164, 100%, 17%, 1)"
-    activeBorderColor="hsla(107, 100%, 96%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -3567,14 +3610,14 @@ exports[`<Button /> should render positive color primary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(160, 100%, 26%, 1)"
-    defaultBorderColor="hsla(107, 100%, 96%, 1)"
-    focusBackgroundColor="hsla(164, 100%, 17%, 1)"
-    focusBorderColor="hsla(107, 100%, 96%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(163, 100%, 22%, 1)"
-    hoverBorderColor="hsla(107, 100%, 96%, 1)"
+    hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3595,15 +3638,16 @@ exports[`<Button /> should render positive color primary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(160, 100%, 26%, 1)",
-          "borderColor": "hsla(107, 100%, 96%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3614,8 +3658,8 @@ exports[`<Button /> should render positive color primary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(160, 100%, 26%, 1)",
-          "borderColor": "hsla(107, 100%, 96%, 1)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -3638,28 +3682,31 @@ exports[`<Button /> should render positive color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.primary.default.highContrast"
+        color="interactive.text.primary.subtle"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(107, 100%, 96%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3683,7 +3730,7 @@ exports[`<Button /> should render positive color primary button 1`] = `
 </View>
 `;
 
-exports[`<Button /> should render positive color secondary button 1`] = `
+exports[`<Button /> should render primary color tertiary button 1`] = `
 <View
   style={
     {
@@ -3711,24 +3758,22 @@ exports[`<Button /> should render positive color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(155, 100%, 31%, 0.32)"
-    activeBorderColor="hsla(155, 100%, 31%, 0.32)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(155, 100%, 31%, 0.09)"
-    defaultBorderColor="hsla(155, 100%, 31%, 0.32)"
-    focusBackgroundColor="hsla(155, 100%, 31%, 0.32)"
-    focusBorderColor="hsla(155, 100%, 31%, 0.32)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(211, 20%, 52%, 0.09)"
+    defaultBorderColor="hsla(211, 27%, 76%, 1)"
+    focusBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    focusBorderColor="hsla(211, 27%, 76%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(155, 100%, 31%, 0.18)"
-    hoverBorderColor="hsla(155, 100%, 31%, 0.32)"
+    hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)"
+    hoverBorderColor="hsla(211, 27%, 76%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3749,15 +3794,16 @@ exports[`<Button /> should render positive color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-          "borderColor": "hsla(155, 100%, 31%, 0.32)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+          "borderColor": "hsla(211, 27%, 76%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3768,8 +3814,7 @@ exports[`<Button /> should render positive color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
-          "borderColor": "hsla(155, 100%, 31%, 0.32)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
         },
       ]
     }
@@ -3792,28 +3837,31 @@ exports[`<Button /> should render positive color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.primary.default.lowContrast"
+        color="interactive.text.gray.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(160, 100%, 26%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3865,24 +3913,22 @@ exports[`<Button /> should render small size button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="12px"
     buttonPaddingRight="12px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="32px"
@@ -3903,15 +3949,16 @@ exports[`<Button /> should render small size button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 32,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 12,
           "paddingRight": 12,
@@ -3922,8 +3969,8 @@ exports[`<Button /> should render small size button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -3946,29 +3993,32 @@ exports[`<Button /> should render small size button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
-        lineHeight={50}
+        fontSize={50}
+        fontWeight="medium"
+        lineHeight={75}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "fontFamily": "Inter",
+              "fontSize": 11,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 16,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 18,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
@@ -4019,10 +4069,8 @@ exports[`<Button /> should render white color primary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(216, 4%, 89%, 1)"
-    activeBorderColor="hsla(216, 4%, 89%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
@@ -4031,12 +4079,12 @@ exports[`<Button /> should render white color primary button 1`] = `
     data-blade-component="button"
     defaultBackgroundColor="hsla(0, 0%, 100%, 1)"
     defaultBorderColor="hsla(0, 0%, 100%, 1)"
-    focusBackgroundColor="hsla(216, 4%, 89%, 1)"
-    focusBorderColor="hsla(216, 4%, 89%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.8)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.8)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(216, 6%, 94%, 1)"
-    hoverBorderColor="hsla(216, 6%, 94%, 1)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.8)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.8)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -4059,13 +4107,14 @@ exports[`<Button /> should render white color primary button 1`] = `
           "alignSelf": "center",
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
           "borderColor": "hsla(0, 0%, 100%, 1)",
-          "borderRadius": 2,
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -4100,28 +4149,31 @@ exports[`<Button /> should render white color primary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.primary.default"
+        color="interactive.text.staticBlack.muted"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(0, 0%, 0%, 0.72)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -4173,9 +4225,7 @@ exports[`<Button /> should render white color secondary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(210, 6%, 94%, 0.32)"
-    activeBorderColor="hsla(0, 0%, 100%, 1)"
-    borderRadius="2px"
+    borderRadius="4px"
     borderWidth="1px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
@@ -4183,14 +4233,14 @@ exports[`<Button /> should render white color secondary button 1`] = `
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(214, 15%, 18%, 0)"
-    defaultBorderColor="hsla(0, 0%, 100%, 1)"
-    focusBackgroundColor="hsla(210, 6%, 94%, 0.32)"
-    focusBorderColor="hsla(0, 0%, 100%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.8)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.8)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    hoverBorderColor="hsla(0, 0%, 100%, 1)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.8)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -4211,15 +4261,16 @@ exports[`<Button /> should render white color secondary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(214, 15%, 18%, 0)",
-          "borderColor": "hsla(0, 0%, 100%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(0, 0%, 100%, 0.8)",
+          "borderRadius": 4,
           "borderStyle": "solid",
           "borderWidth": 1,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -4230,8 +4281,8 @@ exports[`<Button /> should render white color secondary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(214, 15%, 18%, 0)",
-          "borderColor": "hsla(0, 0%, 100%, 1)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0)",
+          "borderColor": "hsla(0, 0%, 100%, 0.8)",
         },
       ]
     }
@@ -4254,28 +4305,31 @@ exports[`<Button /> should render white color secondary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.secondary.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -4327,24 +4381,22 @@ exports[`<Button /> should render white color tertiary button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(210, 6%, 94%, 0.32)"
-    activeBorderColor="hsla(214, 15%, 18%, 0)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(210, 6%, 94%, 0.09)"
-    defaultBorderColor="hsla(214, 15%, 18%, 0)"
-    focusBackgroundColor="hsla(210, 6%, 94%, 0.32)"
-    focusBorderColor="hsla(214, 15%, 18%, 0)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)"
+    defaultBorderColor="hsla(0, 0%, 100%, 0.18)"
+    focusBackgroundColor="hsla(0, 0%, 100%, 0.32)"
+    focusBorderColor="hsla(0, 0%, 100%, 0.32)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(210, 6%, 94%, 0.18)"
-    hoverBorderColor="hsla(214, 15%, 18%, 0)"
+    hoverBackgroundColor="hsla(0, 0%, 100%, 0.32)"
+    hoverBorderColor="hsla(0, 0%, 100%, 0.32)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -4365,15 +4417,16 @@ exports[`<Button /> should render white color tertiary button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(210, 6%, 94%, 0.09)",
-          "borderColor": "hsla(214, 15%, 18%, 0)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderColor": "hsla(0, 0%, 100%, 0.18)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -4384,7 +4437,7 @@ exports[`<Button /> should render white color tertiary button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(210, 6%, 94%, 0.09)",
+          "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
         },
       ]
     }
@@ -4407,28 +4460,31 @@ exports[`<Button /> should render white color tertiary button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="white.action.text.tertiary.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -4480,24 +4536,22 @@ exports[`<Button /> should render xsmall size button 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="8px"
     buttonPaddingRight="8px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="28px"
@@ -4518,15 +4572,16 @@ exports[`<Button /> should render xsmall size button 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 28,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 8,
           "paddingRight": 8,
@@ -4537,8 +4592,8 @@ exports[`<Button /> should render xsmall size button 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -4561,29 +4616,32 @@ exports[`<Button /> should render xsmall size button 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
-        lineHeight={50}
+        fontSize={50}
+        fontWeight="medium"
+        lineHeight={75}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 12,
+              "fontFamily": "Inter",
+              "fontSize": 11,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 16,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 18,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap
index 1bb53ebbe9f..bcb029940bc 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Button /> should render button as anchor tag 1`] = `"<div id="root"><a href="https://youtu.be/iPaBUhIsslA" target="_blank" rel="noreferrer noopener" type="button" data-blade-component="button" role="link" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 juLFkx"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div data-blade-component="base-box" class="BaseBox-bmPWx vtnBD"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO hcXerP" data-blade-component="base-text">Pay Now</div></div></a></div>"`;
+exports[`<Button /> should render button as anchor tag 1`] = `"<div id="root"><a href="https://youtu.be/iPaBUhIsslA" target="_blank" rel="noreferrer noopener" type="button" data-blade-component="button" role="link" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctKBsz"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div data-blade-component="base-box" class="BaseBox-bmPWx vtnBD"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO bewYNq" data-blade-component="base-text">Pay Now</div></div></a></div>"`;
 
 exports[`<Button /> should render button as anchor tag 2`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -26,6 +26,7 @@ exports[`<Button /> should render button as anchor tag 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -40,25 +41,25 @@ exports[`<Button /> should render button as anchor tag 2`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -67,13 +68,17 @@ exports[`<Button /> should render button as anchor tag 2`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -98,6 +103,7 @@ exports[`<Button /> should render button as anchor tag 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c3.c3.c3.c3.c3 {
@@ -169,17 +175,17 @@ exports[`<Button /> should render button as anchor tag 2`] = `
 </div>
 `;
 
-exports[`<Button /> should render button with icon with default iconPosition 1`] = `"<div id="root"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 juLFkx"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div data-blade-component="base-box" class="BaseBox-bmPWx vtnBD"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO hcXerP" data-blade-component="base-text">Pay Now</div></div></button></div>"`;
+exports[`<Button /> should render button with icon with default iconPosition 1`] = `"<div id="root"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctKBsz"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div data-blade-component="base-box" class="BaseBox-bmPWx vtnBD"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO bewYNq" data-blade-component="base-text">Pay Now</div></div></button></div>"`;
 
 exports[`<Button /> should render button with icon with default iconPosition 2`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -195,6 +201,7 @@ exports[`<Button /> should render button with icon with default iconPosition 2`]
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -209,25 +216,25 @@ exports[`<Button /> should render button with icon with default iconPosition 2`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -236,13 +243,17 @@ exports[`<Button /> should render button with icon with default iconPosition 2`]
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -267,6 +278,7 @@ exports[`<Button /> should render button with icon with default iconPosition 2`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c3.c3.c3.c3.c3 {
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
index 671ccea5a4c..fbb6d795414 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
@@ -5,10 +5,10 @@ exports[`<Button /> should render button with default properties 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -24,6 +24,7 @@ exports[`<Button /> should render button with default properties 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -38,25 +39,25 @@ exports[`<Button /> should render button with default properties 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -65,13 +66,17 @@ exports[`<Button /> should render button with default properties 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -96,6 +101,7 @@ exports[`<Button /> should render button with default properties 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -129,10 +135,10 @@ exports[`<Button /> should render button with full width 1`] = `
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -148,6 +154,7 @@ exports[`<Button /> should render button with full width 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -162,25 +169,25 @@ exports[`<Button /> should render button with full width 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -189,13 +196,17 @@ exports[`<Button /> should render button with full width 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -220,6 +231,7 @@ exports[`<Button /> should render button with full width 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -253,10 +265,10 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -272,6 +284,7 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -286,25 +299,25 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -313,13 +326,17 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -344,6 +361,7 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c3.c3.c3.c3.c3 {
@@ -415,10 +433,10 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -434,6 +452,7 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -448,25 +467,25 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -475,13 +494,17 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -506,6 +529,7 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c4.c4.c4.c4.c4 {
@@ -572,15 +596,15 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
 </div>
 `;
 
-exports[`<Button /> should render default color primary button 1`] = `
+exports[`<Button /> should render disabled button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  cursor: not-allowed;
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -596,6 +620,7 @@ exports[`<Button /> should render default color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -610,25 +635,25 @@ exports[`<Button /> should render default color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -636,14 +661,18 @@ exports[`<Button /> should render default color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -668,6 +697,7 @@ exports[`<Button /> should render default color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -678,6 +708,7 @@ exports[`<Button /> should render default color primary button 1`] = `
   <button
     class="c0"
     data-blade-component="button"
+    disabled=""
     role="button"
     type="button"
   >
@@ -696,15 +727,15 @@ exports[`<Button /> should render default color primary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render default color secondary button 1`] = `
+exports[`<Button /> should render disabled negative color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: pointer;
-  background-color: hsla(218,89%,51%,0);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  cursor: not-allowed;
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -720,6 +751,7 @@ exports[`<Button /> should render default color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -734,25 +766,25 @@ exports[`<Button /> should render default color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(218,89%,51%,0.32);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(218,89%,51%,0.18);
-  border-color: hsla(218,89%,51%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -760,14 +792,18 @@ exports[`<Button /> should render default color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -792,6 +828,7 @@ exports[`<Button /> should render default color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -802,6 +839,7 @@ exports[`<Button /> should render default color secondary button 1`] = `
   <button
     class="c0"
     data-blade-component="button"
+    disabled=""
     role="button"
     type="button"
   >
@@ -820,15 +858,15 @@ exports[`<Button /> should render default color secondary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render default color tertiary button 1`] = `
+exports[`<Button /> should render disabled negative color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: pointer;
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,44%,23%,0);
+  cursor: not-allowed;
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -844,6 +882,7 @@ exports[`<Button /> should render default color tertiary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -858,22 +897,25 @@ exports[`<Button /> should render default color tertiary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,15%,54%,0.32);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,15%,54%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -881,14 +923,18 @@ exports[`<Button /> should render default color tertiary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,33%,29%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -913,6 +959,7 @@ exports[`<Button /> should render default color tertiary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -923,6 +970,7 @@ exports[`<Button /> should render default color tertiary button 1`] = `
   <button
     class="c0"
     data-blade-component="button"
+    disabled=""
     role="button"
     type="button"
   >
@@ -941,15 +989,15 @@ exports[`<Button /> should render default color tertiary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render disabled button 1`] = `
+exports[`<Button /> should render disabled positive color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -965,6 +1013,7 @@ exports[`<Button /> should render disabled button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -979,25 +1028,25 @@ exports[`<Button /> should render disabled button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1005,14 +1054,18 @@ exports[`<Button /> should render disabled button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,32%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1037,6 +1090,7 @@ exports[`<Button /> should render disabled button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1066,15 +1120,15 @@ exports[`<Button /> should render disabled button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render disabled default color primary button 1`] = `
+exports[`<Button /> should render disabled positive color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1090,6 +1144,7 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1104,25 +1159,25 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,19%,89%,1);
-  border-color: hsla(216,19%,89%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1130,14 +1185,18 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,32%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1162,6 +1221,7 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1191,15 +1251,15 @@ exports[`<Button /> should render disabled default color primary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render disabled default color secondary button 1`] = `
+exports[`<Button /> should render disabled primary color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,44%,23%,0);
-  border-color: hsla(218,19%,81%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1215,6 +1275,7 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1229,25 +1290,25 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,44%,23%,0);
-  border-color: hsla(218,19%,81%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,44%,23%,0);
-  border-color: hsla(218,19%,81%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,44%,23%,0);
-  border-color: hsla(218,19%,81%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1255,14 +1316,18 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,19%,81%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1287,6 +1352,7 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1316,15 +1382,15 @@ exports[`<Button /> should render disabled default color secondary button 1`] =
 </div>
 `;
 
-exports[`<Button /> should render disabled default color tertiary button 1`] = `
+exports[`<Button /> should render disabled primary color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,19%,89%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,0.18);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1340,6 +1406,7 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1354,22 +1421,25 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,15%,54%,0.09);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1377,14 +1447,18 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,19%,81%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1409,6 +1483,7 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1438,15 +1513,15 @@ exports[`<Button /> should render disabled default color tertiary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render disabled negative color primary button 1`] = `
+exports[`<Button /> should render disabled primary color tertiary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(8,99%,65%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(211,20%,52%,0.09);
+  border-color: hsla(214,40%,92%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1462,6 +1537,7 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1476,25 +1552,22 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(8,99%,65%,1);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(8,99%,65%,1);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(8,99%,65%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1502,14 +1575,18 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(8,99%,65%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1534,6 +1611,7 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1563,15 +1641,15 @@ exports[`<Button /> should render disabled negative color primary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render disabled negative color secondary button 1`] = `
+exports[`<Button /> should render disabled white color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.32);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1587,6 +1665,7 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1601,25 +1680,25 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.32);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1627,14 +1706,18 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(9,91%,56%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,0%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1659,6 +1742,7 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1688,15 +1772,15 @@ exports[`<Button /> should render disabled negative color secondary button 1`] =
 </div>
 `;
 
-exports[`<Button /> should render disabled positive color primary button 1`] = `
+exports[`<Button /> should render disabled white color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(149,99%,35%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.32);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1712,6 +1796,7 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1726,25 +1811,25 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(149,99%,35%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(149,99%,35%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(149,99%,35%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.32);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1752,14 +1837,18 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(149,99%,35%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1784,6 +1873,7 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1813,15 +1903,15 @@ exports[`<Button /> should render disabled positive color primary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render disabled positive color secondary button 1`] = `
+exports[`<Button /> should render disabled white color tertiary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: not-allowed;
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1837,6 +1927,7 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1851,25 +1942,22 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(0,0%,100%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(0,0%,100%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1877,14 +1965,18 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(155,100%,31%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1909,6 +2001,7 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -1938,15 +2031,15 @@ exports[`<Button /> should render disabled positive color secondary button 1`] =
 </div>
 `;
 
-exports[`<Button /> should render disabled white color primary button 1`] = `
+exports[`<Button /> should render large size button 1`] = `
 .c0.c0.c0.c0.c0 {
-  min-height: 36px;
+  min-height: 48px;
   width: auto;
-  cursor: not-allowed;
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(210,6%,94%,0.18);
-  border-width: 1px;
-  border-radius: 2px;
+  cursor: pointer;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1962,6 +2055,7 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1976,25 +2070,25 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(210,6%,94%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(210,6%,94%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(210,6%,94%,0.18);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2002,14 +2096,18 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(210,6%,94%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 700;
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.25rem;
+  line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2034,6 +2132,7 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2044,7 +2143,6 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
   <button
     class="c0"
     data-blade-component="button"
-    disabled=""
     role="button"
     type="button"
   >
@@ -2063,15 +2161,15 @@ exports[`<Button /> should render disabled white color primary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render disabled white color secondary button 1`] = `
+exports[`<Button /> should render medium size button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: not-allowed;
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(210,6%,94%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  cursor: pointer;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2087,6 +2185,7 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2101,25 +2200,25 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(210,6%,94%,0.32);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(210,6%,94%,0.32);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(210,6%,94%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2127,14 +2226,18 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(210,6%,94%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2159,6 +2262,7 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2169,7 +2273,6 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
   <button
     class="c0"
     data-blade-component="button"
-    disabled=""
     role="button"
     type="button"
   >
@@ -2188,15 +2291,15 @@ exports[`<Button /> should render disabled white color secondary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render disabled white color tertiary button 1`] = `
+exports[`<Button /> should render negative color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
-  cursor: not-allowed;
-  background-color: hsla(210,6%,94%,0.09);
-  border-color: hsla(214,15%,18%,0);
-  border-width: 1px;
-  border-radius: 2px;
+  cursor: pointer;
+  background-color: hsla(4,74%,49%,1);
+  border-color: hsla(4,74%,49%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2212,6 +2315,7 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2226,22 +2330,25 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(210,6%,94%,0.09);
+  background-color: hsla(4,77%,40%,1);
+  border-color: hsla(4,77%,40%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(210,6%,94%,0.09);
+  background-color: hsla(4,77%,40%,1);
+  border-color: hsla(4,77%,40%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(210,6%,94%,0.09);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(4,77%,40%,1);
+  border-color: hsla(4,77%,40%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2249,14 +2356,18 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(210,6%,94%,0.32);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2281,6 +2392,7 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2291,7 +2403,6 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
   <button
     class="c0"
     data-blade-component="button"
-    disabled=""
     role="button"
     type="button"
   >
@@ -2310,15 +2421,15 @@ exports[`<Button /> should render disabled white color tertiary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render large size button 1`] = `
+exports[`<Button /> should render negative color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
-  min-height: 48px;
+  min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-color: hsla(4,74%,49%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2334,6 +2445,7 @@ exports[`<Button /> should render large size button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2348,25 +2460,25 @@ exports[`<Button /> should render large size button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(4,74%,49%,0.18);
+  border-color: hsla(4,74%,49%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(4,74%,49%,0.18);
+  border-color: hsla(4,74%,49%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(4,74%,49%,0.18);
+  border-color: hsla(4,74%,49%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2374,14 +2486,18 @@ exports[`<Button /> should render large size button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 700;
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.5rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2406,6 +2522,7 @@ exports[`<Button /> should render large size button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2434,15 +2551,15 @@ exports[`<Button /> should render large size button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render medium size button 1`] = `
+exports[`<Button /> should render positive color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(150,100%,32%,1);
+  border-color: hsla(150,100%,32%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2458,6 +2575,7 @@ exports[`<Button /> should render medium size button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2472,25 +2590,25 @@ exports[`<Button /> should render medium size button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(150,100%,27%,1);
+  border-color: hsla(150,100%,27%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(150,100%,27%,1);
+  border-color: hsla(150,100%,27%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(150,100%,27%,1);
+  border-color: hsla(150,100%,27%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2499,13 +2617,17 @@ exports[`<Button /> should render medium size button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2530,6 +2652,7 @@ exports[`<Button /> should render medium size button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2558,15 +2681,15 @@ exports[`<Button /> should render medium size button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render negative color primary button 1`] = `
+exports[`<Button /> should render positive color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(0,100%,97%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-color: hsla(150,100%,32%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2582,6 +2705,7 @@ exports[`<Button /> should render negative color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2596,25 +2720,25 @@ exports[`<Button /> should render negative color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(7,72%,40%,1);
-  border-color: hsla(0,100%,97%,1);
+  background-color: hsla(150,100%,32%,0.18);
+  border-color: hsla(150,100%,32%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(5,69%,32%,1);
-  border-color: hsla(0,100%,97%,1);
+  background-color: hsla(150,100%,32%,0.18);
+  border-color: hsla(150,100%,32%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(5,69%,32%,1);
-  border-color: hsla(0,100%,97%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(150,100%,32%,0.18);
+  border-color: hsla(150,100%,32%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2622,14 +2746,18 @@ exports[`<Button /> should render negative color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(0,100%,97%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2654,6 +2782,7 @@ exports[`<Button /> should render negative color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2682,15 +2811,15 @@ exports[`<Button /> should render negative color primary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render negative color secondary button 1`] = `
+exports[`<Button /> should render primary color primary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(9,91%,56%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2706,6 +2835,7 @@ exports[`<Button /> should render negative color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2720,25 +2850,25 @@ exports[`<Button /> should render negative color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(9,91%,56%,0.18);
-  border-color: hsla(9,91%,56%,0.32);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(9,91%,56%,0.32);
-  border-color: hsla(9,91%,56%,0.32);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(9,91%,56%,0.32);
-  border-color: hsla(9,91%,56%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2746,14 +2876,18 @@ exports[`<Button /> should render negative color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2778,6 +2912,7 @@ exports[`<Button /> should render negative color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2806,15 +2941,15 @@ exports[`<Button /> should render negative color secondary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render positive color primary button 1`] = `
+exports[`<Button /> should render primary color secondary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(160,100%,26%,1);
-  border-color: hsla(107,100%,96%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2830,6 +2965,7 @@ exports[`<Button /> should render positive color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2844,25 +2980,25 @@ exports[`<Button /> should render positive color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(163,100%,22%,1);
-  border-color: hsla(107,100%,96%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(164,100%,17%,1);
-  border-color: hsla(107,100%,96%,1);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(164,100%,17%,1);
-  border-color: hsla(107,100%,96%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2870,14 +3006,18 @@ exports[`<Button /> should render positive color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(107,100%,96%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2902,6 +3042,7 @@ exports[`<Button /> should render positive color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -2930,15 +3071,15 @@ exports[`<Button /> should render positive color primary button 1`] = `
 </div>
 `;
 
-exports[`<Button /> should render positive color secondary button 1`] = `
+exports[`<Button /> should render primary color tertiary button 1`] = `
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(155,100%,31%,0.09);
-  border-color: hsla(155,100%,31%,0.32);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(211,20%,52%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2954,6 +3095,7 @@ exports[`<Button /> should render positive color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2968,25 +3110,22 @@ exports[`<Button /> should render positive color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(155,100%,31%,0.18);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(155,100%,31%,0.32);
-  border-color: hsla(155,100%,31%,0.32);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(155,100%,31%,0.32);
-  border-color: hsla(155,100%,31%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2994,14 +3133,18 @@ exports[`<Button /> should render positive color secondary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3026,6 +3169,7 @@ exports[`<Button /> should render positive color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3059,10 +3203,10 @@ exports[`<Button /> should render small size button 1`] = `
   min-height: 32px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3078,6 +3222,7 @@ exports[`<Button /> should render small size button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3092,25 +3237,25 @@ exports[`<Button /> should render small size button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3119,13 +3264,17 @@ exports[`<Button /> should render small size button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3150,6 +3299,7 @@ exports[`<Button /> should render small size button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3185,8 +3335,8 @@ exports[`<Button /> should render white color primary button 1`] = `
   cursor: pointer;
   background-color: hsla(0,0%,100%,1);
   border-color: hsla(0,0%,100%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3202,6 +3352,7 @@ exports[`<Button /> should render white color primary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3216,25 +3367,25 @@ exports[`<Button /> should render white color primary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(216,6%,94%,1);
-  border-color: hsla(216,6%,94%,1);
+  background-color: hsla(0,0%,100%,0.8);
+  border-color: hsla(0,0%,100%,0.8);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(216,4%,89%,1);
-  border-color: hsla(216,4%,89%,1);
+  background-color: hsla(0,0%,100%,0.8);
+  border-color: hsla(0,0%,100%,0.8);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(216,4%,89%,1);
-  border-color: hsla(216,4%,89%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.8);
+  border-color: hsla(0,0%,100%,0.8);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3242,14 +3393,18 @@ exports[`<Button /> should render white color primary button 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,0%,0.72);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3274,6 +3429,7 @@ exports[`<Button /> should render white color primary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3307,10 +3463,10 @@ exports[`<Button /> should render white color secondary button 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(214,15%,18%,0);
-  border-color: hsla(0,0%,100%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(0,0%,100%,0.8);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3326,6 +3482,7 @@ exports[`<Button /> should render white color secondary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3340,25 +3497,25 @@ exports[`<Button /> should render white color secondary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(210,6%,94%,0.18);
-  border-color: hsla(0,0%,100%,1);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.8);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(210,6%,94%,0.32);
-  border-color: hsla(0,0%,100%,1);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.8);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(210,6%,94%,0.32);
-  border-color: hsla(0,0%,100%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.8);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3367,13 +3524,17 @@ exports[`<Button /> should render white color secondary button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3398,6 +3559,7 @@ exports[`<Button /> should render white color secondary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3431,10 +3593,10 @@ exports[`<Button /> should render white color tertiary button 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(210,6%,94%,0.09);
-  border-color: hsla(214,15%,18%,0);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(0,0%,100%,0.18);
+  border-color: hsla(0,0%,100%,0.18);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3450,6 +3612,7 @@ exports[`<Button /> should render white color tertiary button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3464,22 +3627,22 @@ exports[`<Button /> should render white color tertiary button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(210,6%,94%,0.18);
+  background-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(210,6%,94%,0.32);
+  background-color: hsla(0,0%,100%,0.32);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(210,6%,94%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(0,0%,100%,0.32);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3488,13 +3651,17 @@ exports[`<Button /> should render white color tertiary button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3519,6 +3686,7 @@ exports[`<Button /> should render white color tertiary button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3552,10 +3720,10 @@ exports[`<Button /> should render xsmall size button 1`] = `
   min-height: 28px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3571,6 +3739,7 @@ exports[`<Button /> should render xsmall size button 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3585,25 +3754,25 @@ exports[`<Button /> should render xsmall size button 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3612,13 +3781,17 @@ exports[`<Button /> should render xsmall size button 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3643,6 +3816,7 @@ exports[`<Button /> should render xsmall size button 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
diff --git a/packages/blade/src/components/Button/IconButton/IconButton.stories.tsx b/packages/blade/src/components/Button/IconButton/IconButton.stories.tsx
index 57cb71fd339..1a04b451b8e 100644
--- a/packages/blade/src/components/Button/IconButton/IconButton.stories.tsx
+++ b/packages/blade/src/components/Button/IconButton/IconButton.stories.tsx
@@ -15,12 +15,7 @@ const Page = (): ReactElement => {
       componentName="IconButton"
       componentDescription="Useful for making clickable icons. For example - close button for modals, inputs, etc."
       apiDecisionLink={null}
-      figmaURL={{
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=10564%3A195699&t=b5e9P6qSqxDsq2rz-4',
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=12702%3A149930&t=IyyhF89aEgTcRBzk-4',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=12702%3A149930&t=IyyhF89aEgTcRBzk-4"
     >
       <Title>Usage</Title>
       <Sandbox showConsole>
@@ -49,7 +44,7 @@ const meta: Meta<IconButtonProps> = {
   component: IconButtonComponent,
   args: {
     size: 'medium',
-    contrast: 'low',
+    emphasis: 'intense',
     accessibilityLabel: 'Close',
   },
   tags: ['autodocs'],
@@ -58,7 +53,7 @@ const meta: Meta<IconButtonProps> = {
     onClick: { action: 'onClick' },
     icon: {
       name: 'icon',
-      type: 'select',
+      type: 'select' as 'string',
       options: Object.keys(iconMap),
     },
   },
diff --git a/packages/blade/src/components/Button/IconButton/IconButton.tsx b/packages/blade/src/components/Button/IconButton/IconButton.tsx
index 6f1c6abd648..006e5e600d6 100644
--- a/packages/blade/src/components/Button/IconButton/IconButton.tsx
+++ b/packages/blade/src/components/Button/IconButton/IconButton.tsx
@@ -7,6 +7,7 @@ import type { IconComponent } from '~components/Icons';
 import type { BladeElementRef } from '~utils/types';
 import type { BladeCommonEvents } from '~components/types';
 import type { Platform } from '~utils';
+import type { SubtleOrIntense } from '~tokens/theme/theme';
 
 type IconButtonProps = {
   /**
@@ -24,9 +25,9 @@ type IconButtonProps = {
   /**
    * Icon contrast
    *
-   * @default 'low'
+   * @default 'intense'
    */
-  contrast?: 'low' | 'high';
+  emphasis?: SubtleOrIntense;
 
   /**
    * Sets aria-label to help users know what the action does, eg 'Dismiss alert'
@@ -61,7 +62,7 @@ const _IconButton: React.ForwardRefRenderFunction<BladeElementRef, IconButtonPro
     icon,
     onClick,
     size = 'medium',
-    contrast = 'low',
+    emphasis = 'intense',
     accessibilityLabel,
     isDisabled,
     onBlur,
@@ -80,7 +81,7 @@ const _IconButton: React.ForwardRefRenderFunction<BladeElementRef, IconButtonPro
     <StyledIconButton
       ref={ref as any}
       onClick={onClick}
-      contrast={contrast}
+      emphasis={emphasis}
       size={size}
       icon={icon}
       tabIndex={_tabIndex}
diff --git a/packages/blade/src/components/Button/IconButton/StyledIconButton.native.tsx b/packages/blade/src/components/Button/IconButton/StyledIconButton.native.tsx
index ff367697c93..b54fe97444c 100644
--- a/packages/blade/src/components/Button/IconButton/StyledIconButton.native.tsx
+++ b/packages/blade/src/components/Button/IconButton/StyledIconButton.native.tsx
@@ -5,16 +5,17 @@ import styled from 'styled-components/native';
 
 import type { View } from 'react-native';
 import type { StyledIconButtonProps } from './types';
-import type { ColorContrastTypes } from '~tokens/theme/theme';
+import type { Emphasis, SubtleOrIntense } from '~tokens/theme/theme';
 import { makeAccessible } from '~utils/makeAccessible';
 import type { BladeCommonEvents } from '~components/types';
 import { castNativeType } from '~utils';
 
-type State = 'active' | 'default';
-type IconColorToken = `surface.action.icon.${State}.${ColorContrastTypes}Contrast`;
+type IconColorStates = keyof Pick<Emphasis, 'muted' | 'subtle' | 'disabled'>;
+type EmphasisIconColorsType = 'staticWhite' | 'gray';
+type IconColorToken = `interactive.icon.${EmphasisIconColorsType}.${IconColorStates}`;
 
 type StyledPressableProps = {
-  contrast: ColorContrastTypes;
+  emphasis: SubtleOrIntense;
 } & BladeCommonEvents;
 
 const StyledPressable = styled.Pressable<StyledPressableProps>({
@@ -36,24 +37,29 @@ const StyledIconButton = React.forwardRef<View, StyledIconButtonProps>(
       onTouchEnd,
       onTouchStart,
       size,
-      contrast,
+      emphasis,
       accessibilityLabel,
     },
     ref,
   ) => {
     const [isPressed, setIsPressed] = useState(false);
     const getIconColorToken = (): IconColorToken => {
-      const contrastType = contrast === 'high' ? 'highContrast' : 'lowContrast';
-      const state = isPressed ? 'active' : 'default';
+      const emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';
 
-      return `surface.action.icon.${state}.${contrastType}`;
+      if (isDisabled) {
+        return `interactive.icon.${emphasisColor}.disabled`;
+      }
+
+      const state = isPressed ? 'subtle' : 'muted';
+
+      return `interactive.icon.${emphasisColor}.${state}`;
     };
     const iconColorToken = getIconColorToken();
 
     return (
       <StyledPressable
         ref={ref as any}
-        contrast={contrast}
+        emphasis={emphasis}
         onPress={castNativeType(onClick)}
         disabled={isDisabled}
         onPressIn={() => setIsPressed(true)}
diff --git a/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx b/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx
index d3ea18c1cc9..46fca1867f0 100644
--- a/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx
+++ b/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx
@@ -5,20 +5,21 @@ import React from 'react';
 import type { StyledIconButtonProps } from './types';
 import { castWebType } from '~utils';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
-import type { ColorContrastTypes } from '~tokens/theme/theme';
+import type { SubtleOrIntense } from '~tokens/theme/theme';
 import { makeAccessible } from '~utils/makeAccessible';
 import { makeMotionTime } from '~utils/makeMotionTime';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 
 type StyledButtonProps = {
-  contrast: ColorContrastTypes;
+  emphasis: SubtleOrIntense;
 };
 
 const StyledButton = styled.button<StyledButtonProps>((props) => {
-  const { theme, contrast } = props;
-  const iconColorToken = theme.colors.surface.action.icon;
-  const contrastToken = contrast === 'high' ? 'highContrast' : 'lowContrast';
+  const { theme, emphasis } = props;
   const motionToken = theme.motion;
 
+  const emphasisColor = emphasis === 'intense' ? 'gray' : 'staticWhite';
+
   return {
     border: 'none',
     cursor: props.disabled ? 'not-allowed' : 'pointer',
@@ -28,23 +29,24 @@ const StyledButton = styled.button<StyledButtonProps>((props) => {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    color: iconColorToken.default[contrastToken],
+    color: props.disabled
+      ? theme.colors.interactive.icon[emphasisColor].disabled
+      : theme.colors.interactive.icon[emphasisColor].muted,
     transitionProperty: 'color, box-shadow',
     transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),
     transitionTimingFunction: motionToken.easing.standard.effective as string,
 
     '&:hover': {
-      color: iconColorToken.hover[contrastToken],
+      color: theme.colors.interactive.icon[emphasisColor].subtle,
     },
 
     '&:focus-visible': {
-      outline: 'none',
-      boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,
-      color: iconColorToken.focus[contrastToken],
+      ...getFocusRingStyles({ theme }),
+      color: theme.colors.interactive.icon[emphasisColor].subtle,
     },
 
     '&:active': {
-      color: iconColorToken.active[contrastToken],
+      color: theme.colors.interactive.icon[emphasisColor].subtle,
     },
   };
 });
@@ -55,7 +57,7 @@ const StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonPro
       icon: Icon,
       onClick,
       size,
-      contrast,
+      emphasis,
       accessibilityLabel,
       isDisabled,
       testID,
@@ -74,7 +76,7 @@ const StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonPro
     <StyledButton
       ref={ref}
       onClick={castWebType(onClick)}
-      contrast={contrast}
+      emphasis={emphasis}
       type="button"
       onBlur={onBlur}
       onFocus={onFocus}
@@ -89,10 +91,7 @@ const StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonPro
       {...makeAccessible({ label: accessibilityLabel })}
       {...metaAttribute({ name: MetaConstants.IconButton, testID })}
     >
-      <Icon
-        size={size}
-        color={isDisabled ? 'surface.action.icon.disabled.lowContrast' : 'currentColor'}
-      />
+      <Icon size={size} color={isDisabled ? 'interactive.icon.gray.disabled' : 'currentColor'} />
     </StyledButton>
   ),
 );
diff --git a/packages/blade/src/components/Button/IconButton/__tests__/IconButton.web.test.tsx b/packages/blade/src/components/Button/IconButton/__tests__/IconButton.web.test.tsx
index 47052cfdc91..6e51259ba44 100644
--- a/packages/blade/src/components/Button/IconButton/__tests__/IconButton.web.test.tsx
+++ b/packages/blade/src/components/Button/IconButton/__tests__/IconButton.web.test.tsx
@@ -18,6 +18,15 @@ describe('<IconButton />', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should render with emphasis', () => {
+    const noop = () => {};
+    const { container } = renderWithTheme(
+      <IconButton accessibilityLabel="Close" emphasis="intense" icon={CloseIcon} onClick={noop} />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
   it('should handle onClick', async () => {
     const user = userEvent.setup();
     const onClick = jest.fn();
diff --git a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.native.test.tsx.snap b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.native.test.tsx.snap
index a423612981e..07367b042ad 100644
--- a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.native.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`<IconButton /> should render 1`] = `
     }
     accessible={true}
     collapsable={false}
-    contrast="low"
+    emphasis="intense"
     focusable={true}
     onBlur={[Function]}
     onClick={[Function]}
@@ -92,7 +92,7 @@ exports[`<IconButton /> should render 1`] = `
       >
         <RNSVGPath
           d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-          fill={4288851646}
+          fill={4285959847}
           propList={
             [
               "fill",
diff --git a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.ssr.test.tsx.snap b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.ssr.test.tsx.snap
index a99760832d9..8568c6df25c 100644
--- a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<IconButton /> should render 1`] = `"<div id="root"><button type="button" aria-label="Close modal" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 dOswfI"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div>"`;
+exports[`<IconButton /> should render 1`] = `"<div id="root"><button type="button" aria-label="Close modal" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jCUyST"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div>"`;
 
 exports[`<IconButton /> should render 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -21,7 +21,7 @@ exports[`<IconButton /> should render 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -31,17 +31,23 @@ exports[`<IconButton /> should render 2`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 <div
diff --git a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap
index 41d88726d00..d6ae0e18a7e 100644
--- a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap
+++ b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<IconButton /> should render 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -29,17 +29,97 @@ exports[`<IconButton /> should render 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
+}
+
+.c0.c0.c0.c0.c0:active {
+  color: hsla(211,26%,34%,1);
+}
+
+<div>
+  <button
+    aria-label="Close"
+    class="c0"
+    data-blade-component="icon-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="Svgweb__StyledSvg-vcmjs8-0"
+      data-blade-component="icon"
+      fill="none"
+      height="16px"
+      viewBox="0 0 24 24"
+      width="16px"
+    >
+      <path
+        d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
+        data-blade-component="svg-path"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`<IconButton /> should render with emphasis 1`] = `
+.c0.c0.c0.c0.c0 {
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 2px;
+  background: transparent;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: hsla(211,22%,56%,1);
+  -webkit-transition-property: color,box-shadow;
+  transition-property: color,box-shadow;
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+}
+
+.c0.c0.c0.c0.c0:hover {
+  color: hsla(211,26%,34%,1);
+}
+
+.c0.c0.c0.c0.c0:focus-visible {
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 <div>
diff --git a/packages/blade/src/components/Button/IconButton/types.ts b/packages/blade/src/components/Button/IconButton/types.ts
index 4a1a8e881d2..2d38c8fe306 100644
--- a/packages/blade/src/components/Button/IconButton/types.ts
+++ b/packages/blade/src/components/Button/IconButton/types.ts
@@ -2,11 +2,12 @@ import type { IconButtonProps } from './IconButton';
 import type { IconComponent } from '~components/Icons';
 import type { RemoveUndefinedFromUnion, TestID } from '~utils/types';
 import type { BladeCommonEvents } from '~components/types';
+import type { SubtleOrIntense } from '~tokens/theme/theme';
 
 export type StyledIconButtonProps = {
   icon: IconComponent;
   size: RemoveUndefinedFromUnion<IconButtonProps['size']>;
-  contrast: 'low' | 'high';
+  emphasis: SubtleOrIntense;
   accessibilityLabel: string;
   isDisabled?: IconButtonProps['isDisabled'];
   tabIndex?: IconButtonProps['_tabIndex'];
diff --git a/packages/blade/src/components/Card/Card.stories.tsx b/packages/blade/src/components/Card/Card.stories.tsx
index a0b9108ce3a..cf414a3ac01 100644
--- a/packages/blade/src/components/Card/Card.stories.tsx
+++ b/packages/blade/src/components/Card/Card.stories.tsx
@@ -1,7 +1,8 @@
 import type { StoryFn, Meta } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
 import React from 'react';
-import type { CardFooterAction } from './';
+import type { CardSpacingValueType } from './types';
+import type { CardFooterAction, CardProps } from './';
 import {
   CardBody,
   Card,
@@ -16,35 +17,29 @@ import {
   CardHeaderBadge,
   CardHeaderIconButton,
   CardHeaderLink,
+  CardHeaderAmount,
   CardHeaderText,
 } from './';
 import { Sandbox } from '~utils/storybook/Sandbox';
 
 import { Heading, Text } from '~components/Typography';
 import type { IconComponent } from '~components/Icons';
-import { UsersIcon, TrashIcon } from '~components/Icons';
+import { UsersIcon, TrashIcon, CheckCircleIcon } from '~components/Icons';
 
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import iconMap from '~components/Icons/iconMap';
-import type { SpacingValueType } from '~components/Box/BaseBox';
-import BaseBox from '~components/Box/BaseBox';
-import { TextInput } from '~components/Input/TextInput';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 import type { Elevation } from '~tokens/global';
-import type { SurfaceLevels } from '~tokens/theme/theme';
 import { Box } from '~components/Box';
+import BaseBox from '~components/Box/BaseBox';
+import { TextInput } from '~components/Input/TextInput';
 
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
       componentName="Card"
       componentDescription="Cards are used to group similar concepts and tasks together to make easier for merchants to scan, read, and get things done. In simpler words Cards help seprates content into sections. They are the surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=21248%3A400833&t=ZCWT255jVK78xf1J-4',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=12791%3A336279&t=ZCWT255jVK78xf1J-4',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=21248%3A400833&t=ZCWT255jVK78xf1J-4"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
@@ -117,46 +112,67 @@ const Page = (): React.ReactElement => {
 
 const propsCategory = {
   CARD: 'Card Props',
+  CARD_HEADER: 'Header Props',
   CARD_HEADER_LEADING: 'Header Leading Props',
   CARD_HEADER_TRAILING: 'Header Trailing Props',
+  CARD_FOOTER: 'Footer Props',
   CARD_FOOTER_LEADING: 'Footer Leading Props',
   CARD_FOOTER_TRAILING: 'Footer Trailing Props',
 };
 
 type StoryControlProps = {
-  surfaceLevel: Exclude<SurfaceLevels, 1>;
+  backgroundColor: CardProps['backgroundColor'];
+  borderRadius: CardProps['borderRadius'];
   elevation: keyof Elevation;
-  padding: Extract<SpacingValueType, 'spacing.0' | 'spacing.3' | 'spacing.5' | 'spacing.7'>;
+  padding: CardSpacingValueType;
   headerTitle: string;
   headerSubtitle: string;
+  headerMarginBottom: CardSpacingValueType;
+  headerPaddingBottom: CardSpacingValueType;
   prefix: IconComponent;
   suffix: number;
   visual: React.ReactNode;
   body: React.ReactNode;
   footerTitle: string;
   footerSubtitle: string;
+  footerMarginTop: CardSpacingValueType;
+  footerPaddingTop: CardSpacingValueType;
   footerPrimaryAction: CardFooterAction;
   footerSecondaryAction: CardFooterAction;
 };
 
+const spacingValueOptions: CardSpacingValueType[] = [
+  'spacing.0',
+  'spacing.3',
+  'spacing.4',
+  'spacing.5',
+  'spacing.7',
+];
+
 const visual = {
   Link: <CardHeaderLink href="/">Learn more</CardHeaderLink>,
   Text: <CardHeaderText>$100</CardHeaderText>,
   IconButton: <CardHeaderIconButton icon={TrashIcon} />,
-  Badge: <CardHeaderBadge variant="positive">NEW</CardHeaderBadge>,
+  Badge: <CardHeaderBadge color="positive">NEW</CardHeaderBadge>,
+  Amount: <CardHeaderAmount value={1000} />,
 };
 
 export default {
   title: 'Components/Card',
   component: Card,
   args: {
-    surfaceLevel: 2,
+    backgroundColor: 'surface.background.gray.intense',
+    borderRadius: 'medium',
     elevation: 'lowRaised',
     padding: 'spacing.7',
     headerTitle: 'Payment Links',
     headerSubtitle: 'Share payment link via an email, SMS, messenger, chatbot etc.',
+    headerPaddingBottom: 'spacing.4',
+    headerMarginBottom: 'spacing.4',
     footerTitle: 'Built for Developers',
     footerSubtitle: 'By Developers.',
+    footerMarginTop: 'spacing.4',
+    footerPaddingTop: 'spacing.4',
     body:
       'Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.',
     footerPrimaryAction: {
@@ -189,7 +205,10 @@ export default {
   },
   tags: ['autodocs'],
   argTypes: {
-    surfaceLevel: {
+    backgroundColor: {
+      table: { category: propsCategory.CARD },
+    },
+    borderRadius: {
       table: { category: propsCategory.CARD },
     },
     elevation: {
@@ -204,6 +223,20 @@ export default {
     headerSubtitle: {
       table: { category: propsCategory.CARD_HEADER_LEADING },
     },
+    headerMarginBottom: {
+      table: { category: propsCategory.CARD_HEADER },
+      control: {
+        type: 'radio',
+        options: spacingValueOptions,
+      },
+    },
+    headerPaddingBottom: {
+      table: { category: propsCategory.CARD_HEADER },
+      control: {
+        type: 'radio',
+        options: spacingValueOptions,
+      },
+    },
     prefix: {
       control: {
         type: 'select',
@@ -236,6 +269,20 @@ export default {
     footerSubtitle: {
       table: { category: propsCategory.CARD_FOOTER_LEADING },
     },
+    footerMarginTop: {
+      table: { category: propsCategory.CARD_FOOTER },
+      control: {
+        type: 'radio',
+        options: spacingValueOptions,
+      },
+    },
+    footerPaddingTop: {
+      table: { category: propsCategory.CARD_FOOTER },
+      control: {
+        type: 'radio',
+        options: spacingValueOptions,
+      },
+    },
     footerPrimaryAction: {
       table: { category: propsCategory.CARD_FOOTER_TRAILING },
     },
@@ -254,8 +301,13 @@ export default {
 
 const CardTemplate = ({ ...args }: StoryControlProps): React.ReactElement => {
   return (
-    <Card surfaceLevel={args.surfaceLevel} elevation={args.elevation} padding={args.padding}>
-      <CardHeader>
+    <Card
+      borderRadius={args.borderRadius}
+      backgroundColor={args.backgroundColor}
+      elevation={args.elevation}
+      padding={args.padding}
+    >
+      <CardHeader paddingBottom={args.headerPaddingBottom} marginBottom={args.headerMarginBottom}>
         <CardHeaderLeading
           title={args.headerTitle}
           subtitle={args.headerSubtitle}
@@ -267,7 +319,7 @@ const CardTemplate = ({ ...args }: StoryControlProps): React.ReactElement => {
       <CardBody>
         <Text>{args.body}</Text>
       </CardBody>
-      <CardFooter>
+      <CardFooter paddingTop={args.footerPaddingTop} marginTop={args.footerMarginTop}>
         <CardFooterLeading title={args.footerTitle} subtitle={args.footerSubtitle} />
         <CardFooterTrailing
           actions={{
@@ -281,10 +333,19 @@ const CardTemplate = ({ ...args }: StoryControlProps): React.ReactElement => {
 };
 
 export const CardExample = CardTemplate.bind({});
+export const FigmaExample = CardTemplate.bind({});
+// @ts-expect-error: storybook thinks it does exist but it does
+FigmaExample.args = {
+  headerTitle: 'Header Title',
+  headerSubtitle: 'Header Subtitle',
+  prefix: CheckCircleIcon,
+  footerTitle: 'Footer Title',
+  footerSubtitle: 'Footer Subtitle',
+};
 
 const CardChildrenExample = ({ ...args }: StoryControlProps): React.ReactElement => {
   return (
-    <Card surfaceLevel={args.surfaceLevel}>
+    <Card backgroundColor={args.backgroundColor}>
       <CardHeader>
         <CardHeaderLeading
           title="Profile Information"
diff --git a/packages/blade/src/components/Card/Card.tsx b/packages/blade/src/components/Card/Card.tsx
index f497d6c974e..0141a365a9e 100644
--- a/packages/blade/src/components/Card/Card.tsx
+++ b/packages/blade/src/components/Card/Card.tsx
@@ -4,9 +4,8 @@ import { CardSurface } from './CardSurface';
 import { CardProvider, useVerifyInsideCard } from './CardContext';
 import { LinkOverlay } from './LinkOverlay';
 import { CardRoot } from './CardRoot';
-import type { LinkOverlayProps } from './types';
+import type { CardSpacingValueType, LinkOverlayProps } from './types';
 import { CARD_LINK_OVERLAY_ID } from './constants';
-import type { SpacingValueType } from '~components/Box/BaseBox';
 import BaseBox from '~components/Box/BaseBox';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { getStyledProps } from '~components/Box/styledProps';
@@ -14,12 +13,13 @@ import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { TestID } from '~utils/types';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import type { Elevation } from '~tokens/global';
-import type { SurfaceLevels } from '~tokens/theme/theme';
 import type { BoxProps } from '~components/Box';
 import { makeAccessible } from '~utils/makeAccessible';
 import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';
 import type { Platform } from '~utils';
 import { isReactNative } from '~utils';
+import type { Theme } from '~components/BladeProvider';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 
 export const ComponentIds = {
   CardHeader: 'CardHeader',
@@ -32,32 +32,33 @@ export const ComponentIds = {
   CardHeaderIcon: 'CardHeaderIcon',
   CardHeaderCounter: 'CardHeaderCounter',
   CardHeaderBadge: 'CardHeaderBadge',
+  CardHeaderAmount: 'CardHeaderAmount',
   CardHeaderText: 'CardHeaderText',
   CardHeaderLink: 'CardHeaderLink',
   CardHeaderIconButton: 'CardHeaderIconButton',
 };
 
+type CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<
+  Theme['colors']['surface']['background']['gray']
+>}`;
+
 export type CardProps = {
   /**
    * Card contents
    */
   children: React.ReactNode;
   /**
-   * Sets the background color of the Card according to the surface level tokens
-   *
-   * eg: `theme.colors.surface.background.level1`
-   *
-   * @default `2`
-   *
-   * **Description:**
+   * Sets the background color of the Card
    *
-   * - 2: Used in layouts which are on top of the main background
-   * - 3: Used over the cards template or as a text input backgrounds.
+   * @default `surface.background.gray.intense`
+   */
+  backgroundColor?: CardSurfaceBackgroundColors;
+  /**
+   * Sets the border radius of the Card
    *
-   * **Links:**
-   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens
+   * @default `medium`
    */
-  surfaceLevel?: Exclude<SurfaceLevels, 1>;
+  borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;
   /**
    * Sets the elevation for Cards
    *
@@ -76,7 +77,7 @@ export type CardProps = {
    * **Links:**
    * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
    */
-  padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.3' | 'spacing.5' | 'spacing.7'>;
+  padding?: CardSpacingValueType;
   /**
    * Sets the width of the card
    */
@@ -156,7 +157,8 @@ export type CardProps = {
 
 const Card = ({
   children,
-  surfaceLevel = 2,
+  backgroundColor = 'surface.background.gray.intense',
+  borderRadius = 'medium',
   elevation = 'lowRaised',
   testID,
   padding = 'spacing.7',
@@ -220,10 +222,10 @@ const Card = ({
           height={height}
           minHeight={minHeight}
           padding={padding}
-          borderRadius="medium"
-          surfaceLevel={surfaceLevel}
+          borderRadius={borderRadius}
           elevation={elevation}
           textAlign={'left' as never}
+          backgroundColor={backgroundColor}
         >
           {href ? (
             <LinkOverlay
diff --git a/packages/blade/src/components/Card/CardFooter.tsx b/packages/blade/src/components/Card/CardFooter.tsx
index 3f6eadbbf4e..b924877f740 100644
--- a/packages/blade/src/components/Card/CardFooter.tsx
+++ b/packages/blade/src/components/Card/CardFooter.tsx
@@ -3,6 +3,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { useVerifyInsideCard } from './CardContext';
 import { ComponentIds } from './Card';
+import type { CardSpacingValueType } from './types';
 import type { ButtonProps } from '~components/Button';
 import { Button } from '~components/Button';
 import { Divider } from '~components/Divider';
@@ -24,9 +25,27 @@ export type CardFooterAction = Pick<
 
 type CardFooterProps = {
   children?: React.ReactNode;
+  /**
+   * For spacing between divider and footer title
+   */
+  paddingTop?: CardSpacingValueType;
+  /**
+   * For spacing between body content and divider
+   */
+  marginTop?: CardSpacingValueType;
+  /**
+   * @default true
+   */
+  showDivider?: boolean;
 } & TestID;
 
-const _CardFooter = ({ children, testID }: CardFooterProps): React.ReactElement => {
+const _CardFooter = ({
+  children,
+  testID,
+  marginTop = 'spacing.4',
+  paddingTop = 'spacing.4',
+  showDivider = true,
+}: CardFooterProps): React.ReactElement => {
   const isMobile = useIsMobile();
   useVerifyInsideCard('CardFooter');
   useVerifyAllowedChildren({
@@ -55,11 +74,10 @@ const _CardFooter = ({ children, testID }: CardFooterProps): React.ReactElement
       : 'flex-end';
 
   return (
-    <BaseBox marginTop="auto" {...metaAttribute({ name: MetaConstants.CardFooter, testID })}>
-      <BaseBox marginTop="spacing.7" />
-      <Divider />
+    <BaseBox marginTop={marginTop} {...metaAttribute({ name: MetaConstants.CardFooter, testID })}>
+      {showDivider ? <Divider /> : null}
       <BaseBox
-        marginTop="spacing.7"
+        paddingTop={paddingTop}
         display="flex"
         flexDirection={isMobile ? 'column' : 'row'}
         justifyContent={baseBoxJustifyContent}
@@ -82,12 +100,12 @@ const _CardFooterLeading = ({ title, subtitle }: CardFooterLeadingProps): React.
   return (
     <BaseBox textAlign={'left' as never}>
       {title && (
-        <Text variant="body" size="medium" weight="bold">
+        <Text color="surface.text.gray.normal" size="medium" weight="semibold">
           {title}
         </Text>
       )}
       {subtitle && (
-        <Text variant="body" size="small" weight="regular">
+        <Text color="surface.text.gray.subtle" size="small" weight="regular">
           {subtitle}
         </Text>
       )}
diff --git a/packages/blade/src/components/Card/CardHeader.tsx b/packages/blade/src/components/Card/CardHeader.tsx
index 0563e4cd173..25f1f5a0851 100644
--- a/packages/blade/src/components/Card/CardHeader.tsx
+++ b/packages/blade/src/components/Card/CardHeader.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { useVerifyInsideCard } from './CardContext';
 import { ComponentIds } from './Card';
+import type { CardSpacingValueType } from './types';
 import type { BadgeProps } from '~components/Badge';
 import { Badge } from '~components/Badge';
 import type { LinkProps } from '~components/Link';
@@ -13,7 +14,7 @@ import type { CounterProps } from '~components/Counter';
 import { Divider } from '~components/Divider';
 import BaseBox from '~components/Box/BaseBox';
 import type { TextProps, TextVariant } from '~components/Typography';
-import { Heading, Text } from '~components/Typography';
+import { Text } from '~components/Typography';
 import type { IconComponent } from '~components/Icons';
 import { minHeight } from '~components/Button/BaseButton/buttonTokens';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
@@ -23,11 +24,13 @@ import { makeSpace } from '~utils/makeSpace';
 import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';
 import { throwBladeError } from '~utils/logger';
 import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';
+import type { AmountProps } from '~components/Amount';
+import { Amount } from '~components/Amount';
 
 const _CardHeaderIcon = ({ icon: Icon }: { icon: IconComponent }): React.ReactElement => {
   useVerifyInsideCard('CardHeaderIcon');
 
-  return <Icon color="surface.text.normal.lowContrast" size="xlarge" />;
+  return <Icon color="surface.icon.gray.normal" size="large" />;
 };
 const CardHeaderIcon = assignWithoutSideEffects(_CardHeaderIcon, {
   componentId: ComponentIds.CardHeaderIcon,
@@ -51,6 +54,16 @@ const CardHeaderBadge = assignWithoutSideEffects(_CardHeaderBadge, {
   componentId: ComponentIds.CardHeaderBadge,
 });
 
+const _CardHeaderAmount = (props: AmountProps): React.ReactElement => {
+  useVerifyInsideCard('CardHeaderAmount');
+
+  return <Amount {...props} />;
+};
+
+const CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, {
+  componentId: ComponentIds.CardHeaderAmount,
+});
+
 const _CardHeaderText = (props: TextProps<{ variant: TextVariant }>): React.ReactElement => {
   useVerifyInsideCard('CardHeaderText');
 
@@ -91,9 +104,27 @@ const CardHeaderIconButton = assignWithoutSideEffects(_CardHeaderIconButton, {
 
 type CardHeaderProps = {
   children?: React.ReactNode;
+  /**
+   * For spacing between divider and header title
+   */
+  paddingBottom?: CardSpacingValueType;
+  /**
+   * For spacing between body content and divider
+   */
+  marginBottom?: CardSpacingValueType;
+  /**
+   * @default true
+   */
+  showDivider?: boolean;
 } & TestID;
 
-const _CardHeader = ({ children, testID }: CardHeaderProps): React.ReactElement => {
+const _CardHeader = ({
+  children,
+  testID,
+  marginBottom = 'spacing.4',
+  paddingBottom = 'spacing.4',
+  showDivider = true,
+}: CardHeaderProps): React.ReactElement => {
   useVerifyInsideCard('CardHeader');
   useVerifyAllowedChildren({
     children,
@@ -103,18 +134,18 @@ const _CardHeader = ({ children, testID }: CardHeaderProps): React.ReactElement
 
   return (
     <BaseBox
-      marginBottom="spacing.7"
+      marginBottom={marginBottom}
       {...metaAttribute({ name: MetaConstants.CardHeader, testID })}
     >
       <BaseBox
-        marginBottom="spacing.7"
+        paddingBottom={paddingBottom}
         display="flex"
         flexDirection="row"
         justifyContent="space-between"
       >
         {children}
       </BaseBox>
-      <Divider />
+      {showDivider ? <Divider /> : null}
     </BaseBox>
   );
 };
@@ -167,13 +198,13 @@ const _CardHeaderLeading = ({
       </BaseBox>
       <BaseBox marginRight="spacing.5">
         <BaseBox display="flex" flexDirection="row" alignItems="center" flexWrap="wrap">
-          <Heading size="small" variant="regular" type="normal">
+          <Text color="surface.text.gray.normal" size="large" weight="semibold">
             {title}
-          </Heading>
+          </Text>
           <BaseBox marginLeft="spacing.3">{suffix}</BaseBox>
         </BaseBox>
         {subtitle && (
-          <Text textAlign="left" variant="body" size="small" weight="regular">
+          <Text color="surface.text.gray.subtle" textAlign="left" size="small">
             {subtitle}
           </Text>
         )}
@@ -199,6 +230,7 @@ const headerTrailingAllowedComponents = [
   ComponentIds.CardHeaderText,
   ComponentIds.CardHeaderIconButton,
   ComponentIds.CardHeaderBadge,
+  ComponentIds.CardHeaderAmount,
 ];
 
 const _CardHeaderTrailing = ({ visual }: CardHeaderTrailingProps): React.ReactElement => {
@@ -230,5 +262,6 @@ export {
   CardHeaderCounter,
   CardHeaderText,
   CardHeaderLink,
+  CardHeaderAmount,
   CardHeaderIconButton,
 };
diff --git a/packages/blade/src/components/Card/CardInteractive.stories.tsx b/packages/blade/src/components/Card/CardInteractive.stories.tsx
index 77193c0b338..d92aac687f2 100644
--- a/packages/blade/src/components/Card/CardInteractive.stories.tsx
+++ b/packages/blade/src/components/Card/CardInteractive.stories.tsx
@@ -16,7 +16,7 @@ import {
   CardHeaderCounter,
   CardHeaderBadge,
 } from '.';
-import { Code, Text, Title } from '~components/Typography';
+import { Code, Text, Heading } from '~components/Typography';
 import { RupeeIcon } from '~components/Icons';
 import { Link } from '~components/Link';
 import { Box } from '~components/Box';
@@ -35,14 +35,9 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Interactive Card"
       componentDescription="Enhancing the Card component to add additional interactions and behaviour. This includes making the card clickable, hoverable, linkable, selectable and more."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=21248%3A400833&t=ZCWT255jVK78xf1J-4',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=12791%3A336279&t=ZCWT255jVK78xf1J-4',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=21248%3A400833&t=ZCWT255jVK78xf1J-4"
     >
-      <Title>Usage</Title>
+      <Heading size="large">Usage</Heading>
       <Box marginY="spacing.6">
         <Sandbox>
           {`
@@ -92,9 +87,9 @@ const Page = (): React.ReactElement => {
                     value="free"
                     name="pricing-card"
                   />
-                  <Amount marginBottom="spacing.1" value={0} currency="USD" size="heading-large-bold" />
+                  <Amount marginBottom="spacing.1" value={0} currency="USD" size="large" />
                   <Box paddingX="spacing.2">
-                    <Text marginBottom="spacing.3" size="large" type="subtle">
+                    <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                       Free
                     </Text>
                     <Text>
@@ -116,9 +111,9 @@ const Page = (): React.ReactElement => {
                     value="standard"
                     name="pricing-card"
                   />
-                  <Amount marginBottom="spacing.1" value={10} currency="USD" size="heading-large-bold" />
+                  <Amount marginBottom="spacing.1" value={10} currency="USD" size="large" />
                   <Box paddingX="spacing.2">
-                    <Text marginBottom="spacing.3" size="large" type="subtle">
+                    <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                       Standard
                     </Text>
                     <Text>
@@ -140,9 +135,9 @@ const Page = (): React.ReactElement => {
                     value="premium"
                     name="pricing-card"
                   />
-                  <Amount marginBottom="spacing.1" value={20} currency="USD" size="heading-large-bold" />
+                  <Amount marginBottom="spacing.1" value={20} currency="USD" size="large" />
                   <Box paddingX="spacing.2">
-                    <Text marginBottom="spacing.3" size="large" type="subtle">
+                    <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                       Premium
                     </Text>
                     <Text>
@@ -282,7 +277,7 @@ const CardTemplate: StoryFn<typeof Card> = (args): React.ReactElement => {
       href={args.href}
       target={args.target}
       accessibilityLabel={args.accessibilityLabel}
-      surfaceLevel={args.surfaceLevel}
+      backgroundColor={args.backgroundColor}
       elevation={args.elevation}
       padding={args.padding}
       width={{ s: '100%', m: '400px' }}
@@ -294,7 +289,7 @@ const CardTemplate: StoryFn<typeof Card> = (args): React.ReactElement => {
           prefix={<CardHeaderIcon icon={RupeeIcon} />}
           suffix={<CardHeaderCounter value={12} />}
         />
-        <CardHeaderTrailing visual={<CardHeaderBadge variant="positive">NEW</CardHeaderBadge>} />
+        <CardHeaderTrailing visual={<CardHeaderBadge color="positive">NEW</CardHeaderBadge>} />
       </CardHeader>
       <CardBody>
         <Text>
@@ -347,13 +342,13 @@ export const ClickableCard = (): React.ReactElement => {
           </Text>
           <Text marginY="spacing.2">
             Card Clicked:{' '}
-            <Text as="span" weight="bold">
+            <Text as="span" weight="semibold">
               {cardClickCount}
             </Text>
           </Text>
           <Text marginY="spacing.2">
             Button Clicked:{' '}
-            <Text as="span" weight="bold">
+            <Text as="span" weight="semibold">
               {buttonClickCount}
             </Text>
           </Text>
@@ -516,9 +511,9 @@ const SingleSelectCardWeb = (): React.ReactElement => {
               value="free"
               name="pricing-card"
             />
-            <Amount marginBottom="spacing.1" value={0} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={0} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Free
               </Text>
               <Text>
@@ -540,9 +535,9 @@ const SingleSelectCardWeb = (): React.ReactElement => {
               value="standard"
               name="pricing-card"
             />
-            <Amount marginBottom="spacing.1" value={10} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={10} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Standard
               </Text>
               <Text>
@@ -563,9 +558,9 @@ const SingleSelectCardWeb = (): React.ReactElement => {
               value="premium"
               name="pricing-card"
             />
-            <Amount marginBottom="spacing.1" value={20} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={20} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Premium
               </Text>
               <Text>
@@ -607,9 +602,9 @@ const MultiSelectCardWeb = (): React.ReactElement => {
               value="free"
               name="pricing-card"
             />
-            <Amount marginBottom="spacing.1" value={0} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={0} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Free
               </Text>
               <Text>
@@ -627,9 +622,9 @@ const MultiSelectCardWeb = (): React.ReactElement => {
               value="standard"
               name="pricing-card"
             />
-            <Amount marginBottom="spacing.1" value={10} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={10} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Standard
               </Text>
               <Text>
@@ -646,9 +641,9 @@ const MultiSelectCardWeb = (): React.ReactElement => {
               value="premium"
               name="pricing-card"
             />
-            <Amount marginBottom="spacing.1" value={20} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={20} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Premium
               </Text>
               <Text>
@@ -681,9 +676,9 @@ const SingleSelectCardReactNative = (): React.ReactElement => {
           isSelected={selected === 'free'}
         >
           <CardBody>
-            <Amount marginBottom="spacing.1" value={0} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={0} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Free
               </Text>
               <Text>
@@ -700,9 +695,9 @@ const SingleSelectCardReactNative = (): React.ReactElement => {
           isSelected={selected === 'standard'}
         >
           <CardBody>
-            <Amount marginBottom="spacing.1" value={10} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={10} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Standard
               </Text>
               <Text>
@@ -718,9 +713,9 @@ const SingleSelectCardReactNative = (): React.ReactElement => {
           isSelected={selected === 'premium'}
         >
           <CardBody>
-            <Amount marginBottom="spacing.1" value={20} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={20} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Premium
               </Text>
               <Text>
@@ -761,9 +756,9 @@ const MultiSelectCardReactNative = (): React.ReactElement => {
           shouldScaleOnHover
         >
           <CardBody>
-            <Amount marginBottom="spacing.1" value={0} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={0} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Free
               </Text>
               <Text>
@@ -780,9 +775,9 @@ const MultiSelectCardReactNative = (): React.ReactElement => {
           shouldScaleOnHover
         >
           <CardBody>
-            <Amount marginBottom="spacing.1" value={10} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={10} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Standard
               </Text>
               <Text>
@@ -798,9 +793,9 @@ const MultiSelectCardReactNative = (): React.ReactElement => {
           shouldScaleOnHover
         >
           <CardBody>
-            <Amount marginBottom="spacing.1" value={20} currency="USD" size="heading-large-bold" />
+            <Amount marginBottom="spacing.1" value={20} currency="USD" size="large" />
             <Box paddingX="spacing.2">
-              <Text marginBottom="spacing.3" size="large" type="subtle">
+              <Text marginBottom="spacing.3" size="large" color="surface.text.gray.subtle">
                 Premium
               </Text>
               <Text>
@@ -834,12 +829,12 @@ const RadioCard = ({ value, label }: { value: string; label: string }) => {
       <Radio value={value} />
       <Box display="flex" flexDirection="column" gap="spacing.3">
         <Box display="flex" flexDirection="row" gap="spacing.4">
-          <Text weight="bold">{label}</Text>
-          <Badge variant="positive">Issued</Badge>
+          <Text weight="semibold">{label}</Text>
+          <Badge color="positive">Issued</Badge>
         </Box>
         <Box display="flex" flexDirection="row" gap="spacing.4">
           <Text size="small">13 Aug’23</Text>
-          <Amount size="body-small" value={1000} />
+          <Amount size="small" value={1000} />
           <Text size="small">Un-billed/₹1,000</Text>
         </Box>
       </Box>
@@ -895,13 +890,13 @@ const CheckboxCard = ({ value, label }: { value: string; label: string }) => {
       <Checkbox value={value} />
       <Box display="flex" flexDirection="column" gap="spacing.3">
         <Box display="flex" flexDirection="row" gap="spacing.4">
-          <Text weight="bold">{label}</Text>
-          <Badge variant="positive">Issued</Badge>
+          <Text weight="medium">{label}</Text>
+          <Badge color="positive">Issued</Badge>
         </Box>
         <Box display="flex" flexDirection="row" alignItems="center" gap="spacing.4">
           <Text size="small">13 Aug’23</Text>
-          <Amount size="body-small" value={1000} />
-          <Text size="small">Un-billed/₹1,000</Text>
+          <Amount size="small" weight="medium" value={1000} />
+          <Text size="small">Un-billed | ₹1,000</Text>
         </Box>
       </Box>
     </Box>
diff --git a/packages/blade/src/components/Card/CardRoot.native.tsx b/packages/blade/src/components/Card/CardRoot.native.tsx
index 1db40c7083e..757288d0edc 100644
--- a/packages/blade/src/components/Card/CardRoot.native.tsx
+++ b/packages/blade/src/components/Card/CardRoot.native.tsx
@@ -11,7 +11,9 @@ import { logger } from '~utils/logger';
 import { makeAccessible } from '~utils/makeAccessible/makeAccessible.native';
 
 const StyledCardRoot = styled(BaseBox)<CardRootProps>(({ isSelected, ...props }) => {
-  const selectedColor = isSelected ? props.theme.colors.brand.primary[500] : 'transparent';
+  const selectedColor = isSelected
+    ? props.theme.colors.surface.border.primary.normal
+    : 'transparent';
   return {
     border: `${props.theme.border.width.thicker}px solid ${selectedColor}`,
   };
diff --git a/packages/blade/src/components/Card/CardRoot.web.tsx b/packages/blade/src/components/Card/CardRoot.web.tsx
index 29e458f3756..bdbd361aad4 100644
--- a/packages/blade/src/components/Card/CardRoot.web.tsx
+++ b/packages/blade/src/components/Card/CardRoot.web.tsx
@@ -9,10 +9,12 @@ import { useIsMobile } from '~utils/useIsMobile';
 
 const StyledCardRoot = styled(BaseBox)<CardRootProps & { isPressed: boolean; isMobile: boolean }>(
   ({ theme, isSelected, isFocused, shouldScaleOnHover, isPressed, isMobile }) => {
-    const selectedColor = isSelected ? theme.colors.brand.primary[500] : 'transparent';
+    const selectedColor = isSelected ? theme.colors.surface.border.primary.normal : 'transparent';
     const selectedBorder = `0px 0px 0px ${theme.border.width.thicker}px ${selectedColor}`;
     //  focused state
-    const focusRing = isFocused ? `, 0px 0px 0px 4px ${theme.colors.brand.primary[400]}` : '';
+    const focusRing = isFocused
+      ? `, 0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`
+      : '';
 
     return {
       // Selected state
diff --git a/packages/blade/src/components/Card/CardSurface.native.tsx b/packages/blade/src/components/Card/CardSurface.native.tsx
index 1f6eb4867d0..19f031a1c18 100644
--- a/packages/blade/src/components/Card/CardSurface.native.tsx
+++ b/packages/blade/src/components/Card/CardSurface.native.tsx
@@ -3,36 +3,30 @@ import styled from 'styled-components/native';
 import BaseBox from '~components/Box/BaseBox';
 import type { BaseBoxProps } from '~components/Box/BaseBox';
 import type { Elevation } from '~tokens/global';
-import type { SurfaceLevels } from '~tokens/theme/theme';
 import { castNativeType } from '~utils';
 
 const CardSurfaceStyled = styled(BaseBox)<{
-  surfaceLevel: Exclude<SurfaceLevels, 1>;
   elevation: keyof Elevation;
-}>(({ surfaceLevel, elevation, theme }) => {
-  const backgroundColor = theme.colors.surface.background[`level${surfaceLevel}`].lowContrast;
+}>(({ elevation, theme }) => {
   return {
     width: '100%',
     display: 'flex',
     flexDirection: 'column',
     borderWidth: elevation === 'none' ? `${theme.border.width.thin}` : undefined,
     borderStyle: elevation === 'none' ? 'solid' : undefined,
-    borderColor:
-      elevation === 'none' ? `${theme.colors.surface.border.normal.lowContrast}` : undefined,
-    backgroundColor,
+    borderColor: elevation === 'none' ? `${theme.colors.surface.border.gray.muted}` : undefined,
   };
 });
 
 type CardSurfaceProps = {
   children: React.ReactNode;
-  surfaceLevel: Exclude<SurfaceLevels, 1>;
   elevation: keyof Elevation;
 } & Omit<BaseBoxProps, 'elevation'>;
 
 const CardSurface = ({
   children,
-  surfaceLevel,
   elevation,
+  backgroundColor,
   onTouchEnd,
   onTouchStart,
   onPointerDown,
@@ -43,7 +37,7 @@ const CardSurface = ({
   return (
     <CardSurfaceStyled
       {...props}
-      surfaceLevel={surfaceLevel}
+      backgroundColor={backgroundColor}
       elevation={elevation}
       onPointerEnter={castNativeType(onPointerEnter)}
       onPointerDown={castNativeType(onPointerDown)}
diff --git a/packages/blade/src/components/Card/CardSurface.web.tsx b/packages/blade/src/components/Card/CardSurface.web.tsx
index 68e3f56e9a7..acefc3eb35f 100644
--- a/packages/blade/src/components/Card/CardSurface.web.tsx
+++ b/packages/blade/src/components/Card/CardSurface.web.tsx
@@ -1,23 +1,17 @@
 import styled from 'styled-components';
 import BaseBox from '~components/Box/BaseBox';
 
-const CardSurface = styled(BaseBox)<{ surfaceLevel: 2 | 3 }>(
-  ({ surfaceLevel, elevation, theme }) => {
-    const backgroundColor = theme.colors.surface.background[`level${surfaceLevel}`].lowContrast;
-
-    return {
-      width: '100%',
-      display: 'flex',
-      position: 'relative',
-      flexDirection: 'column',
-      borderWidth: elevation === 'none' ? `${theme.border.width.thin}` : undefined,
-      borderStyle: elevation === 'none' ? 'solid' : undefined,
-      borderColor:
-        elevation === 'none' ? `${theme.colors.surface.border.normal.lowContrast}` : undefined,
-      backgroundColor,
-      boxSizing: 'border-box',
-    };
-  },
-);
+const CardSurface = styled(BaseBox)(({ elevation, theme }) => {
+  return {
+    width: '100%',
+    display: 'flex',
+    position: 'relative',
+    flexDirection: 'column',
+    borderWidth: elevation === 'none' ? `${theme.border.width.thin}` : undefined,
+    borderStyle: elevation === 'none' ? 'solid' : undefined,
+    borderColor: elevation === 'none' ? `${theme.colors.surface.border.gray.muted}` : undefined,
+    boxSizing: 'border-box',
+  };
+});
 
 export { CardSurface };
diff --git a/packages/blade/src/components/Card/__tests__/Card.native.test.tsx b/packages/blade/src/components/Card/__tests__/Card.native.test.tsx
index 535aa35e2b7..b40f416fd3f 100644
--- a/packages/blade/src/components/Card/__tests__/Card.native.test.tsx
+++ b/packages/blade/src/components/Card/__tests__/Card.native.test.tsx
@@ -23,7 +23,7 @@ import BaseBox from '~components/Box/BaseBox';
 describe('<Card />', () => {
   it('should render a plain Card', () => {
     const { toJSON } = renderWithTheme(
-      <Card surfaceLevel={3} elevation="highRaised">
+      <Card backgroundColor="surface.background.gray.moderate" elevation="highRaised">
         <CardBody>
           <Text>Plain Card</Text>
         </CardBody>
@@ -131,7 +131,7 @@ describe('<Card />', () => {
             <CardHeaderLeading
               title={cardTitle}
               subtitle={cardSubtitle}
-              prefix={<InfoIcon color="action.icon.primary.default" size="xsmall" />}
+              prefix={<InfoIcon color="interactive.icon.staticWhite.normal" size="xsmall" />}
             />
           </CardHeader>
         </Card>,
@@ -163,7 +163,7 @@ describe('<Card />', () => {
         </Card>,
       ),
     ).toThrow(
-      '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual',
+      '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual',
     );
     mockConsoleError.mockRestore();
   });
diff --git a/packages/blade/src/components/Card/__tests__/Card.web.test.tsx b/packages/blade/src/components/Card/__tests__/Card.web.test.tsx
index 4ca682772e9..43e463fb159 100644
--- a/packages/blade/src/components/Card/__tests__/Card.web.test.tsx
+++ b/packages/blade/src/components/Card/__tests__/Card.web.test.tsx
@@ -24,7 +24,7 @@ import { Badge } from '~components/Badge';
 describe('<Card />', () => {
   it('should render a plain Card', () => {
     const { container } = renderWithTheme(
-      <Card surfaceLevel={3} elevation="highRaised">
+      <Card backgroundColor="surface.background.gray.moderate" elevation="highRaised">
         <CardBody>Plain Card</CardBody>
       </Card>,
     );
@@ -128,7 +128,7 @@ describe('<Card />', () => {
             <CardHeaderLeading
               title={cardTitle}
               subtitle={cardSubtitle}
-              prefix={<InfoIcon color="action.icon.primary.default" size="xsmall" />}
+              prefix={<InfoIcon color="interactive.icon.staticWhite.normal" size="xsmall" />}
             />
           </CardHeader>
         </Card>,
@@ -160,7 +160,7 @@ describe('<Card />', () => {
         </Card>,
       ),
     ).toThrow(
-      '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual',
+      '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual',
     );
     mockConsoleError.mockRestore();
   });
diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap
index 92121b48c01..498dd46c4f2 100644
--- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap
+++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap
@@ -29,12 +29,14 @@ exports[`<Card /> should render a Card with Footer 1`] = `
     }
   >
     <View
+      backgroundColor="surface.background.gray.intense"
       borderRadius="medium"
       data-blade-component="base-box"
       elevation="lowRaised"
       style={
         [
           {
+            "backgroundColor": "hsla(0, 0%, 100%, 1)",
             "borderRadius": 4,
             "paddingBottom": 24,
             "paddingLeft": 24,
@@ -43,18 +45,17 @@ exports[`<Card /> should render a Card with Footer 1`] = `
             "textAlign": "left",
           },
           {
-            "elevation": 4,
-            "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+            "elevation": 8,
+            "shadowColor": "hsla(217, 56%, 17%, 0.4)",
             "shadowOffset": {
-              "height": 3,
+              "height": 2,
               "width": 0,
             },
-            "shadowOpacity": 0.12,
-            "shadowRadius": 2,
+            "shadowOpacity": 0.2,
+            "shadowRadius": 4,
           },
           [
             {
-              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "display": "flex",
               "flexDirection": "column",
               "width": "100%",
@@ -62,7 +63,6 @@ exports[`<Card /> should render a Card with Footer 1`] = `
           ],
         ]
       }
-      surfaceLevel={2}
       textAlign="left"
     >
       <View
@@ -75,7 +75,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={100}
@@ -85,11 +85,12 @@ exports[`<Card /> should render a Card with Footer 1`] = `
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -112,38 +113,27 @@ exports[`<Card /> should render a Card with Footer 1`] = `
         style={
           [
             {
-              "marginTop": "auto",
+              "marginTop": 12,
             },
           ]
         }
       >
         <View
-          data-blade-component="base-box"
-          style={
-            [
-              {
-                "marginTop": 24,
-              },
-            ]
-          }
-        />
-        <View
-          borderBottomColor="surface.border.normal.lowContrast"
+          borderBottomColor="surface.border.gray.muted"
           borderPosition="borderBottom"
-          borderWidth="none"
           data-blade-component="divider"
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
             [
               {
-                "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                "borderStyle": "solid",
-                "borderWidth": 0,
+                "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                "borderBottomStyle": "solid",
               },
               {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
+                "borderWidth": 0,
                 "flexGrow": 1,
               },
             ]
@@ -163,7 +153,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                 "display": "flex",
                 "flexDirection": "column",
                 "justifyContent": "space-between",
-                "marginTop": 24,
+                "paddingTop": 12,
               },
             ]
           }
@@ -181,21 +171,22 @@ exports[`<Card /> should render a Card with Footer 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
               fontStyle="normal"
-              fontWeight="bold"
+              fontWeight="semibold"
               lineHeight={100}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
+                    "fontWeight": "600",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -214,22 +205,23 @@ exports[`<Card /> should render a Card with Footer 1`] = `
             </Text>
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.subtle"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={75}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 26%, 34%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -294,9 +286,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                   }
                 }
                 accessible={true}
-                activeBackgroundColor="hsla(218, 89%, 51%, 0.32)"
-                activeBorderColor="hsla(218, 89%, 51%, 1)"
-                borderRadius="2px"
+                borderRadius="4px"
                 borderWidth="1px"
                 buttonPaddingBottom="0px"
                 buttonPaddingLeft="20px"
@@ -304,14 +294,14 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                 buttonPaddingTop="0px"
                 collapsable={false}
                 data-blade-component="button"
-                defaultBackgroundColor="hsla(218, 89%, 51%, 0)"
-                defaultBorderColor="hsla(218, 89%, 51%, 1)"
-                focusBackgroundColor="hsla(218, 89%, 51%, 0.18)"
-                focusBorderColor="hsla(218, 89%, 51%, 1)"
-                focusRingColor="hsla(218, 89%, 51%, 0.18)"
+                defaultBackgroundColor="hsla(0, 0%, 100%, 0)"
+                defaultBorderColor="hsla(227, 100%, 59%, 1)"
+                focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+                focusBorderColor="hsla(227, 100%, 59%, 1)"
+                focusRingColor="hsla(227, 100%, 59%, 0.18)"
                 focusable={true}
-                hoverBackgroundColor="hsla(218, 89%, 51%, 0.09)"
-                hoverBorderColor="hsla(218, 89%, 51%, 1)"
+                hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
+                hoverBorderColor="hsla(227, 100%, 59%, 1)"
                 isFullWidth={true}
                 isLoading={false}
                 minHeight="36px"
@@ -332,15 +322,16 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                     {
                       "alignItems": "center",
                       "alignSelf": "center",
-                      "backgroundColor": "hsla(218, 89%, 51%, 0)",
-                      "borderColor": "hsla(218, 89%, 51%, 1)",
-                      "borderRadius": 2,
+                      "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                      "borderColor": "hsla(227, 100%, 59%, 1)",
+                      "borderRadius": 4,
                       "borderStyle": "solid",
                       "borderWidth": 1,
                       "cursor": "pointer",
                       "display": "flex",
                       "justifyContent": "center",
                       "minHeight": 36,
+                      "overflow": "hidden",
                       "paddingBottom": 0,
                       "paddingLeft": 20,
                       "paddingRight": 20,
@@ -351,8 +342,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                       "width": "100%",
                     },
                     {
-                      "backgroundColor": "hsla(218, 89%, 51%, 0)",
-                      "borderColor": "hsla(218, 89%, 51%, 1)",
+                      "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                      "borderColor": "hsla(227, 100%, 59%, 1)",
                     },
                   ]
                 }
@@ -375,28 +366,31 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                         "flexGrow": 1,
                         "flexShrink": 1,
                         "justifyContent": "center",
+                        "zIndex": 1,
                       },
                       {
                         "opacity": 1,
                       },
                     ]
                   }
+                  zIndex={1}
                 >
                   <Text
                     accessible={true}
-                    color="action.text.secondary.default"
+                    color="interactive.text.primary.subtle"
                     data-blade-component="base-text"
                     fontSize={100}
-                    fontWeight="bold"
+                    fontWeight="medium"
                     lineHeight={100}
                     style={
                       [
                         {
-                          "color": "hsla(218, 89%, 51%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(227, 100%, 59%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 14,
                           "fontStyle": "normal",
-                          "fontWeight": "700",
+                          "fontWeight": "500",
+                          "letterSpacing": 0,
                           "lineHeight": 20,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -459,24 +453,22 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                   }
                 }
                 accessible={true}
-                activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-                activeBorderColor="hsla(230, 100%, 42%, 1)"
-                borderRadius="2px"
-                borderWidth="1px"
+                borderRadius="4px"
+                borderWidth="0px"
                 buttonPaddingBottom="0px"
                 buttonPaddingLeft="20px"
                 buttonPaddingRight="20px"
                 buttonPaddingTop="0px"
                 collapsable={false}
                 data-blade-component="button"
-                defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-                defaultBorderColor="hsla(218, 89%, 51%, 1)"
-                focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-                focusBorderColor="hsla(227, 100%, 45%, 1)"
-                focusRingColor="hsla(218, 89%, 51%, 0.18)"
+                defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+                defaultBorderColor="hsla(227, 100%, 59%, 1)"
+                focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+                focusBorderColor="hsla(227, 100%, 59%, 1)"
+                focusRingColor="hsla(227, 100%, 59%, 0.18)"
                 focusable={true}
-                hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-                hoverBorderColor="hsla(223, 95%, 48%, 1)"
+                hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+                hoverBorderColor="hsla(227, 100%, 59%, 1)"
                 isFullWidth={true}
                 isLoading={false}
                 minHeight="36px"
@@ -497,15 +489,16 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                     {
                       "alignItems": "center",
                       "alignSelf": "center",
-                      "backgroundColor": "hsla(218, 89%, 51%, 1)",
-                      "borderColor": "hsla(218, 89%, 51%, 1)",
-                      "borderRadius": 2,
+                      "backgroundColor": "hsla(227, 100%, 59%, 1)",
+                      "borderColor": "hsla(227, 100%, 59%, 1)",
+                      "borderRadius": 4,
                       "borderStyle": "solid",
-                      "borderWidth": 1,
+                      "borderWidth": 0,
                       "cursor": "pointer",
                       "display": "flex",
                       "justifyContent": "center",
                       "minHeight": 36,
+                      "overflow": "hidden",
                       "paddingBottom": 0,
                       "paddingLeft": 20,
                       "paddingRight": 20,
@@ -516,8 +509,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                       "width": "100%",
                     },
                     {
-                      "backgroundColor": "hsla(218, 89%, 51%, 1)",
-                      "borderColor": "hsla(218, 89%, 51%, 1)",
+                      "backgroundColor": "hsla(227, 100%, 59%, 1)",
+                      "borderColor": "hsla(227, 100%, 59%, 1)",
                     },
                   ]
                 }
@@ -540,28 +533,31 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                         "flexGrow": 1,
                         "flexShrink": 1,
                         "justifyContent": "center",
+                        "zIndex": 1,
                       },
                       {
                         "opacity": 1,
                       },
                     ]
                   }
+                  zIndex={1}
                 >
                   <Text
                     accessible={true}
-                    color="action.text.primary.default"
+                    color="interactive.text.onPrimary.normal"
                     data-blade-component="base-text"
                     fontSize={100}
-                    fontWeight="bold"
+                    fontWeight="medium"
                     lineHeight={100}
                     style={
                       [
                         {
                           "color": "hsla(0, 0%, 100%, 1)",
-                          "fontFamily": "Lato",
+                          "fontFamily": "Inter",
                           "fontSize": 14,
                           "fontStyle": "normal",
-                          "fontWeight": "700",
+                          "fontWeight": "500",
+                          "letterSpacing": 0,
                           "lineHeight": 20,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -620,12 +616,14 @@ exports[`<Card /> should render a Card with Header 1`] = `
     }
   >
     <View
+      backgroundColor="surface.background.gray.intense"
       borderRadius="medium"
       data-blade-component="base-box"
       elevation="lowRaised"
       style={
         [
           {
+            "backgroundColor": "hsla(0, 0%, 100%, 1)",
             "borderRadius": 4,
             "paddingBottom": 24,
             "paddingLeft": 24,
@@ -634,18 +632,17 @@ exports[`<Card /> should render a Card with Header 1`] = `
             "textAlign": "left",
           },
           {
-            "elevation": 4,
-            "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+            "elevation": 8,
+            "shadowColor": "hsla(217, 56%, 17%, 0.4)",
             "shadowOffset": {
-              "height": 3,
+              "height": 2,
               "width": 0,
             },
-            "shadowOpacity": 0.12,
-            "shadowRadius": 2,
+            "shadowOpacity": 0.2,
+            "shadowRadius": 4,
           },
           [
             {
-              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "display": "flex",
               "flexDirection": "column",
               "width": "100%",
@@ -653,7 +650,6 @@ exports[`<Card /> should render a Card with Header 1`] = `
           ],
         ]
       }
-      surfaceLevel={2}
       textAlign="left"
     >
       <View
@@ -661,7 +657,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
         style={
           [
             {
-              "marginBottom": 24,
+              "marginBottom": 12,
             },
           ]
         }
@@ -677,7 +673,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 "display": "flex",
                 "flexDirection": "row",
                 "justifyContent": "space-between",
-                "marginBottom": 24,
+                "paddingBottom": 12,
               },
             ]
           }
@@ -715,12 +711,12 @@ exports[`<Card /> should render a Card with Header 1`] = `
               <RNSVGSvgView
                 accessibilityElementsHidden={true}
                 align="xMidYMid"
-                bbHeight="24px"
-                bbWidth="24px"
+                bbHeight="20px"
+                bbWidth="20px"
                 data-blade-component="icon"
                 fill="none"
                 focusable={false}
-                height="24px"
+                height="20px"
                 importantForAccessibility="no-hide-descendants"
                 meetOrSlice={0}
                 minX={0}
@@ -736,14 +732,14 @@ exports[`<Card /> should render a Card with Header 1`] = `
                     ],
                     {
                       "flex": 0,
-                      "height": 24,
-                      "width": 24,
+                      "height": 20,
+                      "width": 20,
                     },
                   ]
                 }
                 vbHeight={24}
                 vbWidth={24}
-                width="24px"
+                width="20px"
               >
                 <RNSVGGroup
                   fill={null}
@@ -755,7 +751,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 >
                   <RNSVGPath
                     d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                    fill={4279445060}
+                    fill={4279838777}
                     propList={
                       [
                         "fill",
@@ -764,7 +760,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                   />
                   <RNSVGPath
                     d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                    fill={4279445060}
+                    fill={4279838777}
                     propList={
                       [
                         "fill",
@@ -774,7 +770,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                   <RNSVGPath
                     clipRule={0}
                     d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                    fill={4279445060}
+                    fill={4279838777}
                     fillRule={0}
                     propList={
                       [
@@ -814,23 +810,23 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 }
               >
                 <Text
-                  accessibilityRole="header"
                   accessible={true}
-                  color="surface.text.normal.lowContrast"
-                  data-blade-component="heading"
+                  color="surface.text.gray.normal"
+                  data-blade-component="text"
                   fontFamily="text"
                   fontSize={200}
                   fontStyle="normal"
-                  fontWeight="bold"
-                  lineHeight={300}
+                  fontWeight="semibold"
+                  lineHeight={200}
                   style={
                     [
                       {
-                        "color": "hsla(217, 56%, 17%, 1)",
-                        "fontFamily": "Lato",
+                        "color": "hsla(212, 39%, 16%, 1)",
+                        "fontFamily": "Inter",
                         "fontSize": 16,
                         "fontStyle": "normal",
-                        "fontWeight": "700",
+                        "fontWeight": "600",
+                        "letterSpacing": 0,
                         "lineHeight": 24,
                         "marginBottom": 0,
                         "marginLeft": 0,
@@ -869,18 +865,20 @@ exports[`<Card /> should render a Card with Header 1`] = `
                     }
                   >
                     <View
-                      backgroundColor="feedback.background.neutral.lowContrast"
+                      backgroundColor="feedback.background.neutral.subtle"
                       data-blade-component="base-box"
+                      minHeight="20px"
                       platform="onMobile"
                       size="medium"
                       style={
                         [
                           {
-                            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+                            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                            "minHeight": 20,
                           },
                           {
                             "alignSelf": "center",
-                            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+                            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                             "borderRadius": 9999,
                             "display": "flex",
                             "flexWrap": "nowrap",
@@ -904,33 +902,32 @@ exports[`<Card /> should render a Card with Header 1`] = `
                               "flexDirection": "row",
                               "justifyContent": "center",
                               "overflow": "hidden",
-                              "paddingBottom": 2,
                               "paddingLeft": 8,
                               "paddingRight": 8,
-                              "paddingTop": 2,
                             },
                           ]
                         }
                       >
                         <Text
                           accessible={true}
-                          color="feedback.text.neutral.lowContrast"
+                          color="feedback.text.neutral.intense"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={75}
                           fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={50}
+                          fontWeight="medium"
+                          lineHeight={75}
                           numberOfLines={1}
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 33%, 21%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 12,
                                 "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "lineHeight": 16,
+                                "fontWeight": "500",
+                                "letterSpacing": 0,
+                                "lineHeight": 18,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
                                 "marginRight": 0,
@@ -955,22 +952,23 @@ exports[`<Card /> should render a Card with Header 1`] = `
               </View>
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.subtle"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={75}
                 fontStyle="normal"
                 fontWeight="regular"
-                lineHeight={50}
+                lineHeight={75}
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(211, 26%, 34%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 12,
                       "fontStyle": "normal",
                       "fontWeight": "400",
-                      "lineHeight": 16,
+                      "letterSpacing": 0,
+                      "lineHeight": 18,
                       "marginBottom": 0,
                       "marginLeft": 0,
                       "marginRight": 0,
@@ -1013,18 +1011,20 @@ exports[`<Card /> should render a Card with Header 1`] = `
               }
             >
               <View
-                backgroundColor="feedback.background.neutral.lowContrast"
+                backgroundColor="feedback.background.neutral.subtle"
                 data-blade-component="base-box"
+                height="20px"
                 size="medium"
                 style={
                   [
                     {
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                      "height": 20,
                       "textAlign": "left",
                     },
                     {
                       "alignSelf": "center",
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                       "borderRadius": 9999,
                       "display": "flex",
                       "flexWrap": "nowrap",
@@ -1048,33 +1048,32 @@ exports[`<Card /> should render a Card with Header 1`] = `
                         "flexDirection": "row",
                         "justifyContent": "center",
                         "overflow": "hidden",
-                        "paddingBottom": 2,
                         "paddingLeft": 8,
                         "paddingRight": 8,
-                        "paddingTop": 2,
                       },
                     ]
                   }
                 >
                   <Text
                     accessible={true}
-                    color="feedback.text.neutral.lowContrast"
+                    color="feedback.text.neutral.intense"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={75}
                     fontStyle="normal"
-                    fontWeight="regular"
-                    lineHeight={50}
+                    fontWeight="medium"
+                    lineHeight={75}
                     numberOfLines={1}
                     style={
                       [
                         {
-                          "color": "hsla(216, 27%, 36%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(211, 33%, 21%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 12,
                           "fontStyle": "normal",
-                          "fontWeight": "400",
-                          "lineHeight": 16,
+                          "fontWeight": "500",
+                          "letterSpacing": 0,
+                          "lineHeight": 18,
                           "marginBottom": 0,
                           "marginLeft": 0,
                           "marginRight": 0,
@@ -1096,22 +1095,21 @@ exports[`<Card /> should render a Card with Header 1`] = `
           </View>
         </View>
         <View
-          borderBottomColor="surface.border.normal.lowContrast"
+          borderBottomColor="surface.border.gray.muted"
           borderPosition="borderBottom"
-          borderWidth="none"
           data-blade-component="divider"
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
             [
               {
-                "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                "borderStyle": "solid",
-                "borderWidth": 0,
+                "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                "borderBottomStyle": "solid",
               },
               {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
+                "borderWidth": 0,
                 "flexGrow": 1,
               },
             ]
@@ -1129,7 +1127,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={100}
@@ -1139,11 +1137,12 @@ exports[`<Card /> should render a Card with Header 1`] = `
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -1195,12 +1194,14 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
     }
   >
     <View
+      backgroundColor="surface.background.gray.intense"
       borderRadius="medium"
       data-blade-component="base-box"
       elevation="lowRaised"
       style={
         [
           {
+            "backgroundColor": "hsla(0, 0%, 100%, 1)",
             "borderRadius": 4,
             "paddingBottom": 0,
             "paddingLeft": 0,
@@ -1209,18 +1210,17 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
             "textAlign": "left",
           },
           {
-            "elevation": 4,
-            "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+            "elevation": 8,
+            "shadowColor": "hsla(217, 56%, 17%, 0.4)",
             "shadowOffset": {
-              "height": 3,
+              "height": 2,
               "width": 0,
             },
-            "shadowOpacity": 0.12,
-            "shadowRadius": 2,
+            "shadowOpacity": 0.2,
+            "shadowRadius": 4,
           },
           [
             {
-              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "display": "flex",
               "flexDirection": "column",
               "width": "100%",
@@ -1228,7 +1228,6 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
           ],
         ]
       }
-      surfaceLevel={2}
       textAlign="left"
     >
       <View
@@ -1275,12 +1274,14 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
     }
   >
     <View
+      backgroundColor="surface.background.gray.intense"
       borderRadius="medium"
       data-blade-component="base-box"
       elevation="none"
       style={
         [
           {
+            "backgroundColor": "hsla(0, 0%, 100%, 1)",
             "borderRadius": 4,
             "paddingBottom": 24,
             "paddingLeft": 24,
@@ -1300,8 +1301,7 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
           },
           [
             {
-              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-              "borderColor": "hsla(216, 15%, 54%, 0.18)",
+              "borderColor": "hsla(211, 20%, 52%, 0.18)",
               "borderStyle": "solid",
               "borderWidth": 1,
               "display": "flex",
@@ -1311,7 +1311,6 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
           ],
         ]
       }
-      surfaceLevel={2}
       textAlign="left"
     >
       <View
@@ -1324,7 +1323,7 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={100}
@@ -1334,11 +1333,12 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -1390,12 +1390,14 @@ exports[`<Card /> should render a plain Card 1`] = `
     }
   >
     <View
+      backgroundColor="surface.background.gray.moderate"
       borderRadius="medium"
       data-blade-component="base-box"
       elevation="highRaised"
       style={
         [
           {
+            "backgroundColor": "hsla(210, 40%, 98%, 1)",
             "borderRadius": 4,
             "paddingBottom": 24,
             "paddingLeft": 24,
@@ -1404,18 +1406,17 @@ exports[`<Card /> should render a plain Card 1`] = `
             "textAlign": "left",
           },
           {
-            "elevation": 26,
-            "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+            "elevation": 24,
+            "shadowColor": "hsla(217, 56%, 17%, 0.8)",
             "shadowOffset": {
-              "height": 18,
+              "height": 6,
               "width": 0,
             },
-            "shadowOpacity": 0.2,
-            "shadowRadius": 12,
+            "shadowOpacity": 0.16,
+            "shadowRadius": 14,
           },
           [
             {
-              "backgroundColor": "hsla(220, 27%, 98%, 1)",
               "display": "flex",
               "flexDirection": "column",
               "width": "100%",
@@ -1423,7 +1424,6 @@ exports[`<Card /> should render a plain Card 1`] = `
           ],
         ]
       }
-      surfaceLevel={3}
       textAlign="left"
     >
       <View
@@ -1436,7 +1436,7 @@ exports[`<Card /> should render a plain Card 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={100}
@@ -1446,11 +1446,12 @@ exports[`<Card /> should render a plain Card 1`] = `
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap
index 3ffcce18649..c4bc724041f 100644
--- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Card /> should render a Card with Header & Footer 1`] = `"<div id="root"><div data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA tmnBv"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 hMUdcd dZToQf"><div data-blade-component="card-header" class="BaseBox-bmPWx hwEOtF"><div data-blade-component="base-box" class="BaseBox-bmPWx LwGxF"><div data-blade-component="base-box" class="BaseBox-bmPWx gTkVyh"><div data-blade-component="base-box" class="BaseBox-bmPWx zthMO"><svg aria-hidden="true" data-blade-component="icon" height="24px" viewBox="0 0 24 24" width="24px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(217, 56%, 17%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(217, 56%, 17%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx ihuchP"><div data-blade-component="base-box" class="BaseBox-bmPWx mKtKh"><h6 class="StyledBaseText-dVBfTO iFUkNH" data-blade-component="heading">Card Header</h6><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 fCpzgd jxCTUO"><div data-blade-component="base-box" class="BaseBox-bmPWx dXvdMm"><p class="StyledBaseText-dVBfTO kSDYeK" data-blade-component="text">12</p></div></div></div></div></div><p class="StyledBaseText-dVBfTO bnhaMh" data-blade-component="text">Card subtitle</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bLJxIg"><div data-blade-component="badge" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 fxewIe fvgGAr"><div data-blade-component="base-box" class="BaseBox-bmPWx dXvdMm"><p class="StyledBaseText-dVBfTO hQvilN" data-blade-component="text">NEW</p></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div></div><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Plain Card</p></div><div data-blade-component="card-footer" class="BaseBox-bmPWx hwKFeE"><div data-blade-component="base-box" class="BaseBox-bmPWx kCBqep"></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div><div data-blade-component="base-box" class="BaseBox-bmPWx kXKtUB"><div data-blade-component="base-box" class="BaseBox-bmPWx edNXIx"><p class="StyledBaseText-dVBfTO dKVmDg" data-blade-component="text">Card Footer</p><p class="StyledBaseText-dVBfTO frQdgq" data-blade-component="text">Card footer subtitle</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx jwvbFL"><div data-blade-component="base-box" class="BaseBox-bmPWx brkcZZ"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 cfBjBp"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div class="StyledBaseText-dVBfTO iPAIis" data-blade-component="base-text">Delete</div></div></button></div><div data-blade-component="base-box" class="BaseBox-bmPWx kVSNdI"></div><div data-blade-component="base-box" class="BaseBox-bmPWx brkcZZ"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 cVxbWK"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div class="StyledBaseText-dVBfTO hcXerP" data-blade-component="base-text">Save</div></div></button></div></div></div></div></div></div></div>"`;
+exports[`<Card /> should render a Card with Header & Footer 1`] = `"<div id="root"><div data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA tmnBv"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 bcWxdc cGyVzL"><div data-blade-component="card-header" class="BaseBox-bmPWx dVKABc"><div data-blade-component="base-box" class="BaseBox-bmPWx biCNyr"><div data-blade-component="base-box" class="BaseBox-bmPWx gTkVyh"><div data-blade-component="base-box" class="BaseBox-bmPWx zthMO"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(212, 39%, 16%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(212, 39%, 16%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(212, 39%, 16%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx ihuchP"><div data-blade-component="base-box" class="BaseBox-bmPWx mKtKh"><p class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">Card Header</p><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 cTQuSp dbfGbJ"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO cqdhzg" data-blade-component="text">12</p></div></div></div></div></div><p class="StyledBaseText-dVBfTO jqkpTq" data-blade-component="text">Card subtitle</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bLJxIg"><div data-blade-component="badge" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 bgUwrl bMPocw"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO TgZUv" data-blade-component="text">NEW</p></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Plain Card</p></div><div data-blade-component="card-footer" class="BaseBox-bmPWx cdqgjM"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="base-box" class="BaseBox-bmPWx jjVlQX"><div data-blade-component="base-box" class="BaseBox-bmPWx edNXIx"><p class="StyledBaseText-dVBfTO hWcSGL" data-blade-component="text">Card Footer</p><p class="StyledBaseText-dVBfTO bLchiZ" data-blade-component="text">Card footer subtitle</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx jwvbFL"><div data-blade-component="base-box" class="BaseBox-bmPWx brkcZZ"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dJxnSi"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO dtZpXd" data-blade-component="base-text">Delete</div></div></button></div><div data-blade-component="base-box" class="BaseBox-bmPWx kVSNdI"></div><div data-blade-component="base-box" class="BaseBox-bmPWx brkcZZ"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 hHhyBo"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO bewYNq" data-blade-component="base-text">Save</div></div></button></div></div></div></div></div></div></div>"`;
 
 exports[`<Card /> should render a Card with Header & Footer 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -11,12 +11,13 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c4.c4.c4.c4.c4 {
-  margin-bottom: 24px;
+  margin-bottom: 12px;
 }
 
 .c5.c5.c5.c5.c5 {
@@ -31,7 +32,7 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  margin-bottom: 24px;
+  padding-bottom: 12px;
 }
 
 .c6.c6.c6.c6.c6 {
@@ -91,7 +92,8 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 }
 
 .c13.c13.c13.c13.c13 {
-  background-color: hsla(216,15%,54%,0.09);
+  min-height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c15.c15.c15.c15.c15 {
@@ -111,8 +113,6 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
@@ -125,24 +125,20 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 
 .c19.c19.c19.c19.c19 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c22.c22.c22.c22.c22 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c25.c25.c25.c25.c25 {
-  margin-top: auto;
+  margin-top: 12px;
 }
 
 .c26.c26.c26.c26.c26 {
-  margin-top: 24px;
-}
-
-.c27.c27.c27.c27.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -158,14 +154,14 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  margin-top: 24px;
+  padding-top: 12px;
 }
 
-.c28.c28.c28.c28.c28 {
+.c27.c27.c27.c27.c27 {
   text-align: left;
 }
 
-.c31.c31.c31.c31.c31 {
+.c30.c30.c30.c30.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -180,14 +176,14 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   margin-left: 16px;
 }
 
-.c32.c32.c32.c32.c32 {
+.c31.c31.c31.c31.c31 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
 }
 
-.c34.c34.c34.c34.c34 {
+.c33.c33.c33.c33.c33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -206,9 +202,10 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
-.c37.c37.c37.c37.c37 {
+.c36.c36.c36.c36.c36 {
   margin-left: 16px;
 }
 
@@ -222,7 +219,6 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -248,7 +244,7 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 }
 
 .c20.c20.c20.c20.c20 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -263,27 +259,35 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c16.c16.c16.c16.c16 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -295,28 +299,36 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 }
 
 .c17.c17.c17.c17.c17 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c21.c21.c21.c21.c21 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -327,80 +339,100 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 }
 
 .c24.c24.c24.c24.c24 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c29.c29.c29.c29.c29 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c28.c28.c28.c28.c28 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c30.c30.c30.c30.c30 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c29.c29.c29.c29.c29 {
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c36.c36.c36.c36.c36 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c35.c35.c35.c35.c35 {
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
-.c39.c39.c39.c39.c39 {
+.c38.c38.c38.c38.c38 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
-.c33.c33.c33.c33.c33 {
+.c32.c32.c32.c32.c32 {
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,0);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -416,6 +448,7 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -429,40 +462,40 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   position: relative;
 }
 
-.c33.c33.c33.c33.c33:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-color: hsla(218,89%,51%,1);
+.c32.c32.c32.c32.c32:hover {
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
-.c33.c33.c33.c33.c33:active {
-  background-color: hsla(218,89%,51%,0.32);
-  border-color: hsla(218,89%,51%,1);
+.c32.c32.c32.c32.c32:active {
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
-.c33.c33.c33.c33.c33:focus-visible {
-  background-color: hsla(218,89%,51%,0.18);
-  border-color: hsla(218,89%,51%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+.c32.c32.c32.c32.c32:focus-visible {
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
-.c33.c33.c33.c33.c33 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+.c32.c32.c32.c32.c32 * {
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c38.c38.c38.c38.c38 {
+.c37.c37.c37.c37.c37 {
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -478,6 +511,7 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -491,38 +525,38 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
   position: relative;
 }
 
-.c38.c38.c38.c38.c38:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+.c37.c37.c37.c37.c37:hover {
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
-.c38.c38.c38.c38.c38:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+.c37.c37.c37.c37.c37:active {
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
-.c38.c38.c38.c38.c38:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+.c37.c37.c37.c37.c37:focus-visible {
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
-.c38.c38.c38.c38.c38 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+.c37.c37.c37.c37.c37 * {
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c35.c35.c35.c35.c35 {
+.c34.c34.c34.c34.c34 {
   opacity: 1;
 }
 
 .c14.c14.c14.c14.c14 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -538,6 +572,7 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 }
 
 .c23.c23.c23.c23.c23 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -548,31 +583,31 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 
 @media screen and (min-width:320px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -609,25 +644,25 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
                 class="Svgweb__StyledSvg-vcmjs8-0"
                 data-blade-component="icon"
                 fill="none"
-                height="24px"
+                height="20px"
                 viewBox="0 0 24 24"
-                width="24px"
+                width="20px"
               >
                 <path
                   d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                   data-blade-component="svg-path"
-                  fill="hsla(217, 56%, 17%, 1)"
+                  fill="hsla(212, 39%, 16%, 1)"
                 />
                 <path
                   d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                   data-blade-component="svg-path"
-                  fill="hsla(217, 56%, 17%, 1)"
+                  fill="hsla(212, 39%, 16%, 1)"
                 />
                 <path
                   clip-rule="evenodd"
                   d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                   data-blade-component="svg-path"
-                  fill="hsla(217, 56%, 17%, 1)"
+                  fill="hsla(212, 39%, 16%, 1)"
                   fill-rule="evenodd"
                 />
               </svg>
@@ -640,12 +675,12 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
                 class="c9"
                 data-blade-component="base-box"
               >
-                <h6
+                <p
                   class="c10"
-                  data-blade-component="heading"
+                  data-blade-component="text"
                 >
                   Card Header
-                </h6>
+                </p>
                 <div
                   class="c11"
                   data-blade-component="base-box"
@@ -729,56 +764,52 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
         class="c25"
         data-blade-component="card-footer"
       >
-        <div
-          class="c26"
-          data-blade-component="base-box"
-        />
         <div
           class="c22 c23"
           data-blade-component="divider"
           role="separator"
         />
         <div
-          class="c27"
+          class="c26"
           data-blade-component="base-box"
         >
           <div
-            class="c28"
+            class="c27"
             data-blade-component="base-box"
           >
             <p
-              class="c29"
+              class="c28"
               data-blade-component="text"
             >
               Card Footer
             </p>
             <p
-              class="c30"
+              class="c29"
               data-blade-component="text"
             >
               Card footer subtitle
             </p>
           </div>
           <div
-            class="c31"
+            class="c30"
             data-blade-component="base-box"
           >
             <div
-              class="c32"
+              class="c31"
               data-blade-component="base-box"
             >
               <button
-                class="c33"
+                class="c32"
                 data-blade-component="button"
                 role="button"
                 type="button"
               >
                 <div
-                  class="c34 c35"
+                  class="c33 c34"
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c36"
+                    class="c35"
                     data-blade-component="base-text"
                   >
                     Delete
@@ -787,25 +818,25 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
               </button>
             </div>
             <div
-              class="c37"
+              class="c36"
               data-blade-component="base-box"
             />
             <div
-              class="c32"
+              class="c31"
               data-blade-component="base-box"
             >
               <button
-                class="c38"
+                class="c37"
                 data-blade-component="button"
                 role="button"
                 type="button"
               >
                 <div
-                  class="c34 c35"
+                  class="c33 c34"
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c39"
+                    class="c38"
                     data-blade-component="base-text"
                   >
                     Save
@@ -821,7 +852,7 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
 </div>
 `;
 
-exports[`<Card /> should render a Interactive Card with href 1`] = `"<div id="root"><div href="https://google.com" data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA tmnBv"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 hMUdcd dZToQf"><a href="https://google.com" data-blade-component="card-link-overlay" aria-pressed="false" class="LinkOverlayweb__LinkOverlay-ugib1o-0 cmIkCR"></a><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Plain Card</p></div></div></div></div>"`;
+exports[`<Card /> should render a Interactive Card with href 1`] = `"<div id="root"><div href="https://google.com" data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA tmnBv"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 bcWxdc cGyVzL"><a href="https://google.com" data-blade-component="card-link-overlay" aria-pressed="false" class="LinkOverlayweb__LinkOverlay-ugib1o-0 cmIkCR"></a><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Plain Card</p></div></div></div></div>"`;
 
 exports[`<Card /> should render a Interactive Card with href 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -832,8 +863,9 @@ exports[`<Card /> should render a Interactive Card with href 2`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -846,7 +878,6 @@ exports[`<Card /> should render a Interactive Card with href 2`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -895,14 +926,18 @@ exports[`<Card /> should render a Interactive Card with href 2`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -942,7 +977,7 @@ exports[`<Card /> should render a Interactive Card with href 2`] = `
 </div>
 `;
 
-exports[`<Card /> should render a Interactive Card with onClick 1`] = `"<div id="root"><div data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA tmnBv"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 hMUdcd dZToQf"><button data-blade-component="card-link-overlay" aria-pressed="false" class="LinkOverlayweb__LinkOverlay-ugib1o-0 cmIkCR"></button><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Plain Card</p></div></div></div></div>"`;
+exports[`<Card /> should render a Interactive Card with onClick 1`] = `"<div id="root"><div data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA tmnBv"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 bcWxdc cGyVzL"><button data-blade-component="card-link-overlay" aria-pressed="false" class="LinkOverlayweb__LinkOverlay-ugib1o-0 cmIkCR"></button><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Plain Card</p></div></div></div></div>"`;
 
 exports[`<Card /> should render a Interactive Card with onClick 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -953,8 +988,9 @@ exports[`<Card /> should render a Interactive Card with onClick 2`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -967,7 +1003,6 @@ exports[`<Card /> should render a Interactive Card with onClick 2`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -1016,14 +1051,18 @@ exports[`<Card /> should render a Interactive Card with onClick 2`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap
index bc02f33390a..88e90f03d86 100644
--- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap
+++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap
@@ -9,25 +9,21 @@ exports[`<Card /> should render a Card with Footer 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c5.c5.c5.c5.c5 {
-  margin-top: auto;
+  margin-top: 12px;
 }
 
 .c6.c6.c6.c6.c6 {
-  margin-top: 24px;
-}
-
-.c7.c7.c7.c7.c7 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
-.c9.c9.c9.c9.c9 {
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -43,14 +39,14 @@ exports[`<Card /> should render a Card with Footer 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  margin-top: 24px;
+  padding-top: 12px;
 }
 
-.c10.c10.c10.c10.c10 {
+.c9.c9.c9.c9.c9 {
   text-align: left;
 }
 
-.c13.c13.c13.c13.c13 {
+.c12.c12.c12.c12.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -65,14 +61,14 @@ exports[`<Card /> should render a Card with Footer 1`] = `
   margin-left: 16px;
 }
 
-.c14.c14.c14.c14.c14 {
+.c13.c13.c13.c13.c13 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
 }
 
-.c16.c16.c16.c16.c16 {
+.c15.c15.c15.c15.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -91,9 +87,10 @@ exports[`<Card /> should render a Card with Footer 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
-.c19.c19.c19.c19.c19 {
+.c18.c18.c18.c18.c18 {
   margin-left: 16px;
 }
 
@@ -107,7 +104,6 @@ exports[`<Card /> should render a Card with Footer 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -133,80 +129,100 @@ exports[`<Card /> should render a Card with Footer 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c11.c11.c11.c11.c11 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c10.c10.c10.c10.c10 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c12.c12.c12.c12.c12 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c11.c11.c11.c11.c11 {
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c18.c18.c18.c18.c18 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c17.c17.c17.c17.c17 {
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
-.c21.c21.c21.c21.c21 {
+.c20.c20.c20.c20.c20 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
-.c15.c15.c15.c15.c15 {
+.c14.c14.c14.c14.c14 {
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,0);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(227,100%,59%,1);
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -222,6 +238,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -235,40 +252,40 @@ exports[`<Card /> should render a Card with Footer 1`] = `
   position: relative;
 }
 
-.c15.c15.c15.c15.c15:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-color: hsla(218,89%,51%,1);
+.c14.c14.c14.c14.c14:hover {
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
-.c15.c15.c15.c15.c15:active {
-  background-color: hsla(218,89%,51%,0.32);
-  border-color: hsla(218,89%,51%,1);
+.c14.c14.c14.c14.c14:active {
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
 }
 
-.c15.c15.c15.c15.c15:focus-visible {
-  background-color: hsla(218,89%,51%,0.18);
-  border-color: hsla(218,89%,51%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+.c14.c14.c14.c14.c14:focus-visible {
+  background-color: hsla(227,100%,59%,0.09);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
-.c15.c15.c15.c15.c15 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+.c14.c14.c14.c14.c14 * {
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c20.c20.c20.c20.c20 {
+.c19.c19.c19.c19.c19 {
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -284,6 +301,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -297,37 +315,38 @@ exports[`<Card /> should render a Card with Footer 1`] = `
   position: relative;
 }
 
-.c20.c20.c20.c20.c20:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+.c19.c19.c19.c19.c19:hover {
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
-.c20.c20.c20.c20.c20:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+.c19.c19.c19.c19.c19:active {
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
-.c20.c20.c20.c20.c20:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+.c19.c19.c19.c19.c19:focus-visible {
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
-.c20.c20.c20.c20.c20 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+.c19.c19.c19.c19.c19 * {
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c17.c17.c17.c17.c17 {
+.c16.c16.c16.c16.c16 {
   opacity: 1;
 }
 
-.c8.c8.c8.c8.c8 {
+.c7.c7.c7.c7.c7 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -337,32 +356,32 @@ exports[`<Card /> should render a Card with Footer 1`] = `
 }
 
 @media screen and (min-width:320px) {
-  .c7.c7.c7.c7.c7 {
-    border-style: solid;
+  .c6.c6.c6.c6.c6 {
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c7.c7.c7.c7.c7 {
-    border-style: solid;
+  .c6.c6.c6.c6.c6 {
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c7.c7.c7.c7.c7 {
-    border-style: solid;
+  .c6.c6.c6.c6.c6 {
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c7.c7.c7.c7.c7 {
-    border-style: solid;
+  .c6.c6.c6.c6.c6 {
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c7.c7.c7.c7.c7 {
-    border-style: solid;
+  .c6.c6.c6.c6.c6 {
+    border-bottom-style: solid;
   }
 }
 
@@ -392,55 +411,51 @@ exports[`<Card /> should render a Card with Footer 1`] = `
         data-blade-component="card-footer"
       >
         <div
-          class="c6"
-          data-blade-component="base-box"
-        />
-        <div
-          class="c7 c8"
+          class="c6 c7"
           data-blade-component="divider"
           role="separator"
         />
         <div
-          class="c9"
+          class="c8"
           data-blade-component="base-box"
         >
           <div
-            class="c10"
+            class="c9"
             data-blade-component="base-box"
           >
             <p
-              class="c11"
+              class="c10"
               data-blade-component="text"
             >
               Card Footer
             </p>
             <p
-              class="c12"
+              class="c11"
               data-blade-component="text"
             >
               Card footer subtitle
             </p>
           </div>
           <div
-            class="c13"
+            class="c12"
             data-blade-component="base-box"
           >
             <div
-              class="c14"
+              class="c13"
               data-blade-component="base-box"
             >
               <button
-                class="c15"
+                class="c14"
                 data-blade-component="button"
                 role="button"
                 type="button"
               >
                 <div
-                  class="c16 c17"
+                  class="c15 c16"
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c18"
+                    class="c17"
                     data-blade-component="base-text"
                   >
                     Delete
@@ -449,25 +464,25 @@ exports[`<Card /> should render a Card with Footer 1`] = `
               </button>
             </div>
             <div
-              class="c19"
+              class="c18"
               data-blade-component="base-box"
             />
             <div
-              class="c14"
+              class="c13"
               data-blade-component="base-box"
             >
               <button
-                class="c20"
+                class="c19"
                 data-blade-component="button"
                 role="button"
                 type="button"
               >
                 <div
-                  class="c16 c17"
+                  class="c15 c16"
                   data-blade-component="base-box"
                 >
                   <div
-                    class="c21"
+                    class="c20"
                     data-blade-component="base-text"
                   >
                     Save
@@ -492,12 +507,13 @@ exports[`<Card /> should render a Card with Header 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c4.c4.c4.c4.c4 {
-  margin-bottom: 24px;
+  margin-bottom: 12px;
 }
 
 .c5.c5.c5.c5.c5 {
@@ -512,7 +528,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  margin-bottom: 24px;
+  padding-bottom: 12px;
 }
 
 .c6.c6.c6.c6.c6 {
@@ -572,7 +588,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
 }
 
 .c13.c13.c13.c13.c13 {
-  background-color: hsla(216,15%,54%,0.09);
+  min-height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c15.c15.c15.c15.c15 {
@@ -592,8 +609,6 @@ exports[`<Card /> should render a Card with Header 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
@@ -606,13 +621,13 @@ exports[`<Card /> should render a Card with Header 1`] = `
 
 .c19.c19.c19.c19.c19 {
   text-align: left;
-  background-color: hsla(216,15%,54%,0.09);
+  height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c22.c22.c22.c22.c22 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c3.c3.c3.c3.c3 {
@@ -625,7 +640,6 @@ exports[`<Card /> should render a Card with Header 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -651,7 +665,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
 }
 
 .c20.c20.c20.c20.c20 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -666,27 +680,35 @@ exports[`<Card /> should render a Card with Header 1`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c16.c16.c16.c16.c16 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -698,28 +720,36 @@ exports[`<Card /> should render a Card with Header 1`] = `
 }
 
 .c17.c17.c17.c17.c17 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c21.c21.c21.c21.c21 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -730,20 +760,24 @@ exports[`<Card /> should render a Card with Header 1`] = `
 }
 
 .c24.c24.c24.c24.c24 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -759,6 +793,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
 }
 
 .c23.c23.c23.c23.c23 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -769,31 +804,31 @@ exports[`<Card /> should render a Card with Header 1`] = `
 
 @media screen and (min-width:320px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c22.c22.c22.c22.c22 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -828,25 +863,25 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 class="Svgweb__StyledSvg-vcmjs8-0"
                 data-blade-component="icon"
                 fill="none"
-                height="24px"
+                height="20px"
                 viewBox="0 0 24 24"
-                width="24px"
+                width="20px"
               >
                 <path
                   d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                   data-blade-component="svg-path"
-                  fill="hsla(217, 56%, 17%, 1)"
+                  fill="hsla(212, 39%, 16%, 1)"
                 />
                 <path
                   d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                   data-blade-component="svg-path"
-                  fill="hsla(217, 56%, 17%, 1)"
+                  fill="hsla(212, 39%, 16%, 1)"
                 />
                 <path
                   clip-rule="evenodd"
                   d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                   data-blade-component="svg-path"
-                  fill="hsla(217, 56%, 17%, 1)"
+                  fill="hsla(212, 39%, 16%, 1)"
                   fill-rule="evenodd"
                 />
               </svg>
@@ -859,12 +894,12 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 class="c9"
                 data-blade-component="base-box"
               >
-                <h6
+                <p
                   class="c10"
-                  data-blade-component="heading"
+                  data-blade-component="text"
                 >
                   Card Header
-                </h6>
+                </p>
                 <div
                   class="c11"
                   data-blade-component="base-box"
@@ -958,8 +993,9 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 0px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -972,7 +1008,6 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -1027,6 +1062,7 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
   box-shadow: none;
 }
@@ -1043,8 +1079,7 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
   flex-direction: column;
   border-width: 1;
   border-style: solid;
-  border-color: hsla(216,15%,54%,0.18);
-  background-color: hsla(0,0%,100%,1);
+  border-color: hsla(211,20%,52%,0.18);
   box-sizing: border-box;
 }
 
@@ -1099,8 +1134,9 @@ exports[`<Card /> should render a plain Card 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(210,40%,98%,1);
   border-radius: 4px;
-  box-shadow: 0 24px 48px -12px hsla(217,56%,17%,0.18);
+  box-shadow: 0px 16px 48px -4px hsla(217,56%,17%,0.18);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1113,7 +1149,6 @@ exports[`<Card /> should render a plain Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(220,27%,98%,1);
   box-sizing: border-box;
 }
 
diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap
index 02136cee31d..9cb16af2dba 100644
--- a/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap
+++ b/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap
@@ -69,12 +69,14 @@ exports[`<Card /> should render a clickable Card 1`] = `
       }
     >
       <View
+        backgroundColor="surface.background.gray.intense"
         borderRadius="medium"
         data-blade-component="base-box"
         elevation="lowRaised"
         style={
           [
             {
+              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderRadius": 4,
               "paddingBottom": 24,
               "paddingLeft": 24,
@@ -83,18 +85,17 @@ exports[`<Card /> should render a clickable Card 1`] = `
               "textAlign": "left",
             },
             {
-              "elevation": 4,
-              "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+              "elevation": 8,
+              "shadowColor": "hsla(217, 56%, 17%, 0.4)",
               "shadowOffset": {
-                "height": 3,
+                "height": 2,
                 "width": 0,
               },
-              "shadowOpacity": 0.12,
-              "shadowRadius": 2,
+              "shadowOpacity": 0.2,
+              "shadowRadius": 4,
             },
             [
               {
-                "backgroundColor": "hsla(0, 0%, 100%, 1)",
                 "display": "flex",
                 "flexDirection": "column",
                 "width": "100%",
@@ -102,7 +103,6 @@ exports[`<Card /> should render a clickable Card 1`] = `
             ],
           ]
         }
-        surfaceLevel={2}
         textAlign="left"
       >
         <View
@@ -182,7 +182,7 @@ exports[`<Card /> should render a interactive Card 1`] = `
             "display": "block",
           },
           {
-            "borderColor": "hsla(218, 89%, 51%, 1)",
+            "borderColor": "hsla(227, 100%, 59%, 1)",
             "borderStyle": "solid",
             "borderWidth": 2,
           },
@@ -190,12 +190,14 @@ exports[`<Card /> should render a interactive Card 1`] = `
       }
     >
       <View
+        backgroundColor="surface.background.gray.intense"
         borderRadius="medium"
         data-blade-component="base-box"
         elevation="lowRaised"
         style={
           [
             {
+              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderRadius": 4,
               "paddingBottom": 24,
               "paddingLeft": 24,
@@ -204,18 +206,17 @@ exports[`<Card /> should render a interactive Card 1`] = `
               "textAlign": "left",
             },
             {
-              "elevation": 4,
-              "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+              "elevation": 8,
+              "shadowColor": "hsla(217, 56%, 17%, 0.4)",
               "shadowOffset": {
-                "height": 3,
+                "height": 2,
                 "width": 0,
               },
-              "shadowOpacity": 0.12,
-              "shadowRadius": 2,
+              "shadowOpacity": 0.2,
+              "shadowRadius": 4,
             },
             [
               {
-                "backgroundColor": "hsla(0, 0%, 100%, 1)",
                 "display": "flex",
                 "flexDirection": "column",
                 "width": "100%",
@@ -223,7 +224,6 @@ exports[`<Card /> should render a interactive Card 1`] = `
             ],
           ]
         }
-        surfaceLevel={2}
         textAlign="left"
       >
         <View
@@ -312,12 +312,14 @@ exports[`<Card /> should render a linkable Card 1`] = `
       }
     >
       <View
+        backgroundColor="surface.background.gray.intense"
         borderRadius="medium"
         data-blade-component="base-box"
         elevation="lowRaised"
         style={
           [
             {
+              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderRadius": 4,
               "paddingBottom": 24,
               "paddingLeft": 24,
@@ -326,18 +328,17 @@ exports[`<Card /> should render a linkable Card 1`] = `
               "textAlign": "left",
             },
             {
-              "elevation": 4,
-              "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+              "elevation": 8,
+              "shadowColor": "hsla(217, 56%, 17%, 0.4)",
               "shadowOffset": {
-                "height": 3,
+                "height": 2,
                 "width": 0,
               },
-              "shadowOpacity": 0.12,
-              "shadowRadius": 2,
+              "shadowOpacity": 0.2,
+              "shadowRadius": 4,
             },
             [
               {
-                "backgroundColor": "hsla(0, 0%, 100%, 1)",
                 "display": "flex",
                 "flexDirection": "column",
                 "width": "100%",
@@ -345,7 +346,6 @@ exports[`<Card /> should render a linkable Card 1`] = `
             ],
           ]
         }
-        surfaceLevel={2}
         textAlign="left"
       >
         <View
@@ -434,12 +434,14 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
       }
     >
       <View
+        backgroundColor="surface.background.gray.intense"
         borderRadius="medium"
         data-blade-component="base-box"
         elevation="lowRaised"
         style={
           [
             {
+              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderRadius": 4,
               "paddingBottom": 24,
               "paddingLeft": 24,
@@ -448,18 +450,17 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
               "textAlign": "left",
             },
             {
-              "elevation": 4,
-              "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+              "elevation": 8,
+              "shadowColor": "hsla(217, 56%, 17%, 0.4)",
               "shadowOffset": {
-                "height": 3,
+                "height": 2,
                 "width": 0,
               },
-              "shadowOpacity": 0.12,
-              "shadowRadius": 2,
+              "shadowOpacity": 0.2,
+              "shadowRadius": 4,
             },
             [
               {
-                "backgroundColor": "hsla(0, 0%, 100%, 1)",
                 "display": "flex",
                 "flexDirection": "column",
                 "width": "100%",
@@ -467,7 +468,6 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
             ],
           ]
         }
-        surfaceLevel={2}
         textAlign="left"
       >
         <View
diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.web.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.web.test.tsx.snap
index a2ed1fe7ec1..60bde3908ae 100644
--- a/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.web.test.tsx.snap
+++ b/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.web.test.tsx.snap
@@ -9,8 +9,9 @@ exports[`<Card /> should render a clickable Card 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -23,7 +24,6 @@ exports[`<Card /> should render a clickable Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -106,8 +106,9 @@ exports[`<Card /> should render a linkable Card 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -120,7 +121,6 @@ exports[`<Card /> should render a linkable Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -205,8 +205,9 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -219,7 +220,6 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -304,8 +304,9 @@ exports[`<Card /> should render an interactive Card 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -318,7 +319,6 @@ exports[`<Card /> should render an interactive Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -346,7 +346,7 @@ exports[`<Card /> should render an interactive Card 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  box-shadow: 0px 0px 0px 2px hsla(218,89%,51%,1);
+  box-shadow: 0px 0px 0px 2px hsla(227,100%,59%,1);
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
diff --git a/packages/blade/src/components/Card/types.ts b/packages/blade/src/components/Card/types.ts
index d38d7f950eb..7b438d19a1a 100644
--- a/packages/blade/src/components/Card/types.ts
+++ b/packages/blade/src/components/Card/types.ts
@@ -1,5 +1,10 @@
 import type { CardProps } from './Card';
-import type { BaseBoxProps } from '~components/Box/BaseBox';
+import type { BaseBoxProps, SpacingValueType } from '~components/Box/BaseBox';
+
+type CardSpacingValueType = Extract<
+  SpacingValueType,
+  'spacing.0' | 'spacing.3' | 'spacing.4' | 'spacing.5' | 'spacing.7'
+>;
 
 type CardRootProps = {
   isSelected?: boolean;
@@ -16,4 +21,4 @@ type LinkOverlayProps = {
   href?: string;
 } & BaseBoxProps;
 
-export type { CardRootProps, LinkOverlayProps };
+export type { CardRootProps, LinkOverlayProps, CardSpacingValueType };
diff --git a/packages/blade/src/components/Carousel/Carousel.native.tsx b/packages/blade/src/components/Carousel/Carousel.native.tsx
index 0ff0b7b9569..97280925051 100644
--- a/packages/blade/src/components/Carousel/Carousel.native.tsx
+++ b/packages/blade/src/components/Carousel/Carousel.native.tsx
@@ -15,6 +15,7 @@ import { useId } from '~utils/useId';
 import { logger } from '~utils/logger';
 import { size } from '~tokens/global';
 import { useDidUpdate } from '~utils/useDidUpdate';
+import { getResponsiveValue } from '~components/Box/BaseBox/getResponsiveValue';
 
 const percentageStringToNumber = (percentage: string): number => {
   if (!percentage.endsWith('%')) {
@@ -99,7 +100,9 @@ const Carousel = ({
   const id = useId();
 
   const _visibleItems = 1;
-  const slideWidth = scrollViewWidth * percentageStringToNumber(castNativeType(carouselItemWidth));
+  const slideWidth =
+    scrollViewWidth *
+    percentageStringToNumber(castNativeType(getResponsiveValue(carouselItemWidth)));
   const totalNumberOfSlides = React.Children.count(children);
 
   const goToSlideIndex = (slideIndex: number): void => {
diff --git a/packages/blade/src/components/Carousel/Carousel.stories.tsx b/packages/blade/src/components/Carousel/Carousel.stories.tsx
index a1fd743830e..b1a44a85964 100644
--- a/packages/blade/src/components/Carousel/Carousel.stories.tsx
+++ b/packages/blade/src/components/Carousel/Carousel.stories.tsx
@@ -19,12 +19,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Carousel"
       componentDescription="Carousel is a UI component that allows the display and navigation of a set of content items, typically images or cards, within a limited space. It is often used to showcase multiple pieces of content in a visually appealing and interactive way."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=2115-975755&mode=design&t=5g2Lqj2ez02pxQfO-0',
-        bankingTheme:
-          'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=2115-975755&mode=design&t=5g2Lqj2ez02pxQfO-0',
-      }}
+      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=2115-975755&mode=design&t=5g2Lqj2ez02pxQfO-0"
     >
       <AddonTitle>Usage</AddonTitle>
       <Sandbox editorHeight={500}>
@@ -187,7 +182,7 @@ const QuoteSvg = (): React.ReactElement => {
     <svg width="38" height="31" viewBox="0 0 38 31" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M8.848 0L14.56 4.48C12.2453 6.944 10.6027 9.25867 9.632 11.424C8.66133 13.5893 8.176 15.8293 8.176 18.144L4.704 14.896H15.792V30.576H0V20.272C0 16.464 0.672 12.9547 2.016 9.744C3.36 6.53334 5.63733 3.28534 8.848 0ZM30.576 0L36.288 4.48C33.9733 6.944 32.3307 9.25867 31.36 11.424C30.3893 13.5893 29.904 15.8293 29.904 18.144L26.432 14.896H37.52V30.576H21.728V20.272C21.728 16.464 22.4 12.9547 23.744 9.744C25.088 6.53334 27.3653 3.28534 30.576 0Z"
-        fill={theme.colors.brand.primary[300]}
+        fill={theme.colors.interactive.background.primary.faded}
       />
     </svg>
   );
@@ -220,10 +215,10 @@ const TestimonialCard = ({
         <Box height="100%" display="flex" gap="spacing.4" flexDirection="column">
           <QuoteSvg />
           <Box>
-            <Heading type="subtle" weight="bold" size="large">
+            <Heading weight="semibold" size="large">
               {quote}
             </Heading>
-            <Text size="medium" type="subdued" marginTop="spacing.4">
+            <Text size="medium" marginTop="spacing.4">
               {longQuote}
             </Text>
           </Box>
@@ -235,17 +230,15 @@ const TestimonialCard = ({
           >
             <Avatar name={name} />
             <Box>
-              <Text size="large" weight="bold">
+              <Text size="large" weight="semibold">
                 {name}
               </Text>
               <Text>
-                <Text as="span" weight="bold" type="subdued">
+                <Text as="span" weight="semibold">
                   {company}
                 </Text>
                 {', '}
-                <Text as="span" type="muted">
-                  {role}
-                </Text>
+                <Text as="span">{role}</Text>
               </Text>
             </Box>
           </Box>
@@ -355,7 +348,7 @@ export const AutoBleed: StoryFn<typeof CarouselComponent> = () => {
         </Text>
       </Box>
 
-      <Text weight="bold">Props:</Text>
+      <Text weight="semibold">Props:</Text>
       <List marginBottom="spacing.3">
         <ListItem>visibleItems: autofit</ListItem>
         <ListItem>
@@ -369,7 +362,7 @@ export const AutoBleed: StoryFn<typeof CarouselComponent> = () => {
         <Code size="medium">shouldAddStartEndSpacing</Code> to true
       </Text>
 
-      <Text weight="bold">Props:</Text>
+      <Text weight="semibold">Props:</Text>
       <List marginBottom="spacing.3">
         <ListItem>visibleItems: autofit</ListItem>
         <ListItem>shouldAddStartEndSpacing: true</ListItem>
@@ -382,7 +375,7 @@ export const AutoBleed: StoryFn<typeof CarouselComponent> = () => {
         shouldAddStartEndSpacing
         visibleItems="autofit"
         carouselItemWidth={{ base: '90%', m: '300px' }}
-        scrollOverlayColor="surface.background.level1.lowContrast"
+        scrollOverlayColor="surface.background.gray.subtle"
       />
     </Box>
   );
@@ -462,10 +455,10 @@ const InteractiveTestimonialCard = ({
           <Box height="100%" display="flex" gap="spacing.4" flexDirection="column">
             <QuoteSvg />
             <Box>
-              <Heading type="subtle" weight="bold" size="large">
+              <Heading weight="semibold" size="large">
                 {quote}
               </Heading>
-              <Text size="medium" type="subdued" marginTop="spacing.4">
+              <Text size="medium" marginTop="spacing.4">
                 {longQuote}
               </Text>
             </Box>
@@ -481,13 +474,11 @@ const InteractiveTestimonialCard = ({
                   {name}
                 </Link>
                 <Text>
-                  <Text as="span" weight="bold" type="subdued">
+                  <Text as="span" weight="semibold">
                     {company}
                   </Text>
                   {', '}
-                  <Text as="span" type="muted">
-                    {role}
-                  </Text>
+                  <Text as="span">{role}</Text>
                 </Text>
               </Box>
             </Box>
diff --git a/packages/blade/src/components/Carousel/Carousel.web.tsx b/packages/blade/src/components/Carousel/Carousel.web.tsx
index 2384872bad4..a1065cc20f4 100644
--- a/packages/blade/src/components/Carousel/Carousel.web.tsx
+++ b/packages/blade/src/components/Carousel/Carousel.web.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 /* eslint-disable consistent-return */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
@@ -97,7 +98,7 @@ const CarouselContainer = styled(BaseBox)<{
   isScrollAtStart: boolean;
   isScrollAtEnd: boolean;
 }>(({ theme, showOverlay, scrollOverlayColor, isScrollAtStart, isScrollAtEnd }) => {
-  const gradientStop1: string = getIn(theme.colors, scrollOverlayColor as string);
+  const gradientStop1: string = getIn(theme.colors, scrollOverlayColor!);
   const gradientStop2 = 'hsla(0, 0%, 100%, 0)';
 
   const overlayCommonStyle: CSSObject = {
diff --git a/packages/blade/src/components/Carousel/Indicators/getIndicatorButtonStyles.ts b/packages/blade/src/components/Carousel/Indicators/getIndicatorButtonStyles.ts
index 62fc2bdcd19..6f61afacbb1 100644
--- a/packages/blade/src/components/Carousel/Indicators/getIndicatorButtonStyles.ts
+++ b/packages/blade/src/components/Carousel/Indicators/getIndicatorButtonStyles.ts
@@ -2,6 +2,7 @@ import type { CSSObject, DefaultTheme } from 'styled-components';
 import type { IndicatorButtonProps } from './types';
 import { size } from '~tokens/global';
 import { castWebType, isReactNative, makeMotionTime, makeSize, makeSpace } from '~utils';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 
 const getIndicatorButtonStyles = ({
   theme,
@@ -11,9 +12,9 @@ const getIndicatorButtonStyles = ({
   theme: DefaultTheme;
 } & Pick<IndicatorButtonProps, 'isActive' | 'variant'>): CSSObject => {
   const backgroundColor = {
-    gray: theme.colors.brand.gray[600].highContrast,
-    white: theme.colors.brand.gray[700].highContrast,
-    blue: theme.colors.brand.primary[500],
+    gray: theme.colors.interactive.icon.gray.muted,
+    white: theme.colors.interactive.icon.staticWhite.normal,
+    blue: theme.colors.interactive.icon.primary.subtle,
   };
 
   const easing = castWebType(theme.motion.easing.standard.effective);
@@ -24,9 +25,7 @@ const getIndicatorButtonStyles = ({
     cursor: 'pointer',
     padding: makeSpace(theme.spacing[0]),
     borderRadius: theme.border.radius.max,
-    backgroundColor: isActive
-      ? backgroundColor[variant]
-      : theme.colors.surface.overlay.background[400],
+    backgroundColor: isActive ? backgroundColor[variant] : theme.colors.overlay.background.moderate,
     width: isActive ? makeSize(size[18]) : makeSize(size[6]),
     height: makeSize(size[6]),
 
@@ -45,9 +44,7 @@ const getIndicatorButtonStyles = ({
         paddingTop: makeSize(size[20]),
       },
       '&:focus-visible': {
-        // TODO: refactor to use focus ring token
-        outline: 'none',
-        boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,
+        ...getFocusRingStyles({ theme }),
       },
     }),
   };
diff --git a/packages/blade/src/components/Carousel/NavigationButton/NavigationButton.tsx b/packages/blade/src/components/Carousel/NavigationButton/NavigationButton.tsx
index 8e871710bbe..5233478520c 100644
--- a/packages/blade/src/components/Carousel/NavigationButton/NavigationButton.tsx
+++ b/packages/blade/src/components/Carousel/NavigationButton/NavigationButton.tsx
@@ -21,8 +21,8 @@ const NavigationButton = ({ type, variant, onClick }: NavigationButtonProps): Re
 
     // on react native we cannot rely on currentColor thus need to manually pass iconColor
     const iconColor = {
-      filled: 'action.icon.tertiary.default',
-      stroked: 'surface.action.icon.active.highContrast',
+      filled: 'interactive.icon.staticBlack.muted',
+      stroked: 'interactive.icon.gray.normal',
     } as const;
 
     return iconColor[variant];
diff --git a/packages/blade/src/components/Carousel/NavigationButton/StyledNavigationButton.native.tsx b/packages/blade/src/components/Carousel/NavigationButton/StyledNavigationButton.native.tsx
index 8edc534f09d..73278ad12f4 100644
--- a/packages/blade/src/components/Carousel/NavigationButton/StyledNavigationButton.native.tsx
+++ b/packages/blade/src/components/Carousel/NavigationButton/StyledNavigationButton.native.tsx
@@ -3,6 +3,8 @@ import React from 'react';
 import type { NavigationButtonProps } from './types';
 import { getNavigationButtonStyles } from './getNavigationButtonStyles';
 import { makeAccessible } from '~utils/makeAccessible';
+import { useTheme } from '~components/BladeProvider';
+import { castNativeType } from '~utils';
 
 const StyledPressable = styled.Pressable<
   Pick<NavigationButtonProps, 'variant'> & { isPressed: boolean }
@@ -19,6 +21,7 @@ const StyledNavigationButton = ({
   children: React.ReactNode;
   accessibilityLabel?: string;
 }): React.ReactElement => {
+  const { theme } = useTheme();
   const [isPressed, setIsPressed] = React.useState(false);
 
   return (
@@ -28,6 +31,7 @@ const StyledNavigationButton = ({
       onPress={onClick}
       onPressIn={() => setIsPressed(true)}
       onPressOut={() => setIsPressed(false)}
+      style={castNativeType(theme.elevation.lowRaised)}
       {...makeAccessible({ role: 'button', label: accessibilityLabel })}
     >
       {children}
diff --git a/packages/blade/src/components/Carousel/NavigationButton/getNavigationButtonStyles.ts b/packages/blade/src/components/Carousel/NavigationButton/getNavigationButtonStyles.ts
index 395880aa717..b2494f678a6 100644
--- a/packages/blade/src/components/Carousel/NavigationButton/getNavigationButtonStyles.ts
+++ b/packages/blade/src/components/Carousel/NavigationButton/getNavigationButtonStyles.ts
@@ -1,6 +1,7 @@
 import type { CSSObject, DefaultTheme } from 'styled-components';
 import type { NavigationButtonProps } from './types';
 import { castWebType, isReactNative, makeMotionTime, makeSpace } from '~utils';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 
 const getNavigationButtonStyles = (props: {
   theme: DefaultTheme;
@@ -12,44 +13,36 @@ const getNavigationButtonStyles = (props: {
 
   const iconColor = {
     filled: {
-      default: theme.colors.white.action.icon.primary.default,
-      hover: theme.colors.white.action.icon.primary.hover,
-      focus: theme.colors.white.action.icon.primary.focus,
-      active: theme.colors.white.action.icon.primary.active,
+      default: theme.colors.interactive.icon.staticBlack.muted,
+      highlighted: theme.colors.interactive.icon.staticBlack.muted,
     },
     stroked: {
-      default: theme.colors.surface.action.icon.active.highContrast,
-      hover: theme.colors.surface.action.icon.hover.highContrast,
-      focus: theme.colors.surface.action.icon.focus.highContrast,
-      active: theme.colors.surface.action.icon.active.highContrast,
+      default: theme.colors.interactive.icon.gray.normal,
+      highlighted: theme.colors.interactive.icon.gray.normal,
     },
   };
 
   const backgroundColor = {
     filled: {
-      default: theme.colors.white.action.background.primary.default,
-      hover: theme.colors.white.action.background.primary.hover,
-      focus: theme.colors.white.action.background.primary.focus,
-      active: theme.colors.white.action.background.primary.active,
+      default: theme.colors.interactive.background.staticWhite.default,
+      highlighted: theme.colors.interactive.background.staticWhite.highlighted,
     },
     stroked: {
-      default: theme.colors.action.background.tertiary.default,
-      hover: theme.colors.action.background.tertiary.hover,
-      focus: theme.colors.action.background.tertiary.focus,
-      active: theme.colors.action.background.tertiary.active,
+      default: theme.colors.interactive.background.staticWhite.faded,
+      highlighted: theme.colors.interactive.background.staticWhite.fadedHighlighted,
     },
   };
 
   const borderColors = {
-    filled: theme.colors.surface.border.normal.lowContrast,
-    stroked: theme.colors.brand.gray[400].lowContrast,
+    filled: theme.colors.transparent,
+    stroked: theme.colors.interactive.border.gray.faded,
   } as const;
 
   const borderColor = borderColors[variant];
   const borderWidth = theme.border.width.thin;
   const borderRadius = theme.border.radius.max;
   // on react-native isPressed will be passed
-  const state = isPressed ? 'active' : 'default';
+  const state = isPressed ? 'highlighted' : 'default';
 
   return {
     cursor: 'pointer',
@@ -77,21 +70,19 @@ const getNavigationButtonStyles = (props: {
           boxShadow: variant === 'filled' ? castWebType(theme.elevation.midRaised) : undefined,
 
           '&:hover': {
-            color: iconColor[variant].hover,
-            backgroundColor: backgroundColor[variant].hover,
+            color: iconColor[variant].highlighted,
+            backgroundColor: backgroundColor[variant].highlighted,
           },
 
           '&:focus-visible': {
-            // TODO: refactor to use focus ring token
-            outline: 'none',
-            boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,
-            color: iconColor[variant].focus,
-            backgroundColor: backgroundColor[variant].focus,
+            ...getFocusRingStyles({ theme }),
+            color: iconColor[variant].highlighted,
+            backgroundColor: backgroundColor[variant].highlighted,
           },
 
           '&:active': {
-            color: iconColor[variant].active,
-            backgroundColor: backgroundColor[variant].active,
+            color: iconColor[variant].highlighted,
+            backgroundColor: backgroundColor[variant].highlighted,
           },
         }),
   };
diff --git a/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx b/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx
index be99c081557..184a8fc963b 100644
--- a/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx
+++ b/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx
@@ -146,7 +146,7 @@ describe('Carousel Snapshots', () => {
 
   it('should render with showOverlay', () => {
     const { container } = renderWithTheme(
-      <Carousel scrollOverlayColor="surface.background.level1.lowContrast" shouldAddStartEndSpacing>
+      <Carousel scrollOverlayColor="surface.background.gray.subtle" shouldAddStartEndSpacing>
         <CarouselItem>
           <TestimonialCard />
         </CarouselItem>
@@ -182,7 +182,7 @@ describe('Carousel Snapshots', () => {
     const viewport = mockViewport({ width: '320px', height: '568px' });
 
     const { container } = renderWithTheme(
-      <Carousel scrollOverlayColor="surface.background.level1.lowContrast" shouldAddStartEndSpacing>
+      <Carousel scrollOverlayColor="surface.background.gray.subtle" shouldAddStartEndSpacing>
         <CarouselItem>
           <TestimonialCard />
         </CarouselItem>
diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.native.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.native.test.tsx.snap
index 9614cc9f325..51809535d81 100644
--- a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.native.test.tsx.snap
+++ b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.native.test.tsx.snap
@@ -105,7 +105,7 @@ exports[`Carousel Snapshots should render 1`] = `
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -115,11 +115,12 @@ exports[`Carousel Snapshots should render 1`] = `
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -166,7 +167,7 @@ exports[`Carousel Snapshots should render 1`] = `
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -176,11 +177,12 @@ exports[`Carousel Snapshots should render 1`] = `
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -268,11 +270,11 @@ exports[`Carousel Snapshots should render 1`] = `
                 "alignItems": "center",
                 "alignSelf": "center",
                 "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                "borderColor": "hsla(216, 15%, 54%, 0.18)",
+                "borderColor": "hsla(0, 0%, 100%, 0)",
                 "borderRadius": 9999,
                 "borderStyle": "solid",
                 "borderWidth": 1,
-                "color": "hsla(218, 89%, 51%, 1)",
+                "color": "hsla(0, 0%, 0%, 0.72)",
                 "cursor": "pointer",
                 "display": "flex",
                 "justifyContent": "center",
@@ -281,6 +283,16 @@ exports[`Carousel Snapshots should render 1`] = `
                 "paddingRight": 8,
                 "paddingTop": 8,
               },
+              {
+                "elevation": 8,
+                "shadowColor": "hsla(217, 56%, 17%, 0.4)",
+                "shadowOffset": {
+                  "height": 2,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.2,
+                "shadowRadius": 4,
+              },
             ]
           }
           variant="filled"
@@ -329,7 +341,7 @@ exports[`Carousel Snapshots should render 1`] = `
               <RNSVGPath
                 clipRule={0}
                 d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z"
-                fill={4281484642}
+                fill={3087007744}
                 fillRule={0}
                 propList={
                   [
@@ -408,7 +420,7 @@ exports[`Carousel Snapshots should render 1`] = `
               [
                 {},
                 {
-                  "backgroundColor": "hsla(214, 18%, 69%, 1)",
+                  "backgroundColor": "hsla(211, 22%, 56%, 1)",
                   "borderColor": "black",
                   "borderRadius": 9999,
                   "borderStyle": "solid",
@@ -481,7 +493,7 @@ exports[`Carousel Snapshots should render 1`] = `
               [
                 {},
                 {
-                  "backgroundColor": "hsla(214, 18%, 69%, 0.64)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.32)",
                   "borderColor": "black",
                   "borderRadius": 9999,
                   "borderStyle": "solid",
@@ -554,11 +566,11 @@ exports[`Carousel Snapshots should render 1`] = `
                 "alignItems": "center",
                 "alignSelf": "center",
                 "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                "borderColor": "hsla(216, 15%, 54%, 0.18)",
+                "borderColor": "hsla(0, 0%, 100%, 0)",
                 "borderRadius": 9999,
                 "borderStyle": "solid",
                 "borderWidth": 1,
-                "color": "hsla(218, 89%, 51%, 1)",
+                "color": "hsla(0, 0%, 0%, 0.72)",
                 "cursor": "pointer",
                 "display": "flex",
                 "justifyContent": "center",
@@ -567,6 +579,16 @@ exports[`Carousel Snapshots should render 1`] = `
                 "paddingRight": 8,
                 "paddingTop": 8,
               },
+              {
+                "elevation": 8,
+                "shadowColor": "hsla(217, 56%, 17%, 0.4)",
+                "shadowOffset": {
+                  "height": 2,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.2,
+                "shadowRadius": 4,
+              },
             ]
           }
           variant="filled"
@@ -615,7 +637,7 @@ exports[`Carousel Snapshots should render 1`] = `
               <RNSVGPath
                 clipRule={0}
                 d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z"
-                fill={4281484642}
+                fill={3087007744}
                 fillRule={0}
                 propList={
                   [
@@ -738,7 +760,7 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -748,11 +770,12 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -799,7 +822,7 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -809,11 +832,12 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -860,7 +884,7 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -870,11 +894,12 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -962,11 +987,11 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
                 "alignItems": "center",
                 "alignSelf": "center",
                 "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                "borderColor": "hsla(216, 15%, 54%, 0.18)",
+                "borderColor": "hsla(0, 0%, 100%, 0)",
                 "borderRadius": 9999,
                 "borderStyle": "solid",
                 "borderWidth": 1,
-                "color": "hsla(218, 89%, 51%, 1)",
+                "color": "hsla(0, 0%, 0%, 0.72)",
                 "cursor": "pointer",
                 "display": "flex",
                 "justifyContent": "center",
@@ -975,6 +1000,16 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
                 "paddingRight": 8,
                 "paddingTop": 8,
               },
+              {
+                "elevation": 8,
+                "shadowColor": "hsla(217, 56%, 17%, 0.4)",
+                "shadowOffset": {
+                  "height": 2,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.2,
+                "shadowRadius": 4,
+              },
             ]
           }
           variant="filled"
@@ -1023,7 +1058,7 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
               <RNSVGPath
                 clipRule={0}
                 d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z"
-                fill={4281484642}
+                fill={3087007744}
                 fillRule={0}
                 propList={
                   [
@@ -1102,7 +1137,7 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
               [
                 {},
                 {
-                  "backgroundColor": "hsla(214, 18%, 69%, 1)",
+                  "backgroundColor": "hsla(211, 22%, 56%, 1)",
                   "borderColor": "black",
                   "borderRadius": 9999,
                   "borderStyle": "solid",
@@ -1175,7 +1210,7 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
               [
                 {},
                 {
-                  "backgroundColor": "hsla(214, 18%, 69%, 0.64)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.32)",
                   "borderColor": "black",
                   "borderRadius": 9999,
                   "borderStyle": "solid",
@@ -1248,7 +1283,7 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
               [
                 {},
                 {
-                  "backgroundColor": "hsla(214, 18%, 69%, 0.64)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.32)",
                   "borderColor": "black",
                   "borderRadius": 9999,
                   "borderStyle": "solid",
@@ -1321,11 +1356,11 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
                 "alignItems": "center",
                 "alignSelf": "center",
                 "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                "borderColor": "hsla(216, 15%, 54%, 0.18)",
+                "borderColor": "hsla(0, 0%, 100%, 0)",
                 "borderRadius": 9999,
                 "borderStyle": "solid",
                 "borderWidth": 1,
-                "color": "hsla(218, 89%, 51%, 1)",
+                "color": "hsla(0, 0%, 0%, 0.72)",
                 "cursor": "pointer",
                 "display": "flex",
                 "justifyContent": "center",
@@ -1334,6 +1369,16 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
                 "paddingRight": 8,
                 "paddingTop": 8,
               },
+              {
+                "elevation": 8,
+                "shadowColor": "hsla(217, 56%, 17%, 0.4)",
+                "shadowOffset": {
+                  "height": 2,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.2,
+                "shadowRadius": 4,
+              },
             ]
           }
           variant="filled"
@@ -1382,7 +1427,7 @@ exports[`Carousel Snapshots should render with visibleItems but always renders 1
               <RNSVGPath
                 clipRule={0}
                 d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z"
-                fill={4281484642}
+                fill={3087007744}
                 fillRule={0}
                 propList={
                   [
diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap
index f913d7fc3a3..6a0f1c4e323 100644
--- a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Carousel /> should render a Carousel ssr 1`] = `"<div id="root"><div data-blade-component="carousel" class="BaseBox-bmPWx cDXDci"><div data-blade-component="base-box" class="BaseBox-bmPWx bHGIpZ"><div tabindex="0" role="group" aria-roledescription="carousel" data-blade-component="base-box" class="BaseBox-bmPWx Carouselweb__CarouselContainer-v6xykj-0 biROtj binoEC"><div role="tabpanel" aria-roledescription="slide" aria-label="1 of 5" id="carousel-undefined-carousel-item-0" data-slide-index="0" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Carousel Item 1</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="2 of 5" id="carousel-undefined-carousel-item-1" data-slide-index="1" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Carousel Item 2</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="3 of 5" id="carousel-undefined-carousel-item-2" data-slide-index="2" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Carousel Item 3</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="4 of 5" id="carousel-undefined-carousel-item-3" data-slide-index="3" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Carousel Item 4</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="5 of 5" id="carousel-undefined-carousel-item-4" data-slide-index="4" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Carousel Item 5</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx cuFcuZ"><button data-blade-component="NavigationButton" aria-label="Previous Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 dWywUY"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button><div role="tablist" aria-label="Slides" data-blade-component="base-box" class="BaseBox-bmPWx jDluQZ"><button role="tab" aria-label="Slide 1" aria-selected="true" aria-controls="carousel-undefined-carousel-item-0" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 dnbBHb"></button><button role="tab" aria-label="Slide 3" aria-selected="false" aria-controls="carousel-undefined-carousel-item-2" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 jfETdl"></button><button role="tab" aria-label="Slide 5" aria-selected="false" aria-controls="carousel-undefined-carousel-item-4" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 jfETdl"></button></div><button data-blade-component="NavigationButton" aria-label="Next Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 dWywUY"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div></div>"`;
+exports[`<Carousel /> should render a Carousel ssr 1`] = `"<div id="root"><div data-blade-component="carousel" class="BaseBox-bmPWx cDXDci"><div data-blade-component="base-box" class="BaseBox-bmPWx bHGIpZ"><div tabindex="0" role="group" aria-roledescription="carousel" data-blade-component="base-box" class="BaseBox-bmPWx Carouselweb__CarouselContainer-v6xykj-0 biROtj binoEC"><div role="tabpanel" aria-roledescription="slide" aria-label="1 of 5" id="carousel-undefined-carousel-item-0" data-slide-index="0" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Carousel Item 1</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="2 of 5" id="carousel-undefined-carousel-item-1" data-slide-index="1" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Carousel Item 2</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="3 of 5" id="carousel-undefined-carousel-item-2" data-slide-index="2" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Carousel Item 3</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="4 of 5" id="carousel-undefined-carousel-item-3" data-slide-index="3" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Carousel Item 4</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="5 of 5" id="carousel-undefined-carousel-item-4" data-slide-index="4" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Carousel Item 5</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx cuFcuZ"><button data-blade-component="NavigationButton" aria-label="Previous Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 uokoK"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button><div role="tablist" aria-label="Slides" data-blade-component="base-box" class="BaseBox-bmPWx jDluQZ"><button role="tab" aria-label="Slide 1" aria-selected="true" aria-controls="carousel-undefined-carousel-item-0" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 gzDKit"></button><button role="tab" aria-label="Slide 3" aria-selected="false" aria-controls="carousel-undefined-carousel-item-2" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 dApwcC"></button><button role="tab" aria-label="Slide 5" aria-selected="false" aria-controls="carousel-undefined-carousel-item-4" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 dApwcC"></button></div><button data-blade-component="NavigationButton" aria-label="Next Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 uokoK"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div></div>"`;
 
 exports[`<Carousel /> should render a Carousel ssr 2`] = `
 .c9.c9.c9.c9.c9 {
@@ -8,7 +8,7 @@ exports[`<Carousel /> should render a Carousel ssr 2`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,1);
+  background-color: hsla(211,22%,56%,1);
   width: 18px;
   height: 6px;
   -webkit-transition-property: width;
@@ -26,8 +26,14 @@ exports[`<Carousel /> should render a Carousel ssr 2`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c10.c10.c10.c10.c10 {
@@ -35,7 +41,7 @@ exports[`<Carousel /> should render a Carousel ssr 2`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,0.64);
+  background-color: hsla(211,20%,52%,0.32);
   width: 6px;
   height: 6px;
   -webkit-transition-property: width;
@@ -53,8 +59,14 @@ exports[`<Carousel /> should render a Carousel ssr 2`] = `
 }
 
 .c10.c10.c10.c10.c10:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -127,9 +139,9 @@ exports[`<Carousel /> should render a Carousel ssr 2`] = `
   border-style: solid;
   border-width: 1px;
   border-radius: 9999px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(0,0%,100%,0);
   background-color: hsla(0,0%,100%,1);
-  color: hsla(218,89%,51%,1);
+  color: hsla(0,0%,0%,0.72);
   padding: 8px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -152,24 +164,30 @@ exports[`<Carousel /> should render a Carousel ssr 2`] = `
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c7.c7.c7.c7.c7:hover {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,6%,94%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c7.c7.c7.c7.c7:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c7.c7.c7.c7.c7:active {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -225,14 +243,18 @@ exports[`<Carousel /> should render a Carousel ssr 2`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap
index 382ffedfdc7..1329dfa7307 100644
--- a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap
+++ b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,1);
+  background-color: hsla(211,22%,56%,1);
   width: 18px;
   height: 6px;
   -webkit-transition-property: width;
@@ -24,8 +24,14 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c10.c10.c10.c10.c10 {
@@ -33,7 +39,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,0.64);
+  background-color: hsla(211,20%,52%,0.32);
   width: 6px;
   height: 6px;
   -webkit-transition-property: width;
@@ -51,8 +57,14 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
 }
 
 .c10.c10.c10.c10.c10:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -129,9 +141,9 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
   border-style: solid;
   border-width: 1px;
   border-radius: 9999px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(0,0%,100%,0);
   background-color: hsla(0,0%,100%,1);
-  color: hsla(218,89%,51%,1);
+  color: hsla(0,0%,0%,0.72);
   padding: 8px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -154,24 +166,30 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c7.c7.c7.c7.c7:hover {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,6%,94%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c7.c7.c7.c7.c7:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c7.c7.c7.c7.c7:active {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -222,7 +240,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-property: opacity;
   transition-property: opacity;
-  background: linear-gradient(to right,hsla(220,30%,96%,1),hsla(0,0%,100%,0));
+  background: linear-gradient(to right,hsla(213,47%,96%,1),hsla(0,0%,100%,0));
   left: -1px;
   opacity: 1;
   pointer-events: none;
@@ -240,7 +258,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-property: opacity;
   transition-property: opacity;
-  background: linear-gradient(to left,hsla(220,30%,96%,1),hsla(0,0%,100%,0));
+  background: linear-gradient(to left,hsla(213,47%,96%,1),hsla(0,0%,100%,0));
   right: -1px;
   opacity: 1;
   pointer-events: none;
@@ -408,7 +426,7 @@ exports[`Carousel Snapshots should render 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,1);
+  background-color: hsla(211,22%,56%,1);
   width: 18px;
   height: 6px;
   -webkit-transition-property: width;
@@ -426,8 +444,14 @@ exports[`Carousel Snapshots should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9 {
@@ -435,7 +459,7 @@ exports[`Carousel Snapshots should render 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,0.64);
+  background-color: hsla(211,20%,52%,0.32);
   width: 6px;
   height: 6px;
   -webkit-transition-property: width;
@@ -453,8 +477,14 @@ exports[`Carousel Snapshots should render 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -527,9 +557,9 @@ exports[`Carousel Snapshots should render 1`] = `
   border-style: solid;
   border-width: 1px;
   border-radius: 9999px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(0,0%,100%,0);
   background-color: hsla(0,0%,100%,1);
-  color: hsla(218,89%,51%,1);
+  color: hsla(0,0%,0%,0.72);
   padding: 8px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -552,24 +582,30 @@ exports[`Carousel Snapshots should render 1`] = `
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c6.c6.c6.c6.c6:hover {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,6%,94%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c6.c6.c6.c6.c6:active {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -766,7 +802,7 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`]
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,1);
+  background-color: hsla(211,22%,56%,1);
   width: 18px;
   height: 6px;
   -webkit-transition-property: width;
@@ -784,8 +820,14 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`]
 }
 
 .c8.c8.c8.c8.c8:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9 {
@@ -793,7 +835,7 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`]
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,0.64);
+  background-color: hsla(211,20%,52%,0.32);
   width: 6px;
   height: 6px;
   -webkit-transition-property: width;
@@ -811,8 +853,14 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`]
 }
 
 .c9.c9.c9.c9.c9:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -876,9 +924,9 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`]
   border-style: solid;
   border-width: 1px;
   border-radius: 9999px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(0,0%,100%,0);
   background-color: hsla(0,0%,100%,1);
-  color: hsla(218,89%,51%,1);
+  color: hsla(0,0%,0%,0.72);
   padding: 8px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -901,24 +949,30 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`]
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c2.c2.c2.c2.c2:hover {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,6%,94%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c2.c2.c2.c2.c2:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c2.c2.c2.c2.c2:active {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c4.c4.c4.c4.c4 {
@@ -1115,7 +1169,7 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,1);
+  background-color: hsla(211,22%,56%,1);
   width: 18px;
   height: 6px;
   -webkit-transition-property: width;
@@ -1133,8 +1187,14 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
 }
 
 .c10.c10.c10.c10.c10:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c11.c11.c11.c11.c11 {
@@ -1142,7 +1202,7 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,0.64);
+  background-color: hsla(211,20%,52%,0.32);
   width: 6px;
   height: 6px;
   -webkit-transition-property: width;
@@ -1160,8 +1220,14 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
 }
 
 .c11.c11.c11.c11.c11:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -1242,9 +1308,9 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
   border-style: solid;
   border-width: 1px;
   border-radius: 9999px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(0,0%,100%,0);
   background-color: hsla(0,0%,100%,1);
-  color: hsla(218,89%,51%,1);
+  color: hsla(0,0%,0%,0.72);
   padding: 8px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1267,24 +1333,30 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c8.c8.c8.c8.c8:hover {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,6%,94%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c8.c8.c8.c8.c8:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c8.c8.c8.c8.c8:active {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1516,7 +1588,7 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,1);
+  background-color: hsla(211,22%,56%,1);
   width: 18px;
   height: 6px;
   -webkit-transition-property: width;
@@ -1534,8 +1606,14 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c10.c10.c10.c10.c10 {
@@ -1543,7 +1621,7 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,0.64);
+  background-color: hsla(211,20%,52%,0.32);
   width: 6px;
   height: 6px;
   -webkit-transition-property: width;
@@ -1561,8 +1639,14 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
 }
 
 .c10.c10.c10.c10.c10:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -1639,9 +1723,9 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
   border-style: solid;
   border-width: 1px;
   border-radius: 9999px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(0,0%,100%,0);
   background-color: hsla(0,0%,100%,1);
-  color: hsla(218,89%,51%,1);
+  color: hsla(0,0%,0%,0.72);
   padding: 8px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1664,24 +1748,30 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c7.c7.c7.c7.c7:hover {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,6%,94%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c7.c7.c7.c7.c7:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c7.c7.c7.c7.c7:active {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1732,7 +1822,7 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-property: opacity;
   transition-property: opacity;
-  background: linear-gradient(to right,hsla(220,30%,96%,1),hsla(0,0%,100%,0));
+  background: linear-gradient(to right,hsla(213,47%,96%,1),hsla(0,0%,100%,0));
   left: -1px;
   opacity: 1;
   pointer-events: none;
@@ -1750,7 +1840,7 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-property: opacity;
   transition-property: opacity;
-  background: linear-gradient(to left,hsla(220,30%,96%,1),hsla(0,0%,100%,0));
+  background: linear-gradient(to left,hsla(213,47%,96%,1),hsla(0,0%,100%,0));
   right: -1px;
   opacity: 1;
   pointer-events: none;
@@ -1943,7 +2033,7 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,1);
+  background-color: hsla(211,22%,56%,1);
   width: 18px;
   height: 6px;
   -webkit-transition-property: width;
@@ -1961,8 +2051,14 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
 }
 
 .c8.c8.c8.c8.c8:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9 {
@@ -1970,7 +2066,7 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
   cursor: pointer;
   padding: 0px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,0.64);
+  background-color: hsla(211,20%,52%,0.32);
   width: 6px;
   height: 6px;
   -webkit-transition-property: width;
@@ -1988,8 +2084,14 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c0.c0.c0.c0.c0 {
@@ -2062,9 +2164,9 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
   border-style: solid;
   border-width: 1px;
   border-radius: 9999px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(0,0%,100%,0);
   background-color: hsla(0,0%,100%,1);
-  color: hsla(218,89%,51%,1);
+  color: hsla(0,0%,0%,0.72);
   padding: 8px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2087,24 +2189,30 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c6.c6.c6.c6.c6:hover {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,6%,94%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c6.c6.c6.c6.c6:active {
-  color: hsla(218,89%,51%,1);
-  background-color: hsla(216,4%,89%,1);
+  color: hsla(0,0%,0%,0.72);
+  background-color: hsla(0,0%,100%,0.8);
 }
 
 .c3.c3.c3.c3.c3 {
diff --git a/packages/blade/src/components/Carousel/types.ts b/packages/blade/src/components/Carousel/types.ts
index 72cc5327651..4e9af284a54 100644
--- a/packages/blade/src/components/Carousel/types.ts
+++ b/packages/blade/src/components/Carousel/types.ts
@@ -1,14 +1,17 @@
 import type { Theme } from '~components/BladeProvider';
 import type { BoxProps } from '~components/Box';
 import type { Platform } from '~utils';
-import type { DotNotationColorStringToken } from '~utils/types';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 
-type ColorObjects = 'feedback' | 'surface' | 'action';
-type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<
-  Theme['colors'][T]['background']
->}`;
-type BrandColorString = `brand.${DotNotationColorStringToken<Theme['colors']['brand']>}`;
-type OverlayColor = BackgroundColorString<'surface'> | BrandColorString;
+type InteractiveTokens = DotNotationToken<Theme['colors']['interactive']['background']>;
+type FeedbackTokens = DotNotationToken<Theme['colors']['feedback']['background']>;
+type SurfaceTokens = DotNotationToken<Theme['colors']['surface']['background']>;
+type OverlayTokens = DotNotationToken<Theme['colors']['overlay']>;
+type OverlayColor =
+  | `interactive.background.${InteractiveTokens}`
+  | `feedback.background.${FeedbackTokens}`
+  | `surface.background.${SurfaceTokens}`
+  | `overlay.${OverlayTokens}`;
 
 type CarouselProps = {
   /**
diff --git a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
index 96f1d25cfbd..56cbca15bd0 100644
--- a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
@@ -16,12 +16,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Checkbox"
       componentDescription="Checkbox can be used in forms when a user needs to select multiple values from several options."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=11169%3A230354',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026"
     >
       <Title>Usage</Title>
       <Sandbox showConsole>
diff --git a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
index cda98a0cc0a..d1e7cc1378a 100644
--- a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
+++ b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -16,12 +16,7 @@ const Page = (): React.ReactElement => {
       componentName="CheckboxGroup"
       componentDescription="CheckboxGroup can be used to group together multiple checkboxes in a forms which provides out of the box state management for the multi-checkboxes and other features."
       apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Checkbox/_decisions/decisions.md"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=11169%3A230590',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026"
     >
       <Title>Usage</Title>
       <Sandbox showConsole editorHeight={400}>
diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
index 69386c21ef5..588a92a35cc 100644
--- a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
+++ b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
@@ -78,10 +78,7 @@ const CheckboxIcon = ({
   size,
 }: CheckboxIconProps) => {
   const { theme } = useTheme();
-  const defaultIconColor = getIn(theme, 'colors.brand.gray.200.lowContrast');
-  const disabledIconColor = getIn(theme, 'colors.brand.gray.500.lowContrast');
-  const iconColor = isDisabled ? disabledIconColor : defaultIconColor;
-
+  const iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');
   return (
     <CheckboxIconWrapper
       size={size}
diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.ts b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.ts
index 35b6019ed6f..28f6e8e4124 100644
--- a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.ts
+++ b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.ts
@@ -24,8 +24,8 @@ const getCheckboxIconWrapperStyles = ({
   const checked = isChecked ? 'checked' : 'unchecked';
   const background = checkboxIconColors.variants[variant].background[checked];
   const border = checkboxIconColors.variants[variant].border[checked];
-  const backgroundColor = background === 'transparent' ? background : getIn(theme, background);
-  const borderColor = border === 'transparent' ? border : getIn(theme, border);
+  const backgroundColor = getIn(theme, background);
+  const borderColor = getIn(theme, border);
 
   return {
     position: 'relative',
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
index 539702f2384..a83517d11db 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
@@ -95,8 +95,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "borderColor": "hsla(214, 18%, 69%, 1)",
+                  "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                  "borderColor": "hsla(211, 27%, 76%, 1)",
                   "borderRadius": 2,
                   "borderStyle": "solid",
                   "borderWidth": 1.5,
@@ -126,20 +126,22 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
           />
           <Text
             accessible={true}
-            color="surface.text.subtle.lowContrast"
-            data-blade-component="base-text"
+            color="surface.text.gray.subtle"
+            data-blade-component="text"
             fontFamily="text"
             fontSize={100}
+            fontStyle="normal"
             fontWeight="regular"
             lineHeight={100}
             style={
               [
                 {
-                  "color": "hsla(216, 27%, 36%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -259,8 +261,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "borderColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                  "borderColor": "hsla(214, 40%, 92%, 1)",
                   "borderRadius": 2,
                   "borderStyle": "solid",
                   "borderWidth": 1.5,
@@ -290,20 +292,22 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
           />
           <Text
             accessible={true}
-            color="surface.text.placeholder.lowContrast"
-            data-blade-component="base-text"
+            color="surface.text.gray.disabled"
+            data-blade-component="text"
             fontFamily="text"
             fontSize={100}
+            fontStyle="normal"
             fontWeight="regular"
             lineHeight={100}
             style={
               [
                 {
-                  "color": "hsla(214, 18%, 69%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 20%, 52%, 0.32)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -423,8 +427,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-                  "borderColor": "hsla(8, 73%, 47%, 1)",
+                  "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                  "borderColor": "hsla(4, 74%, 49%, 1)",
                   "borderRadius": 2,
                   "borderStyle": "solid",
                   "borderWidth": 1.5,
@@ -454,20 +458,22 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           />
           <Text
             accessible={true}
-            color="surface.text.subtle.lowContrast"
-            data-blade-component="base-text"
+            color="surface.text.gray.subtle"
+            data-blade-component="text"
             fontFamily="text"
             fontSize={100}
+            fontStyle="normal"
             fontWeight="regular"
             lineHeight={100}
             style={
               [
                 {
-                  "color": "hsla(216, 27%, 36%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -555,7 +561,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4291770400}
+              fill={4292422944}
               propList={
                 [
                   "fill",
@@ -564,7 +570,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4291770400}
+              fill={4292422944}
               propList={
                 [
                   "fill",
@@ -574,7 +580,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4291770400}
+              fill={4292422944}
               fillRule={0}
               propList={
                 [
@@ -597,20 +603,22 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
         />
         <Text
           accessible={true}
-          color="feedback.text.negative.lowContrast"
-          data-blade-component="base-text"
+          color="feedback.text.negative.intense"
+          data-blade-component="text"
           fontFamily="text"
           fontSize={50}
           fontStyle="italic"
+          fontWeight="regular"
           lineHeight={50}
           style={
             [
               {
-                "color": "hsla(8, 73%, 47%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(4, 74%, 49%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 11,
                 "fontStyle": "italic",
                 "fontWeight": "400",
+                "letterSpacing": 0,
                 "lineHeight": 16,
                 "marginBottom": 0,
                 "marginLeft": 0,
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.ssr.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.ssr.test.tsx.snap
index 785d3089345..d243f011164 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Checkbox /> should render checkbox with error validationState 1`] = `"<div id="root"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="true" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 glQaoY" checked=""/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 fUjvO"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="hsla(220, 27%, 98%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:1;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 klzUIs"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="hsla(220, 27%, 98%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><div class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="base-text">Remember password</div></div></div></label><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(8, 73%, 47%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO cwRPCX" id="checkbox-undefined-errortext-undefined" data-blade-component="base-text">This has to be checked</span></span></div></div></div>"`;
+exports[`<Checkbox /> should render checkbox with error validationState 1`] = `"<div id="root"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="true" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" checked=""/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 lgvKoe"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:1;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 klzUIs"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Remember password</p></div></div></label><div id="checkbox-undefined-errortext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(4, 74%, 49%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO mgsbJ" data-blade-component="text">This has to be checked</span></span></div></div></div>"`;
 
 exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
 .c4.c4.c4.c4.c4 {
@@ -26,8 +26,8 @@ exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 2px;
-  background-color: hsla(8,73%,47%,1);
-  border-color: hsla(8,73%,47%,1);
+  background-color: hsla(4,74%,49%,1);
+  border-color: hsla(4,74%,49%,1);
 }
 
 .c5.c5.c5.c5.c5 {
@@ -82,27 +82,35 @@ exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -134,8 +142,14 @@ exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
 }
 
 .c3.c3.c3.c3.c3:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 <div
@@ -190,9 +204,9 @@ exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
                   clip-rule="evenodd"
                   d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                   data-blade-component="svg-path"
-                  fill="hsla(220, 27%, 98%, 1)"
+                  fill="hsla(0, 0%, 100%, 1)"
                   fill-rule="evenodd"
-                  stroke="hsla(220, 27%, 98%, 1)"
+                  stroke="hsla(0, 0%, 100%, 1)"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="0.5"
@@ -216,9 +230,9 @@ exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
                   clip-rule="evenodd"
                   d="M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z"
                   data-blade-component="svg-path"
-                  fill="hsla(220, 27%, 98%, 1)"
+                  fill="hsla(0, 0%, 100%, 1)"
                   fill-rule="evenodd"
-                  stroke="hsla(220, 27%, 98%, 1)"
+                  stroke="hsla(0, 0%, 100%, 1)"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="0.5"
@@ -230,18 +244,19 @@ exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
             class="c6"
             data-blade-component="base-box"
           />
-          <div
+          <p
             class="c7"
-            data-blade-component="base-text"
+            data-blade-component="text"
           >
             Remember password
-          </div>
+          </p>
         </div>
       </div>
     </label>
     <div
       class="c8"
       data-blade-component="base-box"
+      id="checkbox-1-errortext-3"
     >
       <span
         class="c9"
@@ -260,18 +275,18 @@ exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(8, 73%, 47%, 1)"
+            fill="hsla(4, 74%, 49%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(8, 73%, 47%, 1)"
+            fill="hsla(4, 74%, 49%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(8, 73%, 47%, 1)"
+            fill="hsla(4, 74%, 49%, 1)"
             fill-rule="evenodd"
           />
         </svg>
@@ -281,8 +296,7 @@ exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
         />
         <span
           class="c11"
-          data-blade-component="base-text"
-          id="checkbox-1-errortext-3"
+          data-blade-component="text"
         >
           This has to be checked
         </span>
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap
index 56ec3c814b8..ba539b51140 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap
@@ -24,8 +24,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 2px;
-  background-color: transparent;
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(211,27%,76%,1);
 }
 
 .c5.c5.c5.c5.c5 {
@@ -72,27 +72,35 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -125,13 +133,19 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
 }
 
 .c3.c3.c3.c3.c3:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c3.c3.c3.c3.c3:hover + div {
-  border-color: hsla(214,18%,69%,1);
-  background-color: hsla(216,15%,54%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -164,7 +178,7 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
 }
 
 .c8.c8.c8.c8.c8:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c8.c8.c8.c8.c8 * {
@@ -224,9 +238,9 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
                   clip-rule="evenodd"
                   d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                   data-blade-component="svg-path"
-                  fill="hsla(220, 27%, 98%, 1)"
+                  fill="hsla(0, 0%, 100%, 1)"
                   fill-rule="evenodd"
-                  stroke="hsla(220, 27%, 98%, 1)"
+                  stroke="hsla(0, 0%, 100%, 1)"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="0.5"
@@ -242,9 +256,9 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
             class="c6"
             data-blade-component="base-box"
           />
-          <div
+          <p
             class="c7"
-            data-blade-component="base-text"
+            data-blade-component="text"
           >
             I accept 
             <a
@@ -266,7 +280,7 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
                 </span>
               </span>
             </a>
-          </div>
+          </p>
         </div>
       </div>
     </label>
@@ -298,8 +312,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 2px;
-  background-color: transparent;
-  border-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(214,40%,92%,1);
 }
 
 .c5.c5.c5.c5.c5 {
@@ -332,14 +346,18 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -371,8 +389,14 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
 }
 
 .c3.c3.c3.c3.c3:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 <div>
@@ -424,9 +448,9 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
                   clip-rule="evenodd"
                   d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                   data-blade-component="svg-path"
-                  fill="hsla(214, 18%, 69%, 1)"
+                  fill="hsla(0, 0%, 100%, 1)"
                   fill-rule="evenodd"
-                  stroke="hsla(214, 18%, 69%, 1)"
+                  stroke="hsla(0, 0%, 100%, 1)"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="0.5"
@@ -442,12 +466,12 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
             class="c6"
             data-blade-component="base-box"
           />
-          <div
+          <p
             class="c7"
-            data-blade-component="base-text"
+            data-blade-component="text"
           >
             Remember password
-          </div>
+          </p>
         </div>
       </div>
     </label>
@@ -479,8 +503,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 2px;
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(8,73%,47%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(4,74%,49%,1);
 }
 
 .c5.c5.c5.c5.c5 {
@@ -535,27 +559,35 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -587,8 +619,14 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
 }
 
 .c3.c3.c3.c3.c3:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 <div>
@@ -640,9 +678,9 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
                   clip-rule="evenodd"
                   d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                   data-blade-component="svg-path"
-                  fill="hsla(220, 27%, 98%, 1)"
+                  fill="hsla(0, 0%, 100%, 1)"
                   fill-rule="evenodd"
-                  stroke="hsla(220, 27%, 98%, 1)"
+                  stroke="hsla(0, 0%, 100%, 1)"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="0.5"
@@ -658,18 +696,19 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
             class="c6"
             data-blade-component="base-box"
           />
-          <div
+          <p
             class="c7"
-            data-blade-component="base-text"
+            data-blade-component="text"
           >
             Remember password
-          </div>
+          </p>
         </div>
       </div>
     </label>
     <div
       class="c8"
       data-blade-component="base-box"
+      id="checkbox-19-errortext-21"
     >
       <span
         class="c9"
@@ -688,18 +727,18 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(8, 73%, 47%, 1)"
+            fill="hsla(4, 74%, 49%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(8, 73%, 47%, 1)"
+            fill="hsla(4, 74%, 49%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(8, 73%, 47%, 1)"
+            fill="hsla(4, 74%, 49%, 1)"
             fill-rule="evenodd"
           />
         </svg>
@@ -709,8 +748,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
         />
         <span
           class="c11"
-          data-blade-component="base-text"
-          id="checkbox-19-errortext-21"
+          data-blade-component="text"
         >
           This has to be checked
         </span>
@@ -744,8 +782,8 @@ exports[`<Checkbox /> should set to indeterminate state of checkbox 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 2px;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c5.c5.c5.c5.c5 {
@@ -783,14 +821,18 @@ exports[`<Checkbox /> should set to indeterminate state of checkbox 1`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -822,13 +864,19 @@ exports[`<Checkbox /> should set to indeterminate state of checkbox 1`] = `
 }
 
 .c3.c3.c3.c3.c3:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c3.c3.c3.c3.c3:hover + div {
-  border-color: hsla(223,95%,48%,1);
-  background-color: hsla(223,95%,48%,1);
+  border-color: hsla(227,71%,51%,1);
+  background-color: hsla(227,71%,51%,1);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -884,9 +932,9 @@ exports[`<Checkbox /> should set to indeterminate state of checkbox 1`] = `
                   clip-rule="evenodd"
                   d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                   data-blade-component="svg-path"
-                  fill="hsla(220, 27%, 98%, 1)"
+                  fill="hsla(0, 0%, 100%, 1)"
                   fill-rule="evenodd"
-                  stroke="hsla(220, 27%, 98%, 1)"
+                  stroke="hsla(0, 0%, 100%, 1)"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="0.5"
@@ -910,9 +958,9 @@ exports[`<Checkbox /> should set to indeterminate state of checkbox 1`] = `
                   clip-rule="evenodd"
                   d="M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z"
                   data-blade-component="svg-path"
-                  fill="hsla(220, 27%, 98%, 1)"
+                  fill="hsla(0, 0%, 100%, 1)"
                   fill-rule="evenodd"
-                  stroke="hsla(220, 27%, 98%, 1)"
+                  stroke="hsla(0, 0%, 100%, 1)"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="0.5"
@@ -924,12 +972,12 @@ exports[`<Checkbox /> should set to indeterminate state of checkbox 1`] = `
             class="c7"
             data-blade-component="base-box"
           />
-          <div
+          <p
             class="c8"
-            data-blade-component="base-text"
+            data-blade-component="text"
           >
             Remember password
-          </div>
+          </p>
         </div>
       </div>
     </label>
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
index 6ed758359d1..8497d2b2f86 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
@@ -65,23 +65,24 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
-            fontWeight="bold"
-            lineHeight={50}
+            fontWeight="semibold"
+            lineHeight={75}
             numberOfLines={2}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
-                  "lineHeight": 16,
+                  "fontWeight": "600",
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -128,7 +129,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -138,11 +139,12 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -282,8 +284,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 2,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -313,20 +315,22 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -447,8 +451,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 2,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -478,20 +482,22 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -612,8 +618,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 2,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -643,20 +649,22 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -750,23 +758,24 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
-            fontWeight="bold"
-            lineHeight={50}
+            fontWeight="semibold"
+            lineHeight={75}
             numberOfLines={2}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
-                  "lineHeight": 16,
+                  "fontWeight": "600",
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -813,7 +822,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -823,11 +832,12 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -967,8 +977,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 2,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -998,20 +1008,22 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -1132,8 +1144,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 2,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -1163,20 +1175,22 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -1297,8 +1311,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 2,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -1328,20 +1342,22 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -1391,20 +1407,22 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.muted.lowContrast"
-              data-blade-component="base-text"
+              color="surface.text.gray.muted"
+              data-blade-component="text"
               fontFamily="text"
               fontSize={50}
               fontStyle="italic"
+              fontWeight="regular"
               lineHeight={50}
               style={
                 [
                   {
-                    "color": "hsla(216, 16%, 60%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 11,
                     "fontStyle": "italic",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 16,
                     "marginBottom": 0,
                     "marginLeft": 0,
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap
index 8a5357c7abd..2cd476df6f8 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<CheckboxGroup /> should render errorText when validationState is set to error 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="checkbox-group-undefined-label-undefined" data-blade-component="checkbox-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:16px" id="checkbox-group-undefined-label-undefined" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Select fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">,Invalid selection </p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 glQaoY" value="apple"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 isIHBR"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="hsla(220, 27%, 98%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><div class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="base-text">Apple</div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 glQaoY" value="mango"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 isIHBR"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="hsla(220, 27%, 98%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><div class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="base-text">Mango</div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 glQaoY" value="orange"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 isIHBR"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="hsla(220, 27%, 98%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><div class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="base-text">Orange</div></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(8, 73%, 47%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO cwRPCX" data-blade-component="base-text">Invalid selection</span></span></div></div></div></div></div>"`;
+exports[`<CheckboxGroup /> should render errorText when validationState is set to error 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="checkbox-group-undefined-label-undefined" data-blade-component="checkbox-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:16px" id="checkbox-group-undefined-label-undefined" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Select fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">,Invalid selection </p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" value="apple"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 ctRwLs"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Apple</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" value="mango"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 ctRwLs"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Mango</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bJPbHG" value="orange"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 ctRwLs"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 dyGiAZ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Orange</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(4, 74%, 49%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO mgsbJ" data-blade-component="text">Invalid selection</span></span></div></div></div></div></div>"`;
 
 exports[`<CheckboxGroup /> should render errorText when validationState is set to error 2`] = `
 .c9.c9.c9.c9.c9 {
@@ -26,8 +26,8 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
   border-style: solid;
   margin: 2px;
   border-radius: 2px;
-  background-color: hsla(9,91%,56%,0.09);
-  border-color: hsla(8,73%,47%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(4,74%,49%,1);
 }
 
 .c10.c10.c10.c10.c10 {
@@ -109,14 +109,18 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -127,40 +131,52 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c17.c17.c17.c17.c17 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -209,8 +225,14 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
 }
 
 .c8.c8.c8.c8.c8:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 <div
@@ -319,9 +341,9 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                             clip-rule="evenodd"
                             d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                             data-blade-component="svg-path"
-                            fill="hsla(220, 27%, 98%, 1)"
+                            fill="hsla(0, 0%, 100%, 1)"
                             fill-rule="evenodd"
-                            stroke="hsla(220, 27%, 98%, 1)"
+                            stroke="hsla(0, 0%, 100%, 1)"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             stroke-width="0.5"
@@ -337,12 +359,12 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Apple
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -400,9 +422,9 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                             clip-rule="evenodd"
                             d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                             data-blade-component="svg-path"
-                            fill="hsla(220, 27%, 98%, 1)"
+                            fill="hsla(0, 0%, 100%, 1)"
                             fill-rule="evenodd"
-                            stroke="hsla(220, 27%, 98%, 1)"
+                            stroke="hsla(0, 0%, 100%, 1)"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             stroke-width="0.5"
@@ -418,12 +440,12 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Mango
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -481,9 +503,9 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                             clip-rule="evenodd"
                             d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                             data-blade-component="svg-path"
-                            fill="hsla(220, 27%, 98%, 1)"
+                            fill="hsla(0, 0%, 100%, 1)"
                             fill-rule="evenodd"
-                            stroke="hsla(220, 27%, 98%, 1)"
+                            stroke="hsla(0, 0%, 100%, 1)"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             stroke-width="0.5"
@@ -499,12 +521,12 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Orange
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -532,18 +554,18 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
               <path
                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                 data-blade-component="svg-path"
-                fill="hsla(8, 73%, 47%, 1)"
+                fill="hsla(4, 74%, 49%, 1)"
               />
               <path
                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                 data-blade-component="svg-path"
-                fill="hsla(8, 73%, 47%, 1)"
+                fill="hsla(4, 74%, 49%, 1)"
               />
               <path
                 clip-rule="evenodd"
                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                 data-blade-component="svg-path"
-                fill="hsla(8, 73%, 47%, 1)"
+                fill="hsla(4, 74%, 49%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
@@ -553,7 +575,7 @@ exports[`<CheckboxGroup /> should render errorText when validationState is set t
             />
             <span
               class="c17"
-              data-blade-component="base-text"
+              data-blade-component="text"
             >
               Invalid selection
             </span>
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap
index 4dafe2cad1e..b7fffc701a2 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.web.test.tsx.snap
@@ -24,8 +24,8 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 2px;
-  background-color: transparent;
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(211,27%,76%,1);
 }
 
 .c10.c10.c10.c10.c10 {
@@ -103,14 +103,18 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -121,40 +125,52 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c16.c16.c16.c16.c16 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -203,13 +219,19 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
 }
 
 .c8.c8.c8.c8.c8:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c8.c8.c8.c8.c8:hover + div {
-  border-color: hsla(214,18%,69%,1);
-  background-color: hsla(216,15%,54%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -319,9 +341,9 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                             clip-rule="evenodd"
                             d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                             data-blade-component="svg-path"
-                            fill="hsla(220, 27%, 98%, 1)"
+                            fill="hsla(0, 0%, 100%, 1)"
                             fill-rule="evenodd"
-                            stroke="hsla(220, 27%, 98%, 1)"
+                            stroke="hsla(0, 0%, 100%, 1)"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             stroke-width="0.5"
@@ -337,12 +359,12 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Apple
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -399,9 +421,9 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                             clip-rule="evenodd"
                             d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                             data-blade-component="svg-path"
-                            fill="hsla(220, 27%, 98%, 1)"
+                            fill="hsla(0, 0%, 100%, 1)"
                             fill-rule="evenodd"
-                            stroke="hsla(220, 27%, 98%, 1)"
+                            stroke="hsla(0, 0%, 100%, 1)"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             stroke-width="0.5"
@@ -417,12 +439,12 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Mango
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -479,9 +501,9 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                             clip-rule="evenodd"
                             d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                             data-blade-component="svg-path"
-                            fill="hsla(220, 27%, 98%, 1)"
+                            fill="hsla(0, 0%, 100%, 1)"
                             fill-rule="evenodd"
-                            stroke="hsla(220, 27%, 98%, 1)"
+                            stroke="hsla(0, 0%, 100%, 1)"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             stroke-width="0.5"
@@ -497,12 +519,12 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Orange
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -520,7 +542,7 @@ exports[`<CheckboxGroup /> should render with help text 1`] = `
           >
             <span
               class="c16"
-              data-blade-component="base-text"
+              data-blade-component="text"
             >
               Select one
             </span>
@@ -556,8 +578,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 2px;
-  background-color: transparent;
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(211,27%,76%,1);
 }
 
 .c10.c10.c10.c10.c10 {
@@ -617,14 +639,18 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -635,27 +661,35 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -704,13 +738,19 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
 }
 
 .c8.c8.c8.c8.c8:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c8.c8.c8.c8.c8:hover + div {
-  border-color: hsla(214,18%,69%,1);
-  background-color: hsla(216,15%,54%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -820,9 +860,9 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                             clip-rule="evenodd"
                             d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                             data-blade-component="svg-path"
-                            fill="hsla(220, 27%, 98%, 1)"
+                            fill="hsla(0, 0%, 100%, 1)"
                             fill-rule="evenodd"
-                            stroke="hsla(220, 27%, 98%, 1)"
+                            stroke="hsla(0, 0%, 100%, 1)"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             stroke-width="0.5"
@@ -838,12 +878,12 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Apple
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -900,9 +940,9 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                             clip-rule="evenodd"
                             d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                             data-blade-component="svg-path"
-                            fill="hsla(220, 27%, 98%, 1)"
+                            fill="hsla(0, 0%, 100%, 1)"
                             fill-rule="evenodd"
-                            stroke="hsla(220, 27%, 98%, 1)"
+                            stroke="hsla(0, 0%, 100%, 1)"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             stroke-width="0.5"
@@ -918,12 +958,12 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Mango
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -980,9 +1020,9 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                             clip-rule="evenodd"
                             d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z"
                             data-blade-component="svg-path"
-                            fill="hsla(220, 27%, 98%, 1)"
+                            fill="hsla(0, 0%, 100%, 1)"
                             fill-rule="evenodd"
-                            stroke="hsla(220, 27%, 98%, 1)"
+                            stroke="hsla(0, 0%, 100%, 1)"
                             stroke-linecap="round"
                             stroke-linejoin="round"
                             stroke-width="0.5"
@@ -998,12 +1038,12 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Orange
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
diff --git a/packages/blade/src/components/Checkbox/checkboxTokens.ts b/packages/blade/src/components/Checkbox/checkboxTokens.ts
index b8c0d6142ad..f5ad3f966db 100644
--- a/packages/blade/src/components/Checkbox/checkboxTokens.ts
+++ b/packages/blade/src/components/Checkbox/checkboxTokens.ts
@@ -1,5 +1,5 @@
+import type { DotNotationToken } from '../../utils/lodashButBetter/get';
 import type { Theme } from '~components/BladeProvider';
-import type { DotNotationColorStringToken } from '~utils/types';
 import type { SelectorInputHoverTokens } from '~components/Form/Selector/types';
 import { size } from '~tokens/global';
 
@@ -28,7 +28,7 @@ const checkboxSizes = {
   },
 } as const;
 
-type ColorTokens = `colors.${DotNotationColorStringToken<Theme['colors']>}` | 'transparent';
+type ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;
 type Variant = {
   border: {
     checked: ColorTokens;
@@ -52,32 +52,32 @@ const checkboxIconColors: CheckboxIconColors = {
   variants: {
     default: {
       border: {
-        checked: 'colors.brand.primary.500',
-        unchecked: 'colors.brand.gray.500.lowContrast',
+        checked: 'colors.interactive.border.primary.default',
+        unchecked: 'colors.interactive.border.gray.default',
       },
       background: {
-        checked: 'colors.brand.primary.500',
-        unchecked: 'transparent',
+        checked: 'colors.interactive.background.primary.default',
+        unchecked: 'colors.transparent',
       },
     },
     disabled: {
       border: {
-        checked: 'transparent',
-        unchecked: 'colors.brand.gray.a100.lowContrast',
+        checked: 'colors.interactive.border.primary.disabled',
+        unchecked: 'colors.interactive.border.gray.disabled',
       },
       background: {
-        checked: 'colors.brand.gray.a100.lowContrast',
-        unchecked: 'transparent',
+        checked: 'colors.interactive.background.primary.disabled',
+        unchecked: 'colors.transparent',
       },
     },
     negative: {
       border: {
-        checked: 'colors.feedback.border.negative.highContrast',
-        unchecked: 'colors.feedback.border.negative.highContrast',
+        checked: 'colors.interactive.border.negative.default',
+        unchecked: 'colors.interactive.border.negative.default',
       },
       background: {
-        checked: 'colors.feedback.background.negative.highContrast',
-        unchecked: 'colors.feedback.background.negative.lowContrast',
+        checked: 'colors.interactive.background.negative.default',
+        unchecked: 'colors.transparent',
       },
     },
   },
@@ -86,12 +86,12 @@ const checkboxIconColors: CheckboxIconColors = {
 const checkboxHoverTokens: SelectorInputHoverTokens = {
   default: {
     background: {
-      checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.a50.lowContrast',
+      checked: 'colors.interactive.background.primary.highlighted',
+      unchecked: 'colors.interactive.background.gray.faded',
     },
     border: {
-      checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.500.lowContrast',
+      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color
+      unchecked: 'colors.interactive.border.gray.default',
     },
   },
 };
diff --git a/packages/blade/src/components/Chip/AnimatedChip.native.tsx b/packages/blade/src/components/Chip/AnimatedChip.native.tsx
index 3a87b1f4ffd..062249df9c6 100644
--- a/packages/blade/src/components/Chip/AnimatedChip.native.tsx
+++ b/packages/blade/src/components/Chip/AnimatedChip.native.tsx
@@ -22,8 +22,8 @@ const AnimatedChip = ({
 }: Omit<AnimatedChipProps, 'theme'>): React.ReactElement => {
   const { theme } = useTheme();
 
-  const easing = getIn(theme, chipMotionTokens.easing);
-  const duration = getIn(theme, chipMotionTokens.duration);
+  const easing = getIn(theme.motion, chipMotionTokens.easing);
+  const duration = getIn(theme.motion, chipMotionTokens.duration);
 
   const chipAnimation = useAnimatedStyle(() => {
     return {
diff --git a/packages/blade/src/components/Chip/AnimatedChip.web.tsx b/packages/blade/src/components/Chip/AnimatedChip.web.tsx
index 9cc85fe9e82..724fb9f7c93 100644
--- a/packages/blade/src/components/Chip/AnimatedChip.web.tsx
+++ b/packages/blade/src/components/Chip/AnimatedChip.web.tsx
@@ -8,8 +8,10 @@ import { makeMotionTime } from '~utils/makeMotionTime';
 import { castWebType } from '~utils';
 
 const AnimatedChip = styled(BaseBox)<AnimatedChipProps>((props) => {
-  const easing = getIn(props.theme, chipMotionTokens.easing);
-  const duration = castWebType(makeMotionTime(getIn(props.theme, chipMotionTokens.duration)));
+  const easing = getIn(props.theme.motion, chipMotionTokens.easing);
+  const duration = castWebType(
+    makeMotionTime(getIn(props.theme.motion, chipMotionTokens.duration)),
+  );
   return {
     ...getAnimatedChipStyles(props),
     width: 'fit-content',
diff --git a/packages/blade/src/components/Chip/Chip.stories.tsx b/packages/blade/src/components/Chip/Chip.stories.tsx
index f8f04cf43d8..2c05c063b49 100644
--- a/packages/blade/src/components/Chip/Chip.stories.tsx
+++ b/packages/blade/src/components/Chip/Chip.stories.tsx
@@ -27,12 +27,7 @@ const Page = (): React.ReactElement => {
           </Link>
         </Text>
       }
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=52377%3A23885&mode=design&t=y7gUIBIzzNMRd3w6-1',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?type=design&node-id=18358%3A3135&mode=design&t=FzNrQV6ZZaLoxzcj-1',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=52377%3A23885&mode=design&t=y7gUIBIzzNMRd3w6-1"
     />
   );
 };
@@ -81,29 +76,16 @@ export default {
         },
       },
     },
-    intent: {
-      description: 'This is deprecated in favor of the `color` prop.',
-      table: {
-        category: propsCategory.CHIP,
-        type: {
-          summary: '"none" | "positive" | "negative"',
-        },
-      },
-      options: ['none', 'positive', 'negative'],
-      control: {
-        type: 'radio',
-      },
-    },
     color: {
       description:
         'Sets the color of the Chip. This overwrites the color set by the parent `ChipGroup` component',
       table: {
         category: propsCategory.CHIP,
         type: {
-          summary: '"default" | "positive" | "negative"',
+          summary: '"primary" | "positive" | "negative"',
         },
       },
-      options: ['default', 'positive', 'negative'],
+      options: ['primary', 'positive', 'negative'],
       control: {
         type: 'radio',
       },
@@ -138,5 +120,5 @@ const ChipTemplate: StoryFn<typeof ChipComponent> = ({ children, ...args }) => {
 export const Default = ChipTemplate.bind({});
 Default.storyName = 'Default';
 Default.args = {
-  color: 'default',
+  color: 'primary',
 };
diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx
index 922e723810f..854fd2e7f97 100644
--- a/packages/blade/src/components/Chip/Chip.tsx
+++ b/packages/blade/src/components/Chip/Chip.tsx
@@ -37,7 +37,7 @@ type OnChange = ({
 }) => void;
 
 const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
-  { isDisabled, value, children, icon: Icon, intent, color, testID, ...styledProps },
+  { isDisabled, value, children, icon: Icon, color, testID, ...styledProps },
   ref,
 ) => {
   const { theme } = useTheme();
@@ -67,10 +67,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
       : groupProps?.defaultValue?.includes(value as string); // If multiple selection, check if value is in defaultValue array
   const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox;
   const _size = groupProps?.size || 'small';
-  const _intent = intent ?? groupProps?.intent;
-  // If intent is proovided and it's not none, use intent otherwise use color
-  const _color = color ?? groupProps?.color ?? 'default';
-  const chipColor = _intent && _intent !== 'none' ? _intent : _color;
+  const chipColor = color ?? groupProps?.color ?? 'primary';
 
   const handleChange: OnChange = ({ isChecked, value }) => {
     if (isChecked) {
@@ -129,13 +126,13 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
   const chipTextColor = chipColorTokens.text[textVariant];
   const chipIconColor = chipColorTokens.icon[textVariant];
 
-  let intentVariant = 'unchecked';
+  let colorVariant = 'unchecked';
   const stateVariant = _isDisabled ? 'disabled' : 'default';
   if (_isChecked && chipColor) {
-    intentVariant = chipColor;
+    colorVariant = chipColor;
   }
-  const chipBackgroundColor = chipColorTokens.background[intentVariant][stateVariant];
-  const chipBorderColor = chipColorTokens.border[intentVariant][stateVariant];
+  const chipBackgroundColor = chipColorTokens.background[colorVariant][stateVariant];
+  const chipBorderColor = chipColorTokens.border[colorVariant][stateVariant];
 
   return (
     <BaseBox
@@ -200,12 +197,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
                     <Icon color={chipIconColor} size={chipIconSizes[_size]} />
                   </BaseBox>
                 ) : null}
-                <Text
-                  {...chipTextSizes[_size]}
-                  type="normal"
-                  truncateAfterLines={1}
-                  color={chipTextColor}
-                >
+                <Text {...chipTextSizes[_size]} truncateAfterLines={1} color={chipTextColor}>
                   {children}
                 </Text>
               </StyledChipWrapper>
diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx
index aa439fe4007..9f810ee9783 100644
--- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx
+++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type { ChipGroupProps } from './ChipGroup';
 import { ChipGroup as ChipGroupComponent } from './ChipGroup';
 import { Chip as ChipComponent } from './Chip';
-import { Heading, Text, Title, Code } from '~components/Typography';
+import { Heading, Text, Code } from '~components/Typography';
 import {
   PaymentLinksIcon,
   TagIcon,
@@ -16,11 +16,13 @@ import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { Box } from '~components/Box';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 import iconMap from '~components/Icons/iconMap';
-import { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';
-import { ActionList, ActionListItem } from '~components/ActionList';
+// import { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';
+// import { ActionList, ActionListItem } from '~components/ActionList';
 import type { BladeElementRef } from '~utils/types';
 import { Button } from '~components/Button';
 import { Link } from '~components/Link';
+import { Dropdown, DropdownButton, DropdownOverlay } from '~components/Dropdown';
+import { ActionList, ActionListItem } from '~components/ActionList';
 
 const Page = (): React.ReactElement => {
   return (
@@ -28,12 +30,7 @@ const Page = (): React.ReactElement => {
       componentDescription="Chips represents a collection of selectable objects which enable users to make selections, filter content, and trigger relevant actions. Chips can have either single selection or multiple (based on context)."
       componentName="ChipGroup"
       imports={`import { Chip, ChipGroup } from '@razorpay/blade/components';\nimport type { ChipProps, ChipGroupProps } from '@razorpay/blade/components';`}
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=52377%3A23885&mode=design&t=y7gUIBIzzNMRd3w6-1',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?type=design&node-id=18358%3A3135&mode=design&t=FzNrQV6ZZaLoxzcj-1',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=52377%3A23885&mode=design&t=y7gUIBIzzNMRd3w6-1"
       note={
         <Text>
           Chip is a combination of ChipGroup and Chip components. This story demonstrates only the
@@ -44,7 +41,7 @@ const Page = (): React.ReactElement => {
         </Text>
       }
     >
-      <Title>Usage</Title>
+      <Heading size="large">Usage</Heading>
       <Sandbox showConsole editorHeight={400}>
         {`
           import { Box, Chip, ChipGroup, Text } from '@razorpay/blade/components';
@@ -172,28 +169,15 @@ export default {
         },
       },
     },
-    intent: {
-      description: `This prop is deprecated, use 'color' instead.`,
-      table: {
-        category: propsCategory.CHIP_GROUP,
-        type: {
-          summary: '"none" | "positive" | "negative"',
-        },
-      },
-      options: ['none', 'positive', 'negative'],
-      control: {
-        type: 'select',
-      },
-    },
     color: {
       description: `Sets the ChipGroups's visual color, it will propagate down to all the Chips`,
       table: {
         category: propsCategory.CHIP_GROUP,
         type: {
-          summary: '"default" | "positive" | "negative"',
+          summary: '"primary" | "positive" | "negative"',
         },
       },
-      options: ['default', 'positive', 'negative'],
+      options: ['primary', 'positive', 'negative'],
       control: {
         type: 'select',
       },
@@ -482,7 +466,7 @@ ChipWithIcon.parameters = {
 const ChipColorsTemplate: StoryFn<typeof ChipGroupComponent> = (args) => {
   return (
     <Box display="flex" flexDirection="column">
-      <Text size="large" weight="bold" marginBottom="spacing.3">
+      <Text size="large" weight="semibold" marginBottom="spacing.3">
         Is the result helpful?
       </Text>
 
@@ -498,13 +482,13 @@ const ChipColorsTemplate: StoryFn<typeof ChipGroupComponent> = (args) => {
   );
 };
 
-export const ChipWithIntent = ChipColorsTemplate.bind({});
-ChipWithIntent.storyName = 'With Color';
-ChipWithIntent.args = {
+export const ChipWithColor = ChipColorsTemplate.bind({});
+ChipWithColor.storyName = 'With Color';
+ChipWithColor.args = {
   selectionType: 'single',
   accessibilityLabel: 'Is the result helpful? Please select either yer or no',
 };
-ChipWithIntent.parameters = {
+ChipWithColor.parameters = {
   controls: {
     exclude: ['icon'],
   },
@@ -546,7 +530,7 @@ const AllChipSizesTemplate: StoryFn<typeof ChipGroupComponent> = ({ children, ..
     <Box>
       {sizes.map((size, index) => (
         <Box key={index}>
-          <Heading size="medium" marginBottom="spacing.3">
+          <Heading marginBottom="spacing.3" size="small">
             {size}
           </Heading>
           <Box marginBottom="spacing.3">
diff --git a/packages/blade/src/components/Chip/ChipGroup.tsx b/packages/blade/src/components/Chip/ChipGroup.tsx
index ebf97514513..0deecd25aef 100644
--- a/packages/blade/src/components/Chip/ChipGroup.tsx
+++ b/packages/blade/src/components/Chip/ChipGroup.tsx
@@ -19,8 +19,7 @@ const ChipGroup = ({
   onChange,
   value,
   size = 'small',
-  intent = 'none',
-  color,
+  color = 'primary',
   testID,
   selectionType = 'single',
   ...styledProps
@@ -32,7 +31,6 @@ const ChipGroup = ({
     isDisabled,
     name,
     size,
-    intent,
     color,
     selectionType,
   });
diff --git a/packages/blade/src/components/Chip/StyledChipWrapper.web.tsx b/packages/blade/src/components/Chip/StyledChipWrapper.web.tsx
index 4bc808b947b..ece17d72734 100644
--- a/packages/blade/src/components/Chip/StyledChipWrapper.web.tsx
+++ b/packages/blade/src/components/Chip/StyledChipWrapper.web.tsx
@@ -8,8 +8,8 @@ import { castWebType } from '~utils';
 
 const StyledChipWrapper = styled(BaseBox)<StyledChipWrapperProps>(
   ({ theme, borderColor, isChecked, isDisabled, color }) => {
-    const easing = getIn(theme, chipMotionTokens.easing);
-    const duration = castWebType(makeMotionTime(getIn(theme, chipMotionTokens.duration)));
+    const easing = getIn(theme.motion, chipMotionTokens.easing);
+    const duration = castWebType(makeMotionTime(getIn(theme.motion, chipMotionTokens.duration)));
 
     return {
       display: 'flex',
diff --git a/packages/blade/src/components/Chip/__tests__/Chip.native.test.tsx b/packages/blade/src/components/Chip/__tests__/Chip.native.test.tsx
index 427b28ddb6b..3e593b7a7f4 100644
--- a/packages/blade/src/components/Chip/__tests__/Chip.native.test.tsx
+++ b/packages/blade/src/components/Chip/__tests__/Chip.native.test.tsx
@@ -38,13 +38,13 @@ describe('<Chip />', () => {
     expect(getByText('Mango')).toBeDefined();
   });
 
-  it('should render chip with intent', () => {
+  it('should render chip with color', () => {
     const { getByText } = renderWithTheme(
       <ChipGroup accessibilityLabel="Was this message helpful?">
-        <Chip value="apple" intent="positive">
+        <Chip value="apple" color="positive">
           Yes
         </Chip>
-        <Chip value="mango" intent="negative">
+        <Chip value="mango" color="negative">
           No
         </Chip>
       </ChipGroup>,
diff --git a/packages/blade/src/components/Chip/__tests__/Chip.web.test.tsx b/packages/blade/src/components/Chip/__tests__/Chip.web.test.tsx
index 59a42ceae44..d24c2417af1 100644
--- a/packages/blade/src/components/Chip/__tests__/Chip.web.test.tsx
+++ b/packages/blade/src/components/Chip/__tests__/Chip.web.test.tsx
@@ -39,22 +39,6 @@ describe('<Chip />', () => {
     expect(getByRole('radio', { name: 'Mango' })).toBeInTheDocument();
   });
 
-  it('should render chip with intent', () => {
-    const { getByRole } = renderWithTheme(
-      <ChipGroup accessibilityLabel="Was this message helpful?">
-        <Chip value="apple" intent="positive">
-          Yes
-        </Chip>
-        <Chip value="mango" intent="negative">
-          No
-        </Chip>
-      </ChipGroup>,
-    );
-
-    expect(getByRole('radio', { name: 'Yes' })).toBeInTheDocument();
-    expect(getByRole('radio', { name: 'No' })).toBeInTheDocument();
-  });
-
   it('should render chip with color', () => {
     const { getByRole } = renderWithTheme(
       <ChipGroup accessibilityLabel="Was this message helpful?">
diff --git a/packages/blade/src/components/Chip/__tests__/ChipGroup.native.test.tsx b/packages/blade/src/components/Chip/__tests__/ChipGroup.native.test.tsx
index dd507316001..3e2b0d9972f 100644
--- a/packages/blade/src/components/Chip/__tests__/ChipGroup.native.test.tsx
+++ b/packages/blade/src/components/Chip/__tests__/ChipGroup.native.test.tsx
@@ -9,8 +9,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 
 const selectionTypes: ChipGroupProps['selectionType'][] = ['single', 'multiple'];
 const sizes: ChipGroupProps['size'][] = ['xsmall', 'small', 'medium', 'large'];
-const intents: ChipGroupProps['intent'][] = ['none', 'positive', 'negative'];
-const colors: ChipGroupProps['color'][] = ['default', 'positive', 'negative'];
+const colors: ChipGroupProps['color'][] = ['primary', 'positive', 'negative'];
 
 beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
 afterAll(() => jest.restoreAllMocks());
@@ -49,26 +48,6 @@ describe('<ChipGroup />', () => {
         });
       });
 
-      intents.forEach((intent) => {
-        it(`should render with intent="${intent}"`, () => {
-          const { getByText } = renderWithTheme(
-            <ChipGroup
-              accessibilityLabel="Select fruits"
-              selectionType={selectionType}
-              intent={intent}
-            >
-              <Chip value="apple">Apple</Chip>
-              <Chip value="mango">Mango</Chip>
-              <Chip value="orange">Orange</Chip>
-            </ChipGroup>,
-          );
-
-          expect(getByText('Apple')).toBeDefined();
-          expect(getByText('Mango')).toBeDefined();
-          expect(getByText('Orange')).toBeDefined();
-        });
-      });
-
       colors.forEach((color) => {
         it(`should render with color="${color}"`, () => {
           const { getByText } = renderWithTheme(
diff --git a/packages/blade/src/components/Chip/__tests__/ChipGroup.web.test.tsx b/packages/blade/src/components/Chip/__tests__/ChipGroup.web.test.tsx
index 7a9897c879a..dc4f776fda0 100644
--- a/packages/blade/src/components/Chip/__tests__/ChipGroup.web.test.tsx
+++ b/packages/blade/src/components/Chip/__tests__/ChipGroup.web.test.tsx
@@ -7,8 +7,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 
 const selectionTypes: ChipGroupProps['selectionType'][] = ['single', 'multiple'];
 const sizes: ChipGroupProps['size'][] = ['xsmall', 'small', 'medium', 'large'];
-const intents: ChipGroupProps['intent'][] = ['none', 'positive', 'negative'];
-const colors: ChipGroupProps['color'][] = ['default', 'positive', 'negative'];
+const colors: ChipGroupProps['color'][] = ['primary', 'positive', 'negative'];
 
 describe('<ChipGroup />', () => {
   for (const selectionType of selectionTypes) {
@@ -48,28 +47,6 @@ describe('<ChipGroup />', () => {
         });
       });
 
-      intents.forEach((intent) => {
-        it(`should render with intent="${intent}"`, () => {
-          const { getByRole } = renderWithTheme(
-            <ChipGroup
-              accessibilityLabel="Select fruits"
-              selectionType={selectionType}
-              intent={intent}
-            >
-              <Chip value="apple">Apple</Chip>
-              <Chip value="mango">Mango</Chip>
-              <Chip value="orange">Orange</Chip>
-            </ChipGroup>,
-          );
-
-          const chipRole = selectionType === 'single' ? 'radio' : 'checkbox';
-          const chipGroupRole = selectionType === 'single' ? 'radiogroup' : 'group';
-          expect(getByRole(chipGroupRole)).toBeInTheDocument();
-          expect(getByRole(chipRole, { name: 'Apple' })).toBeInTheDocument();
-          expect(getByRole(chipRole, { name: 'Mango' })).toBeInTheDocument();
-        });
-      });
-
       colors.forEach((color) => {
         it(`should render with color="${color}"`, () => {
           const { getByRole } = renderWithTheme(
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap
index 8af4a9378ad..2a59f94a51c 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -81,11 +81,12 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -215,7 +216,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.disabled"
                       isDisabled={true}
                       style={
                         [
@@ -223,7 +224,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "transparent",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(214, 40%, 92%, 1)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -247,10 +248,10 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.disabled"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -263,8 +264,8 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(214, 40%, 92%, 1)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -285,7 +286,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.placeholder.lowContrast"
+                          color="interactive.text.gray.disabled"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -296,11 +297,12 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                           style={
                             [
                               {
-                                "color": "hsla(214, 18%, 69%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 20%, 52%, 0.32)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -421,7 +423,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -429,7 +431,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -453,10 +455,10 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -469,8 +471,8 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -491,7 +493,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -502,11 +504,12 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -608,7 +611,7 @@ exports[`<Chip /> should render chip 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -618,11 +621,12 @@ exports[`<Chip /> should render chip 1`] = `
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -752,7 +756,7 @@ exports[`<Chip /> should render chip 1`] = `
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -760,7 +764,7 @@ exports[`<Chip /> should render chip 1`] = `
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -784,10 +788,10 @@ exports[`<Chip /> should render chip 1`] = `
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -800,8 +804,8 @@ exports[`<Chip /> should render chip 1`] = `
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -822,7 +826,7 @@ exports[`<Chip /> should render chip 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -833,11 +837,12 @@ exports[`<Chip /> should render chip 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -958,7 +963,7 @@ exports[`<Chip /> should render chip 1`] = `
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -966,7 +971,7 @@ exports[`<Chip /> should render chip 1`] = `
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -990,10 +995,10 @@ exports[`<Chip /> should render chip 1`] = `
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -1006,8 +1011,8 @@ exports[`<Chip /> should render chip 1`] = `
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -1028,7 +1033,7 @@ exports[`<Chip /> should render chip 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -1039,11 +1044,12 @@ exports[`<Chip /> should render chip 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -1145,7 +1151,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -1155,11 +1161,12 @@ exports[`<Chip /> should render chip with icon 1`] = `
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -1289,7 +1296,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -1297,7 +1304,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -1321,10 +1328,10 @@ exports[`<Chip /> should render chip with icon 1`] = `
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -1337,8 +1344,8 @@ exports[`<Chip /> should render chip with icon 1`] = `
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -1412,7 +1419,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                             >
                               <RNSVGPath
                                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                                fill={4282603381}
+                                fill={4282406509}
                                 propList={
                                   [
                                     "fill",
@@ -1421,7 +1428,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                               />
                               <RNSVGPath
                                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                                fill={4282603381}
+                                fill={4282406509}
                                 propList={
                                   [
                                     "fill",
@@ -1431,7 +1438,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                               <RNSVGPath
                                 clipRule={0}
                                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                                fill={4282603381}
+                                fill={4282406509}
                                 fillRule={0}
                                 propList={
                                   [
@@ -1445,7 +1452,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                         </View>
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -1456,11 +1463,12 @@ exports[`<Chip /> should render chip with icon 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -1581,7 +1589,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -1589,7 +1597,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -1613,10 +1621,10 @@ exports[`<Chip /> should render chip with icon 1`] = `
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -1629,8 +1637,8 @@ exports[`<Chip /> should render chip with icon 1`] = `
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -1704,7 +1712,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                             >
                               <RNSVGPath
                                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                                fill={4282603381}
+                                fill={4282406509}
                                 propList={
                                   [
                                     "fill",
@@ -1713,7 +1721,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                               />
                               <RNSVGPath
                                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                                fill={4282603381}
+                                fill={4282406509}
                                 propList={
                                   [
                                     "fill",
@@ -1723,7 +1731,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                               <RNSVGPath
                                 clipRule={0}
                                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                                fill={4282603381}
+                                fill={4282406509}
                                 fillRule={0}
                                 propList={
                                   [
@@ -1737,7 +1745,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
                         </View>
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -1748,11 +1756,12 @@ exports[`<Chip /> should render chip with icon 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -1854,7 +1863,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -1864,11 +1873,12 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -1998,7 +2008,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.disabled"
                       isDisabled={true}
                       style={
                         [
@@ -2006,7 +2016,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "transparent",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(214, 40%, 92%, 1)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -2030,10 +2040,10 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.disabled"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -2046,8 +2056,8 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(214, 40%, 92%, 1)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -2068,7 +2078,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.placeholder.lowContrast"
+                          color="interactive.text.gray.disabled"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -2079,11 +2089,12 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(214, 18%, 69%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 20%, 52%, 0.32)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -2204,7 +2215,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -2212,7 +2223,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -2236,10 +2247,10 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -2252,8 +2263,8 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -2274,7 +2285,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -2285,11 +2296,12 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap
index 0cf0f1a371b..a45ee6579a6 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Chip /> should render with icon 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx bFzCEy"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bVbDHL" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 dLUtUC dlRwcw"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 eifKyS kpMgoO"><div data-blade-component="base-box" class="BaseBox-bmPWx pZVbf"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(216, 27%, 36%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO jcxqOY" data-blade-component="text">Apple</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bVbDHL" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 dLUtUC dlRwcw"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 eifKyS kpMgoO"><div data-blade-component="base-box" class="BaseBox-bmPWx pZVbf"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(216, 27%, 36%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO jcxqOY" data-blade-component="text">Mango</p></div></div></div></div></label></div></div></div></div></div></div></div>"`;
+exports[`<Chip /> should render with icon 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx bFzCEy"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bFLRoC" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD cCtMTp"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 jlHBbz jpWPz"><div data-blade-component="base-box" class="BaseBox-bmPWx pZVbf"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO fCIpJP" data-blade-component="text">Apple</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bFLRoC" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD cCtMTp"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 jlHBbz jpWPz"><div data-blade-component="base-box" class="BaseBox-bmPWx pZVbf"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO fCIpJP" data-blade-component="text">Mango</p></div></div></div></div></label></div></div></div></div></div></div></div>"`;
 
 exports[`<Chip /> should render with icon 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -63,7 +63,7 @@ exports[`<Chip /> should render with icon 2`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
@@ -87,10 +87,10 @@ exports[`<Chip /> should render with icon 2`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 9999px;
   border-width: 0.5px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
@@ -105,7 +105,7 @@ exports[`<Chip /> should render with icon 2`] = `
 .c11.c11.c11.c11.c11 {
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-width: 1px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -149,7 +149,7 @@ exports[`<Chip /> should render with icon 2`] = `
 }
 
 .c13.c13.c13.c13.c13:hover {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 150ms;
@@ -200,12 +200,19 @@ exports[`<Chip /> should render with icon 2`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9:hover + div {
-  border-color: hsla(214,18%,69%,1);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,1);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -213,27 +220,35 @@ exports[`<Chip /> should render with icon 2`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -391,18 +406,18 @@ exports[`<Chip /> should render with icon 2`] = `
                             <path
                               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                             />
                             <path
                               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                             />
                             <path
                               clip-rule="evenodd"
                               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                               fill-rule="evenodd"
                             />
                           </svg>
@@ -476,18 +491,18 @@ exports[`<Chip /> should render with icon 2`] = `
                             <path
                               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                             />
                             <path
                               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                             />
                             <path
                               clip-rule="evenodd"
                               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                               fill-rule="evenodd"
                             />
                           </svg>
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap
index a7ff3f1d534..05c5e5c078f 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`<Chip /> should render chip 1`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
@@ -85,17 +85,17 @@ exports[`<Chip /> should render chip 1`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 9999px;
   border-width: 0.5px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
 .c11.c11.c11.c11.c11 {
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-width: 1px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -139,7 +139,7 @@ exports[`<Chip /> should render chip 1`] = `
 }
 
 .c13.c13.c13.c13.c13:hover {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 150ms;
@@ -190,12 +190,19 @@ exports[`<Chip /> should render chip 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9:hover + div {
-  border-color: hsla(214,18%,69%,1);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,1);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -203,27 +210,35 @@ exports[`<Chip /> should render chip 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -497,7 +512,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
@@ -521,10 +536,10 @@ exports[`<Chip /> should render chip with icon 1`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 9999px;
   border-width: 0.5px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
@@ -539,7 +554,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
 .c11.c11.c11.c11.c11 {
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-width: 1px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -583,7 +598,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
 }
 
 .c13.c13.c13.c13.c13:hover {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 150ms;
@@ -634,12 +649,19 @@ exports[`<Chip /> should render chip with icon 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9:hover + div {
-  border-color: hsla(214,18%,69%,1);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,1);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -647,27 +669,35 @@ exports[`<Chip /> should render chip with icon 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -823,18 +853,18 @@ exports[`<Chip /> should render chip with icon 1`] = `
                             <path
                               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                             />
                             <path
                               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                             />
                             <path
                               clip-rule="evenodd"
                               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                               fill-rule="evenodd"
                             />
                           </svg>
@@ -908,18 +938,18 @@ exports[`<Chip /> should render chip with icon 1`] = `
                             <path
                               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                             />
                             <path
                               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                             />
                             <path
                               clip-rule="evenodd"
                               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                               data-blade-component="svg-path"
-                              fill="hsla(216, 27%, 36%, 1)"
+                              fill="hsla(211, 26%, 34%, 1)"
                               fill-rule="evenodd"
                             />
                           </svg>
@@ -1005,7 +1035,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(214,40%,92%,1);
   border-style: solid;
 }
 
@@ -1029,17 +1059,49 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 9999px;
   border-width: 0.5px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(214,40%,92%,1);
+  border-style: solid;
+}
+
+.c16.c16.c16.c16.c16 {
+  border-color: hsla(211,20%,52%,0.18);
+  border-style: solid;
+}
+
+.c18.c18.c18.c18.c18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding-right: 12px;
+  padding-left: 12px;
+  height: 28px;
+  background-color: hsla(0,0%,100%,0);
+  border-radius: 9999px;
+  border-width: 0.5px;
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
 .c11.c11.c11.c11.c11 {
   background-color: transparent;
   border-radius: 9999px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(214,40%,92%,1);
   border-width: 1px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1074,10 +1136,10 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c16.c16.c16.c16.c16 {
+.c17.c17.c17.c17.c17 {
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-width: 1px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1120,7 +1182,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   border-color: transparent;
 }
 
-.c17.c17.c17.c17.c17 {
+.c19.c19.c19.c19.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1128,8 +1190,8 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   border-color: transparent;
 }
 
-.c17.c17.c17.c17.c17:hover {
-  background-color: hsla(216,15%,54%,0.09);
+.c19.c19.c19.c19.c19:hover {
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 150ms;
@@ -1180,8 +1242,14 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c15.c15.c15.c15.c15 {
@@ -1202,12 +1270,19 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
 }
 
 .c15.c15.c15.c15.c15:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c15.c15.c15.c15.c15:hover + div {
-  border-color: hsla(214,18%,69%,1);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,1);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -1215,27 +1290,35 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1245,15 +1328,19 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   -webkit-box-orient: vertical;
 }
 
-.c18.c18.c18.c18.c18 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c20.c20.c20.c20.c20 {
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -1323,13 +1410,73 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   }
 }
 
+@media screen and (min-width:320px) {
+  .c16.c16.c16.c16.c16 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:480px) {
+  .c16.c16.c16.c16.c16 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c16.c16.c16.c16.c16 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:1024px) {
+  .c16.c16.c16.c16.c16 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .c16.c16.c16.c16.c16 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:320px) {
+  .c18.c18.c18.c18.c18 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:480px) {
+  .c18.c18.c18.c18.c18 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c18.c18.c18.c18.c18 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:1024px) {
+  .c18.c18.c18.c18.c18 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .c18.c18.c18.c18.c18 {
+    border-style: solid;
+  }
+}
+
 <div>
   <div
     class=""
     data-blade-component="base-box"
   >
     <div
-      aria-labelledby="chip-group-38-label"
+      aria-labelledby="chip-group-29-label"
       class="c0"
       data-blade-component="chip-group"
       role="radiogroup"
@@ -1376,7 +1523,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                   >
                     <input
                       aria-checked="false"
-                      aria-describedby="radio-39-helptext-40"
+                      aria-describedby="radio-30-helptext-31"
                       aria-disabled="true"
                       aria-invalid="false"
                       aria-required="false"
@@ -1430,7 +1577,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                   >
                     <input
                       aria-checked="false"
-                      aria-describedby="radio-41-helptext-42"
+                      aria-describedby="radio-32-helptext-33"
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"
@@ -1440,15 +1587,15 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                       value="mango"
                     />
                     <div
-                      class="c10 c16"
+                      class="c16 c17"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c12 c17"
+                        class="c18 c19"
                         data-blade-component="base-box"
                       >
                         <p
-                          class="c18"
+                          class="c20"
                           data-blade-component="text"
                         >
                           Mango
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap
index 1385de8625d..e22a1b59b74 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
     }
   >
     <View
-      accessibilityLabelledBy="chip-group-180-label"
+      accessibilityLabelledBy="chip-group-141-label"
       accessible={true}
       data-blade-component="chip-group"
       display="flex"
@@ -70,7 +70,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -80,11 +80,12 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -213,7 +214,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -221,7 +222,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -245,10 +246,10 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -261,8 +262,8 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -283,7 +284,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -294,11 +295,12 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -418,7 +420,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -426,7 +428,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -450,10 +452,10 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -466,8 +468,8 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -488,7 +490,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -499,11 +501,12 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -623,7 +626,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -631,7 +634,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -655,10 +658,10 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -671,8 +674,8 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -693,7 +696,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -704,11 +707,12 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -810,7 +814,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -820,11 +824,12 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -954,7 +959,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -962,7 +967,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -986,10 +991,10 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -1002,8 +1007,8 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -1024,7 +1029,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -1035,11 +1040,12 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -1160,7 +1166,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -1168,7 +1174,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -1192,10 +1198,10 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -1208,8 +1214,8 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -1230,7 +1236,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -1241,11 +1247,12 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -1366,7 +1373,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                     }
                   >
                     <View
-                      borderColor="brand.gray.400.lowContrast"
+                      borderColor="interactive.border.gray.faded"
                       isDisabled={false}
                       style={
                         [
@@ -1374,7 +1381,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                             "alignItems": "center",
                             "alignSelf": "center",
                             "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                            "borderColor": "hsla(216, 19%, 89%, 1)",
+                            "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
                             "borderWidth": 1,
                             "display": "flex",
@@ -1398,10 +1405,10 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                       <View
                         alignItems="center"
                         backgroundColor="transparent"
-                        borderColor="brand.gray.400.lowContrast"
+                        borderColor="interactive.border.gray.faded"
                         borderRadius="max"
                         borderWidth="thinner"
-                        color="default"
+                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
                         flexDirection="row"
@@ -1414,8 +1421,8 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "hsla(216, 19%, 89%, 1)",
+                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
                               "borderRadius": 9999,
                               "borderStyle": "solid",
                               "borderWidth": 0.5,
@@ -1436,7 +1443,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.subtle.lowContrast"
+                          color="interactive.text.gray.subtle"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -1447,11 +1454,12 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
                           style={
                             [
                               {
-                                "color": "hsla(216, 27%, 36%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 26%, 34%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap
index bf4be975205..b29fdec702a 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ChipGroup /> should render with selectionType="single" 1`] = `"<div id="root"><div data-blade-component="box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx bFzCEy"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bVbDHL" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 dLUtUC dlRwcw"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 eifKyS kpMgoO"><p class="StyledBaseText-dVBfTO jcxqOY" data-blade-component="text">Apple</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bVbDHL" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 dLUtUC dlRwcw"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 eifKyS kpMgoO"><p class="StyledBaseText-dVBfTO jcxqOY" data-blade-component="text">Mango</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bVbDHL" value="orange"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 dLUtUC dlRwcw"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 eifKyS kpMgoO"><p class="StyledBaseText-dVBfTO jcxqOY" data-blade-component="text">Orange</p></div></div></div></div></label></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx bFzCEy"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Select flowers</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bVbDHL" value="Rose"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 dLUtUC dlRwcw"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 eifKyS kpMgoO"><p class="StyledBaseText-dVBfTO jcxqOY" data-blade-component="text">Rose</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bVbDHL" value="Sunflower"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 dLUtUC dlRwcw"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 eifKyS kpMgoO"><p class="StyledBaseText-dVBfTO jcxqOY" data-blade-component="text">Sunflower</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bVbDHL" value="Lily"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 dLUtUC dlRwcw"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 eifKyS kpMgoO"><p class="StyledBaseText-dVBfTO jcxqOY" data-blade-component="text">Lily</p></div></div></div></div></label></div></div></div></div></div></div></div></div>"`;
+exports[`<ChipGroup /> should render with selectionType="single" 1`] = `"<div id="root"><div data-blade-component="box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx bFzCEy"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bFLRoC" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD cCtMTp"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 jlHBbz jpWPz"><p class="StyledBaseText-dVBfTO fCIpJP" data-blade-component="text">Apple</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bFLRoC" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD cCtMTp"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 jlHBbz jpWPz"><p class="StyledBaseText-dVBfTO fCIpJP" data-blade-component="text">Mango</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bFLRoC" value="orange"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD cCtMTp"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 jlHBbz jpWPz"><p class="StyledBaseText-dVBfTO fCIpJP" data-blade-component="text">Orange</p></div></div></div></div></label></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx bFzCEy"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Select flowers</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bFLRoC" value="Rose"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD cCtMTp"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 jlHBbz jpWPz"><p class="StyledBaseText-dVBfTO fCIpJP" data-blade-component="text">Rose</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bFLRoC" value="Sunflower"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD cCtMTp"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 jlHBbz jpWPz"><p class="StyledBaseText-dVBfTO fCIpJP" data-blade-component="text">Sunflower</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 bFLRoC" value="Lily"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD cCtMTp"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 jlHBbz jpWPz"><p class="StyledBaseText-dVBfTO fCIpJP" data-blade-component="text">Lily</p></div></div></div></div></label></div></div></div></div></div></div></div></div>"`;
 
 exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -63,7 +63,7 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
@@ -87,17 +87,17 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 9999px;
   border-width: 0.5px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
 .c11.c11.c11.c11.c11 {
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-width: 1px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -141,7 +141,7 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
 }
 
 .c13.c13.c13.c13.c13:hover {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 150ms;
@@ -192,12 +192,19 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9:hover + div {
-  border-color: hsla(214,18%,69%,1);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,1);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -205,27 +212,35 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap
index b84acb08222..4c65da820db 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
 }
 
 .c10.c10.c10.c10.c10 {
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
@@ -85,17 +85,17 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 9999px;
   border-width: 0.5px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
 .c11.c11.c11.c11.c11 {
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-width: 1px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -139,7 +139,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
 }
 
 .c13.c13.c13.c13.c13:hover {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 150ms;
@@ -190,12 +190,19 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
 }
 
 .c9.c9.c9.c9.c9:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9:hover + div {
-  border-color: hsla(214,18%,69%,1);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,1);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -203,27 +210,35 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -299,7 +314,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
     data-blade-component="base-box"
   >
     <div
-      aria-labelledby="chip-group-180-label"
+      aria-labelledby="chip-group-141-label"
       class="c0"
       data-blade-component="chip-group"
       role="group"
@@ -547,7 +562,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
 }
 
 .c10.c10.c10.c10.c10 {
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
@@ -571,17 +586,17 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 9999px;
   border-width: 0.5px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
 .c11.c11.c11.c11.c11 {
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-width: 1px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -625,7 +640,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
 }
 
 .c13.c13.c13.c13.c13:hover {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 150ms;
@@ -676,12 +691,19 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
 }
 
 .c9.c9.c9.c9.c9:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9:hover + div {
-  border-color: hsla(214,18%,69%,1);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,1);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -689,27 +711,35 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
diff --git a/packages/blade/src/components/Chip/chipTokens.ts b/packages/blade/src/components/Chip/chipTokens.ts
index 69830663d64..084a3cb9a98 100644
--- a/packages/blade/src/components/Chip/chipTokens.ts
+++ b/packages/blade/src/components/Chip/chipTokens.ts
@@ -1,10 +1,11 @@
 import type { ChipGroupProps } from './ChipGroup';
-import type { Theme } from '~components/BladeProvider';
-import type { DotNotationColorStringToken, DotNotationSpacingStringToken } from '~utils/types';
+import type { ChipBorderColors, ChipBackgroundColors } from './types';
+import type { DotNotationSpacingStringToken } from '~utils/types';
 import type { SelectorInputHoverTokens } from '~components/Form/Selector/types';
-import { size } from '~tokens/global';
 import type { IconProps } from '~components/Icons';
 import type { BaseTextProps } from '~components/Typography/BaseText/types';
+import type { DurationString, EasingString } from '~tokens/global';
+import { size } from '~tokens/global';
 
 const chipGroupGapTokens = {
   xsmall: {
@@ -74,103 +75,71 @@ const chipHorizontalPaddingTokens: ChipHorizontalPaddingTokens = {
   },
 };
 
-type FeedbackActionBackgroundColors<
-  T extends 'positive' | 'negative'
-> = `feedback.${T}.action.background.primary.${DotNotationColorStringToken<
-  Theme['colors']['feedback'][T]['action']['background']['primary']
->}`;
-type FeedbackActionBorderColors<
-  T extends 'positive' | 'negative'
-> = `feedback.${T}.action.border.${DotNotationColorStringToken<
-  Theme['colors']['feedback'][T]['action']['border']
->}`;
 type TextColorTokens = BaseTextProps['color'];
 type IconColorTokens = IconProps['color'];
 type ChipColorTokens = {
   text: Record<string, TextColorTokens>;
-  icon: Record<string, IconColorTokens | 'brand.primary.500'>;
-  background: Record<
-    string,
-    Record<
-      string,
-      | FeedbackActionBackgroundColors<'positive'>
-      | FeedbackActionBackgroundColors<'negative'>
-      | 'transparent'
-      | 'brand.gray.a50.lowContrast'
-      | 'brand.primary.300'
-      | 'brand.primary.400'
-    >
-  >;
-  border: Record<
-    string,
-    Record<
-      string,
-      | FeedbackActionBorderColors<'positive'>
-      | FeedbackActionBorderColors<'negative'>
-      | 'brand.gray.400.lowContrast'
-      | 'brand.gray.a100.lowContrast'
-      | 'brand.gray.a50.lowContrast'
-      | 'brand.primary.500'
-    >
-  >;
+  icon: Record<string, IconColorTokens>;
+  background: Record<string, Record<string, ChipBackgroundColors>>;
+  border: Record<string, Record<string, ChipBorderColors>>;
 };
 
 const chipColorTokens: ChipColorTokens = {
   text: {
-    unchecked: 'surface.text.subtle.lowContrast',
-    disabled: 'surface.text.placeholder.lowContrast',
-    default: 'action.text.secondary.default',
-    positive: 'feedback.text.positive.lowContrast',
-    negative: 'feedback.text.negative.lowContrast',
+    unchecked: 'interactive.text.gray.subtle',
+    disabled: 'interactive.text.gray.disabled',
+    primary: 'interactive.text.primary.normal',
+    positive: 'interactive.text.positive.normal',
+    negative: 'interactive.text.negative.normal',
   },
   icon: {
-    unchecked: 'surface.text.subtle.lowContrast',
-    disabled: 'surface.text.placeholder.lowContrast',
-    default: 'action.icon.secondary.default',
-    positive: 'feedback.icon.positive.lowContrast',
-    negative: 'feedback.icon.negative.lowContrast',
+    unchecked: 'interactive.icon.gray.subtle',
+    disabled: 'interactive.icon.gray.disabled',
+    primary: 'interactive.icon.primary.normal',
+    positive: 'interactive.icon.positive.normal',
+    negative: 'interactive.icon.negative.normal',
   },
   background: {
     unchecked: {
       default: 'transparent',
-      hover: 'brand.gray.a50.lowContrast',
+      hover: 'interactive.background.gray.faded',
       disabled: 'transparent',
     },
-    default: {
-      default: 'brand.primary.300',
-      hover: 'brand.primary.400',
-      disabled: 'brand.gray.a50.lowContrast',
+    primary: {
+      default: 'interactive.background.primary.faded',
+      hover: 'interactive.background.primary.fadedHighlighted',
+      disabled: 'interactive.background.primary.disabled',
     },
     positive: {
-      default: 'feedback.positive.action.background.primary.default.lowContrast',
-      hover: 'feedback.positive.action.background.primary.hover.lowContrast',
-      disabled: 'brand.gray.a50.lowContrast',
+      default: 'interactive.background.positive.faded',
+      hover: 'interactive.background.positive.fadedHighlighted',
+      disabled: 'interactive.background.positive.disabled',
     },
     negative: {
-      default: 'feedback.negative.action.background.primary.default.lowContrast',
-      hover: 'feedback.negative.action.background.primary.hover.lowContrast',
-      disabled: 'brand.gray.a50.lowContrast',
+      default: 'interactive.background.negative.faded',
+      hover: 'interactive.background.negative.fadedHighlighted',
+      disabled: 'interactive.background.negative.disabled',
     },
   },
   border: {
     unchecked: {
-      default: 'brand.gray.400.lowContrast',
-      disabled: 'brand.gray.400.lowContrast',
+      default: 'interactive.border.gray.faded',
+      disabled: 'interactive.border.gray.disabled',
     },
-    default: {
-      default: 'brand.primary.500',
-      hover: 'brand.primary.500',
-      disabled: 'brand.gray.a100.lowContrast',
+    primary: {
+      default: 'interactive.border.primary.default',
+      hover: 'interactive.border.primary.default',
+      disabled: 'interactive.border.primary.disabled',
     },
     positive: {
-      default: 'feedback.positive.action.border.primary.default.lowContrast',
-      hover: 'feedback.positive.action.border.primary.hover.lowContrast',
-      disabled: 'brand.gray.a100.lowContrast',
+      default: 'interactive.border.positive.default',
+      hover: 'interactive.border.positive.default',
+      disabled: 'interactive.border.positive.disabled',
     },
     negative: {
-      default: 'feedback.negative.action.border.primary.default.lowContrast',
-      hover: 'feedback.negative.action.border.primary.hover.lowContrast',
-      disabled: 'brand.gray.a50.lowContrast',
+      default: 'interactive.border.negative.default',
+      hover: 'interactive.border.negative.default',
+      disabled: 'interactive.border.negative.disabled',
     },
   },
 };
@@ -179,12 +148,12 @@ const getChipInputHoverTokens = (color: ChipGroupProps['color']): SelectorInputH
   return {
     default: {
       background: {
-        checked: 'transparent',
-        unchecked: 'transparent',
+        checked: 'colors.interactive.background.staticWhite.default',
+        unchecked: 'colors.interactive.background.staticWhite.default',
       },
       border: {
         checked: `colors.${chipColorTokens.border[color || 'default'].hover}` as never,
-        unchecked: 'colors.brand.gray.500.lowContrast',
+        unchecked: 'colors.interactive.border.gray.default',
       },
     },
   };
@@ -216,9 +185,9 @@ const chipTextSizes = {
   },
 } as const;
 
-const chipMotionTokens = {
-  duration: 'motion.duration.xquick',
-  easing: 'motion.easing.standard.effective',
+const chipMotionTokens: Record<'duration' | 'easing', DurationString | EasingString> = {
+  duration: 'duration.xquick',
+  easing: 'easing.standard.effective',
 };
 
 export {
diff --git a/packages/blade/src/components/Chip/getAnimatedChipStyles.ts b/packages/blade/src/components/Chip/getAnimatedChipStyles.ts
index 69d4cf7f1e4..5b401e04ee4 100644
--- a/packages/blade/src/components/Chip/getAnimatedChipStyles.ts
+++ b/packages/blade/src/components/Chip/getAnimatedChipStyles.ts
@@ -12,7 +12,7 @@ const getAnimatedChipStyles = ({
   return {
     backgroundColor: isDisabled
       ? 'transparent'
-      : getIn(theme.colors, 'surface.background.level2.lowContrast'),
+      : getIn(theme.colors, 'interactive.background.staticWhite.default'),
     borderRadius: makeBorderSize(theme.border.radius.max),
     borderColor: getIn(theme.colors, borderColor),
     borderWidth: getIn(theme, 'border.width.thin'),
diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts
index 478616851f1..f05041a6140 100644
--- a/packages/blade/src/components/Chip/types.ts
+++ b/packages/blade/src/components/Chip/types.ts
@@ -1,7 +1,8 @@
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { Theme } from '~components/BladeProvider';
 import type { IconComponent } from '~components/Icons';
-import type { DotNotationColorStringToken, StringChildrenType, TestID } from '~utils/types';
+import type { StringChildrenType, TestID } from '~utils/types';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 
 type ChipProps = {
   /**
@@ -14,17 +15,11 @@ type ChipProps = {
    *
    */
   icon?: IconComponent;
-  /**
-   * This is deprecated in favor of the `color` prop.
-   *
-   *  @deprecated Use the `color` prop instead.
-   */
-  intent?: 'positive' | 'negative' | 'none';
   /**
    * Sets the Chip's visual color.
    *
    */
-  color?: 'positive' | 'negative' | 'default';
+  color?: 'primary' | 'positive' | 'negative';
   /**
    * If `true`, the Chip will be disabled
    *
@@ -91,18 +86,12 @@ type ChipGroupProps = {
    * Use `onChange` to update its value
    */
   value?: string | string[];
-  /**
-   * This is deprecated in favor of the `color` prop.
-   *
-   * @default "none"
-   * @deprecated Use the `color` prop instead.
-   */
-  intent?: 'positive' | 'negative' | 'none';
   /**
    * Sets the ChipGroups's visual color, it will propagate down to all the Chips
    *
+   * @default "primary"
    */
-  color?: 'positive' | 'negative' | 'default';
+  color?: 'primary' | 'positive' | 'negative';
 } & TestID &
   StyledPropsBlade;
 
@@ -115,19 +104,35 @@ type State = {
 
 type ChipGroupContextType = Pick<
   ChipGroupProps,
-  | 'isDisabled'
-  | 'name'
-  | 'defaultValue'
-  | 'value'
-  | 'onChange'
-  | 'size'
-  | 'intent'
-  | 'color'
-  | 'selectionType'
+  'isDisabled' | 'name' | 'defaultValue' | 'value' | 'onChange' | 'size' | 'color' | 'selectionType'
 > & { state?: State };
 
+type InteractiveBackgroundColors<
+  T extends 'positive' | 'negative' | 'primary'
+> = `interactive.background.${T}.${DotNotationToken<
+  Theme['colors']['interactive']['background'][T]
+>}`;
+
+type InteractiveBorderColors<
+  T extends 'positive' | 'negative' | 'primary'
+> = `interactive.border.${T}.${DotNotationToken<Theme['colors']['interactive']['border'][T]>}`;
+
+type ChipBackgroundColors =
+  | InteractiveBackgroundColors<'positive'>
+  | InteractiveBackgroundColors<'negative'>
+  | InteractiveBackgroundColors<'primary'>
+  | 'transparent'
+  | 'interactive.background.gray.faded';
+
+type ChipBorderColors =
+  | InteractiveBorderColors<'positive'>
+  | InteractiveBorderColors<'negative'>
+  | InteractiveBorderColors<'primary'>
+  | 'interactive.border.gray.faded'
+  | 'interactive.border.gray.disabled';
+
 type AnimatedChipProps = {
-  borderColor: DotNotationColorStringToken<Theme['colors']>;
+  borderColor: ChipBorderColors;
   isPressed?: boolean;
   isDisabled?: boolean;
   isDesktop?: boolean;
@@ -137,7 +142,7 @@ type AnimatedChipProps = {
 
 type StyledChipWrapperProps = {
   color: ChipGroupProps['color'];
-  borderColor: DotNotationColorStringToken<Theme['colors']>;
+  borderColor: ChipBorderColors;
   isChecked?: boolean;
   isDisabled?: boolean;
   theme: Theme;
@@ -151,4 +156,6 @@ export type {
   ChipProps,
   State,
   StyledChipWrapperProps,
+  ChipBorderColors,
+  ChipBackgroundColors,
 };
diff --git a/packages/blade/src/components/Chip/useChipGroup.ts b/packages/blade/src/components/Chip/useChipGroup.ts
index 5c8c41e0976..cf968e47e2f 100644
--- a/packages/blade/src/components/Chip/useChipGroup.ts
+++ b/packages/blade/src/components/Chip/useChipGroup.ts
@@ -6,15 +6,7 @@ import { useId } from '~utils/useId';
 
 type UseChipGroupProps = Pick<
   ChipGroupProps,
-  | 'isDisabled'
-  | 'name'
-  | 'value'
-  | 'defaultValue'
-  | 'onChange'
-  | 'size'
-  | 'intent'
-  | 'color'
-  | 'selectionType'
+  'isDisabled' | 'name' | 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'selectionType'
 >;
 type UseChipGroupReturn = {
   state: State;
@@ -29,7 +21,6 @@ const useChipGroup = ({
   onChange,
   name,
   size,
-  intent,
   color,
   selectionType,
 }: UseChipGroupProps): UseChipGroupReturn => {
@@ -91,11 +82,10 @@ const useChipGroup = ({
       name,
       state,
       size,
-      intent,
       color,
       selectionType,
     };
-  }, [isDisabled, name, state, size, intent, color, selectionType]);
+  }, [isDisabled, name, state, size, color, selectionType]);
 
   return { state, contextValue, ids: { labelId } };
 };
diff --git a/packages/blade/src/components/Collapsible/Collapsible.stories.tsx b/packages/blade/src/components/Collapsible/Collapsible.stories.tsx
index 3d7abe0cae3..218cd480729 100644
--- a/packages/blade/src/components/Collapsible/Collapsible.stories.tsx
+++ b/packages/blade/src/components/Collapsible/Collapsible.stories.tsx
@@ -19,12 +19,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentName="Collapsible"
       componentDescription="Collapsible is used to allow users to toggle the visibility of hidden content within a container."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?type=design&node-id=16868-832623&t=rK6ydo54uVejIH9p-0',
-      }}
+      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
diff --git a/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx b/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx
index 902017d43ff..6347df4d887 100644
--- a/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx
+++ b/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx
@@ -26,7 +26,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody>
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -42,7 +42,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody>
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -61,7 +61,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody>
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>{bodyText}</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -101,7 +101,7 @@ describe('<Collapsible />', () => {
             <CollapsibleBody>
               <Box display="flex" flexDirection="column" minWidth="200px">
                 <Text>{bodyText}</Text>
-                <Amount value={1000} intent="positive" />
+                <Amount value={1000} color="feedback.text.positive.intense" />
               </Box>
             </CollapsibleBody>
           </Collapsible>
@@ -140,7 +140,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody testID="collapsible-body">
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -158,7 +158,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody testID="collapsible-body">
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
diff --git a/packages/blade/src/components/Collapsible/__tests__/Collapsible.ssr.test.tsx b/packages/blade/src/components/Collapsible/__tests__/Collapsible.ssr.test.tsx
index ce14a0035b7..40daedf21bb 100644
--- a/packages/blade/src/components/Collapsible/__tests__/Collapsible.ssr.test.tsx
+++ b/packages/blade/src/components/Collapsible/__tests__/Collapsible.ssr.test.tsx
@@ -21,7 +21,7 @@ describe('<Collapsible />', () => {
               alignItems="baseline"
             >
               <Text>Actual amount</Text>
-              <Amount value={1000} intent="positive" />
+              <Amount value={1000} color="feedback.text.positive.intense" />
             </Box>
             <Box
               display="flex"
diff --git a/packages/blade/src/components/Collapsible/__tests__/Collapsible.web.test.tsx b/packages/blade/src/components/Collapsible/__tests__/Collapsible.web.test.tsx
index 69b6bdb80f8..437deed29d8 100644
--- a/packages/blade/src/components/Collapsible/__tests__/Collapsible.web.test.tsx
+++ b/packages/blade/src/components/Collapsible/__tests__/Collapsible.web.test.tsx
@@ -20,7 +20,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody>
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -36,7 +36,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody>
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -55,7 +55,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody>
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>{bodyText}</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -95,7 +95,7 @@ describe('<Collapsible />', () => {
             <CollapsibleBody>
               <Box display="flex" flexDirection="column" minWidth="200px">
                 <Text>{bodyText}</Text>
-                <Amount value={1000} intent="positive" />
+                <Amount value={1000} color="feedback.text.positive.intense" />
               </Box>
             </CollapsibleBody>
           </Collapsible>
@@ -136,7 +136,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody testID="collapsible-body">
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -154,7 +154,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody testID="collapsible-body">
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -172,7 +172,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody>
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
@@ -192,7 +192,7 @@ describe('<Collapsible />', () => {
         <CollapsibleBody>
           <Box display="flex" flexDirection="column" minWidth="200px">
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
         </CollapsibleBody>
       </Collapsible>,
diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap
index 665250c4b6f..d628ac2f4ff 100644
--- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap
+++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap
@@ -62,25 +62,23 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
           }
         }
         accessible={true}
-        activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-        activeBorderColor="hsla(230, 100%, 42%, 1)"
         alignSelf="flex-start"
-        borderRadius="2px"
-        borderWidth="1px"
+        borderRadius="4px"
+        borderWidth="0px"
         buttonPaddingBottom="0px"
         buttonPaddingLeft="20px"
         buttonPaddingRight="20px"
         buttonPaddingTop="0px"
         collapsable={false}
         data-blade-component="button"
-        defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-        defaultBorderColor="hsla(218, 89%, 51%, 1)"
-        focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-        focusBorderColor="hsla(227, 100%, 45%, 1)"
-        focusRingColor="hsla(218, 89%, 51%, 0.18)"
+        defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+        defaultBorderColor="hsla(227, 100%, 59%, 1)"
+        focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+        focusBorderColor="hsla(227, 100%, 59%, 1)"
+        focusRingColor="hsla(227, 100%, 59%, 0.18)"
         focusable={true}
-        hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-        hoverBorderColor="hsla(223, 95%, 48%, 1)"
+        hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+        hoverBorderColor="hsla(227, 100%, 59%, 1)"
         isFullWidth={false}
         isLoading={false}
         minHeight="36px"
@@ -101,15 +99,16 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
             {
               "alignItems": "center",
               "alignSelf": "flex-start",
-              "backgroundColor": "hsla(218, 89%, 51%, 1)",
-              "borderColor": "hsla(218, 89%, 51%, 1)",
-              "borderRadius": 2,
+              "backgroundColor": "hsla(227, 100%, 59%, 1)",
+              "borderColor": "hsla(227, 100%, 59%, 1)",
+              "borderRadius": 4,
               "borderStyle": "solid",
-              "borderWidth": 1,
+              "borderWidth": 0,
               "cursor": "pointer",
               "display": "flex",
               "justifyContent": "center",
               "minHeight": 36,
+              "overflow": "hidden",
               "paddingBottom": 0,
               "paddingLeft": 20,
               "paddingRight": 20,
@@ -120,8 +119,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
               "width": "auto",
             },
             {
-              "backgroundColor": "hsla(218, 89%, 51%, 1)",
-              "borderColor": "hsla(218, 89%, 51%, 1)",
+              "backgroundColor": "hsla(227, 100%, 59%, 1)",
+              "borderColor": "hsla(227, 100%, 59%, 1)",
             },
           ]
         }
@@ -144,28 +143,31 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                 "flexGrow": 1,
                 "flexShrink": 1,
                 "justifyContent": "center",
+                "zIndex": 1,
               },
               {
                 "opacity": 1,
               },
             ]
           }
+          zIndex={1}
         >
           <Text
             accessible={true}
-            color="action.text.primary.default"
+            color="interactive.text.onPrimary.normal"
             data-blade-component="base-text"
             fontSize={100}
-            fontWeight="bold"
+            fontWeight="medium"
             lineHeight={100}
             style={
               [
                 {
                   "color": "hsla(0, 0%, 100%, 1)",
-                  "fontFamily": "Lato",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
+                  "fontWeight": "500",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -248,7 +250,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
               >
                 <Text
                   accessible={true}
-                  color="surface.text.normal.lowContrast"
+                  color="surface.text.gray.normal"
                   data-blade-component="text"
                   fontFamily="text"
                   fontSize={100}
@@ -258,11 +260,12 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                   style={
                     [
                       {
-                        "color": "hsla(217, 56%, 17%, 1)",
-                        "fontFamily": "Lato",
+                        "color": "hsla(212, 39%, 16%, 1)",
+                        "fontFamily": "Inter",
                         "fontSize": 14,
                         "fontStyle": "normal",
                         "fontWeight": "400",
+                        "letterSpacing": 0,
                         "lineHeight": 20,
                         "marginBottom": 0,
                         "marginLeft": 0,
@@ -282,10 +285,12 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                 <View
                   data-blade-component="amount"
                   display="flex"
+                  flexDirection="row"
                   style={
                     [
                       {
                         "display": "flex",
+                        "flexDirection": "row",
                       },
                     ]
                   }
@@ -295,36 +300,41 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                     data-blade-component="base-box"
                     display="flex"
                     flexDirection="row"
+                    position="relative"
                     style={
                       [
                         {
                           "alignItems": "baseline",
                           "display": "flex",
                           "flexDirection": "row",
+                          "position": "relative",
                         },
                       ]
                     }
                   >
                     <Text
                       accessible={true}
-                      color="feedback.text.positive.lowContrast"
+                      color="feedback.text.positive.intense"
                       data-blade-component="base-text"
-                      fontSize={75}
-                      fontWeight="bold"
+                      fontSize={25}
+                      fontWeight="regular"
                       marginRight="spacing.1"
+                      opacity={0.64}
                       style={
                         [
                           {
-                            "color": "hsla(160, 100%, 26%, 1)",
-                            "fontFamily": "Lato",
-                            "fontSize": 12,
+                            "color": "hsla(150, 100%, 27%, 1)",
+                            "fontFamily": "Inter",
+                            "fontSize": 10,
                             "fontStyle": "normal",
-                            "fontWeight": "700",
+                            "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
                             "marginRight": 2,
                             "marginTop": 0,
+                            "opacity": 0.64,
                             "paddingBottom": 0,
                             "paddingLeft": 0,
                             "paddingRight": 0,
@@ -338,15 +348,22 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                     </Text>
                     <Text
                       accessible={true}
-                      data-blade-component="base-text"
+                      color="surface.text.gray.normal"
+                      data-blade-component="text"
+                      fontFamily="text"
+                      fontSize={100}
+                      fontStyle="normal"
+                      fontWeight="regular"
+                      lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(217, 56%, 17%, 1)",
-                            "fontFamily": "Lato",
-                            "fontSize": 16,
+                            "color": "hsla(212, 39%, 16%, 1)",
+                            "fontFamily": "Inter",
+                            "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -363,19 +380,21 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                     >
                       <Text
                         accessible={true}
-                        color="feedback.text.positive.lowContrast"
+                        color="feedback.text.positive.intense"
                         data-blade-component="base-text"
+                        fontFamily="text"
                         fontSize={100}
                         fontWeight="regular"
                         lineHeight={100}
                         style={
                           [
                             {
-                              "color": "hsla(160, 100%, 26%, 1)",
-                              "fontFamily": "Lato",
+                              "color": "hsla(150, 100%, 27%, 1)",
+                              "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
                               "fontWeight": "400",
+                              "letterSpacing": 0,
                               "lineHeight": 20,
                               "marginBottom": 0,
                               "marginLeft": 0,
@@ -391,28 +410,30 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                         }
                       >
                         1,000
-                        .
                       </Text>
                       <Text
                         accessible={true}
-                        color="feedback.text.positive.lowContrast"
+                        color="feedback.text.positive.intense"
                         data-blade-component="base-text"
-                        fontSize={75}
+                        fontFamily="text"
+                        fontSize={25}
                         fontWeight="regular"
-                        marginLeft="spacing.1"
+                        opacity={0.64}
                         style={
                           [
                             {
-                              "color": "hsla(160, 100%, 26%, 1)",
-                              "fontFamily": "Lato",
-                              "fontSize": 12,
+                              "color": "hsla(150, 100%, 27%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 10,
                               "fontStyle": "normal",
                               "fontWeight": "400",
+                              "letterSpacing": 0,
                               "lineHeight": 20,
                               "marginBottom": 0,
-                              "marginLeft": 2,
+                              "marginLeft": 0,
                               "marginRight": 0,
                               "marginTop": 0,
+                              "opacity": 0.64,
                               "paddingBottom": 0,
                               "paddingLeft": 0,
                               "paddingRight": 0,
@@ -422,6 +443,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                           ]
                         }
                       >
+                        .
                         00
                       </Text>
                     </Text>
@@ -548,19 +570,20 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
         >
           <Text
             accessible={true}
-            color="action.text.link.default"
+            color="interactive.text.primary.normal"
             data-blade-component="base-text"
             fontSize={100}
-            fontWeight="bold"
+            fontWeight="medium"
             lineHeight={100}
             style={
               [
                 {
-                  "color": "hsla(218, 89%, 51%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(227, 71%, 51%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
+                  "fontWeight": "500",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -651,7 +674,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                   <RNSVGPath
                     clipRule={0}
                     d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
-                    fill={4279461105}
+                    fill={4280897755}
                     fillRule={0}
                     propList={
                       [
@@ -728,7 +751,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
               >
                 <Text
                   accessible={true}
-                  color="surface.text.normal.lowContrast"
+                  color="surface.text.gray.normal"
                   data-blade-component="text"
                   fontFamily="text"
                   fontSize={100}
@@ -738,11 +761,12 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                   style={
                     [
                       {
-                        "color": "hsla(217, 56%, 17%, 1)",
-                        "fontFamily": "Lato",
+                        "color": "hsla(212, 39%, 16%, 1)",
+                        "fontFamily": "Inter",
                         "fontSize": 14,
                         "fontStyle": "normal",
                         "fontWeight": "400",
+                        "letterSpacing": 0,
                         "lineHeight": 20,
                         "marginBottom": 0,
                         "marginLeft": 0,
@@ -762,10 +786,12 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                 <View
                   data-blade-component="amount"
                   display="flex"
+                  flexDirection="row"
                   style={
                     [
                       {
                         "display": "flex",
+                        "flexDirection": "row",
                       },
                     ]
                   }
@@ -775,36 +801,41 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     data-blade-component="base-box"
                     display="flex"
                     flexDirection="row"
+                    position="relative"
                     style={
                       [
                         {
                           "alignItems": "baseline",
                           "display": "flex",
                           "flexDirection": "row",
+                          "position": "relative",
                         },
                       ]
                     }
                   >
                     <Text
                       accessible={true}
-                      color="feedback.text.positive.lowContrast"
+                      color="feedback.text.positive.intense"
                       data-blade-component="base-text"
-                      fontSize={75}
-                      fontWeight="bold"
+                      fontSize={25}
+                      fontWeight="regular"
                       marginRight="spacing.1"
+                      opacity={0.64}
                       style={
                         [
                           {
-                            "color": "hsla(160, 100%, 26%, 1)",
-                            "fontFamily": "Lato",
-                            "fontSize": 12,
+                            "color": "hsla(150, 100%, 27%, 1)",
+                            "fontFamily": "Inter",
+                            "fontSize": 10,
                             "fontStyle": "normal",
-                            "fontWeight": "700",
+                            "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
                             "marginRight": 2,
                             "marginTop": 0,
+                            "opacity": 0.64,
                             "paddingBottom": 0,
                             "paddingLeft": 0,
                             "paddingRight": 0,
@@ -818,15 +849,22 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     </Text>
                     <Text
                       accessible={true}
-                      data-blade-component="base-text"
+                      color="surface.text.gray.normal"
+                      data-blade-component="text"
+                      fontFamily="text"
+                      fontSize={100}
+                      fontStyle="normal"
+                      fontWeight="regular"
+                      lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(217, 56%, 17%, 1)",
-                            "fontFamily": "Lato",
-                            "fontSize": 16,
+                            "color": "hsla(212, 39%, 16%, 1)",
+                            "fontFamily": "Inter",
+                            "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -843,19 +881,21 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     >
                       <Text
                         accessible={true}
-                        color="feedback.text.positive.lowContrast"
+                        color="feedback.text.positive.intense"
                         data-blade-component="base-text"
+                        fontFamily="text"
                         fontSize={100}
                         fontWeight="regular"
                         lineHeight={100}
                         style={
                           [
                             {
-                              "color": "hsla(160, 100%, 26%, 1)",
-                              "fontFamily": "Lato",
+                              "color": "hsla(150, 100%, 27%, 1)",
+                              "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
                               "fontWeight": "400",
+                              "letterSpacing": 0,
                               "lineHeight": 20,
                               "marginBottom": 0,
                               "marginLeft": 0,
@@ -871,28 +911,30 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                         }
                       >
                         1,000
-                        .
                       </Text>
                       <Text
                         accessible={true}
-                        color="feedback.text.positive.lowContrast"
+                        color="feedback.text.positive.intense"
                         data-blade-component="base-text"
-                        fontSize={75}
+                        fontFamily="text"
+                        fontSize={25}
                         fontWeight="regular"
-                        marginLeft="spacing.1"
+                        opacity={0.64}
                         style={
                           [
                             {
-                              "color": "hsla(160, 100%, 26%, 1)",
-                              "fontFamily": "Lato",
-                              "fontSize": 12,
+                              "color": "hsla(150, 100%, 27%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 10,
                               "fontStyle": "normal",
                               "fontWeight": "400",
+                              "letterSpacing": 0,
                               "lineHeight": 20,
                               "marginBottom": 0,
-                              "marginLeft": 2,
+                              "marginLeft": 0,
                               "marginRight": 0,
                               "marginTop": 0,
+                              "opacity": 0.64,
                               "paddingBottom": 0,
                               "paddingLeft": 0,
                               "paddingRight": 0,
@@ -902,6 +944,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                           ]
                         }
                       >
+                        .
                         00
                       </Text>
                     </Text>
diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap
index 6e40ff15b0a..0118e40ef73 100644
--- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Collapsible /> should render Collapsible on server 1`] = `"<div id="root"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx RvefM"><button type="button" data-blade-component="button" role="button" aria-controls="collapsible-body-undefined" aria-expanded="true" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 juLFkx"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div class="StyledBaseText-dVBfTO hcXerP" data-blade-component="base-text">View Price Breakdown</div></div></button><div id="collapsible-body-undefined" role="region" aria-hidden="false" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 rdBDV"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="box" class="BaseBox-bmPWx RDiNQ"><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Actual amount</p><div data-blade-component="amount" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx caXXVm"><span class="StyledBaseText-dVBfTO jwIcwr" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO ejvzHw" data-blade-component="base-text">1,000<!-- -->.</span><span class="StyledBaseText-dVBfTO dKglVv" data-blade-component="base-text">00</span></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO hYRCHy" data-blade-component="text">Razorpay Platform Fees</p><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">2%</p></div><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO hYRCHy" data-blade-component="text">GST</p><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">18%</p></div></div></div></div></div></div></div></div>"`;
+exports[`<Collapsible /> should render Collapsible on server 1`] = `"<div id="root"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx RvefM"><button type="button" data-blade-component="button" role="button" aria-controls="collapsible-body-undefined" aria-expanded="true" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctKBsz"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO bewYNq" data-blade-component="base-text">View Price Breakdown</div></div></button><div id="collapsible-body-undefined" role="region" aria-hidden="false" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 rdBDV"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="box" class="BaseBox-bmPWx RDiNQ"><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Actual amount</p><div data-blade-component="amount" class="BaseBox-bmPWx eBHIXa"><div data-blade-component="base-box" class="BaseBox-bmPWx boSJQS"><span opacity="0.64" class="StyledBaseText-dVBfTO elcRLO" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO gmsvnN" data-blade-component="base-text">1,000</span><span opacity="0.64" class="StyledBaseText-dVBfTO kqvvnG" data-blade-component="base-text">.<!-- -->00</span></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO ekqPVM" data-blade-component="text">Razorpay Platform Fees</p><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">2%</p></div><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO ekqPVM" data-blade-component="text">GST</p><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">18%</p></div></div></div></div></div></div></div></div>"`;
 
 exports[`<Collapsible /> should render Collapsible on server 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -37,6 +37,7 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c6.c6.c6.c6.c6 {
@@ -78,6 +79,9 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .c11.c11.c11.c11.c11 {
@@ -92,16 +96,17 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
+  position: relative;
 }
 
 .c1.c1.c1.c1.c1 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -117,6 +122,7 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -131,25 +137,25 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
 }
 
 .c1.c1.c1.c1.c1:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c1.c1.c1.c1.c1:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c1.c1.c1.c1.c1:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c1.c1.c1.c1.c1 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -158,81 +164,106 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c9.c9.c9.c9.c9 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
+  opacity: 0.64;
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   margin-top: 4px;
@@ -343,6 +374,7 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
                     <span
                       class="c12"
                       data-blade-component="base-text"
+                      opacity="0.64"
                     >
                       ₹
                     </span>
@@ -351,13 +383,14 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
                       data-blade-component="base-text"
                     >
                       1,000
-                      <!-- -->
-                      .
                     </span>
                     <span
                       class="c14"
                       data-blade-component="base-text"
+                      opacity="0.64"
                     >
+                      .
+                      <!-- -->
                       00
                     </span>
                   </div>
diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap
index a4545015f72..b2435905042 100644
--- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap
+++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c6.c6.c6.c6.c6 {
@@ -58,6 +59,9 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .c10.c10.c10.c10.c10 {
@@ -72,6 +76,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
+  position: relative;
 }
 
 .c5.c5.c5.c5.c5 {
@@ -91,10 +96,10 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -110,6 +115,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -124,25 +130,25 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
 }
 
 .c1.c1.c1.c1.c1:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c1.c1.c1.c1.c1:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c1.c1.c1.c1.c1:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c1.c1.c1.c1.c1 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -151,70 +157,91 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
+  opacity: 0.64;
 }
 
 .c3.c3.c3.c3.c3 {
@@ -303,6 +330,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                   <span
                     class="c11"
                     data-blade-component="base-text"
+                    opacity="0.64"
                   >
                     ₹
                   </span>
@@ -311,12 +339,13 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                     data-blade-component="base-text"
                   >
                     1,000
-                    .
                   </span>
                   <span
                     class="c13"
                     data-blade-component="base-text"
+                    opacity="0.64"
                   >
+                    .
                     00
                   </span>
                 </div>
@@ -393,6 +422,9 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .c11.c11.c11.c11.c11 {
@@ -407,6 +439,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
+  position: relative;
 }
 
 .c6.c6.c6.c6.c6 {
@@ -423,71 +456,92 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c9.c9.c9.c9.c9 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  opacity: 0.64;
   margin-right: 2px;
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
-  margin-left: 2px;
+  opacity: 0.64;
 }
 
 .c5.c5.c5.c5.c5 {
@@ -540,7 +594,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
 }
 
 .c1.c1.c1.c1.c1:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c1.c1.c1.c1.c1 * {
@@ -621,7 +675,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                   clip-rule="evenodd"
                   d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
                   data-blade-component="svg-path"
-                  fill="hsla(218, 89%, 51%, 1)"
+                  fill="hsla(227, 71%, 51%, 1)"
                   fill-rule="evenodd"
                 />
               </svg>
@@ -664,6 +718,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                   <span
                     class="c12"
                     data-blade-component="base-text"
+                    opacity="0.64"
                   >
                     ₹
                   </span>
@@ -672,12 +727,13 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     data-blade-component="base-text"
                   >
                     1,000
-                    .
                   </span>
                   <span
                     class="c14"
                     data-blade-component="base-text"
+                    opacity="0.64"
                   >
+                    .
                     00
                   </span>
                 </div>
diff --git a/packages/blade/src/components/Counter/Counter.stories.tsx b/packages/blade/src/components/Counter/Counter.stories.tsx
index cb14794ec3f..ab674bc0987 100644
--- a/packages/blade/src/components/Counter/Counter.stories.tsx
+++ b/packages/blade/src/components/Counter/Counter.stories.tsx
@@ -14,12 +14,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentName="Counter"
       componentDescription="Counters are visual indicators that contains numerical values, tallies or counts in regards to some context. It can be used to show non-interactive numerical data."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8222%3A70827',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=8222%3A70827',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8222%3A70827"
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -60,7 +55,7 @@ export const Counter = CounterTemplate.bind({});
 Counter.args = {
   value: 20,
   color: 'neutral',
-  contrast: 'low',
+  emphasis: 'subtle',
 };
 Counter.storyName = 'Default';
 
@@ -69,16 +64,16 @@ Max.args = {
   value: 120,
   max: 99,
   color: 'neutral',
-  contrast: 'high',
+  emphasis: 'intense',
 };
 Max.storyName = 'Max';
 
 const CountersWithColorTemplate: StoryFn<typeof CounterComponent> = ({ ...args }) => {
-  const colors = ['positive', 'negative', 'notice', 'information', 'neutral', 'blue'] as const;
+  const colors = ['positive', 'negative', 'notice', 'information', 'neutral', 'primary'] as const;
 
   return (
     <BaseBox display="flex" flexDirection="column">
-      <BladeText>Low Contrast</BladeText>
+      <BladeText>Subtle Emphasis</BladeText>
       <BaseBox
         display="flex"
         flexDirection="row"
@@ -93,11 +88,11 @@ const CountersWithColorTemplate: StoryFn<typeof CounterComponent> = ({ ...args }
             marginRight="spacing.3"
             marginTop="spacing.2"
             color={color}
-            contrast="low"
+            emphasis="subtle"
           />
         ))}
       </BaseBox>
-      <BladeText>High Contrast</BladeText>
+      <BladeText>Intense Emphasis</BladeText>
       <BaseBox
         display="flex"
         flexDirection="row"
@@ -112,7 +107,7 @@ const CountersWithColorTemplate: StoryFn<typeof CounterComponent> = ({ ...args }
             marginRight="spacing.3"
             marginTop="spacing.2"
             color={color}
-            contrast="high"
+            emphasis="intense"
           />
         ))}
       </BaseBox>
diff --git a/packages/blade/src/components/Counter/Counter.tsx b/packages/blade/src/components/Counter/Counter.tsx
index 044ae31b9f0..dfb14cae235 100644
--- a/packages/blade/src/components/Counter/Counter.tsx
+++ b/packages/blade/src/components/Counter/Counter.tsx
@@ -1,7 +1,7 @@
 import { StyledCounter } from './StyledCounter';
 import type { StyledCounterProps } from './types';
-import { horizontalPadding, verticalPadding } from './counterTokens';
-import type { Feedback } from '~tokens/theme/theme';
+import { counterHeight, horizontalPadding } from './counterTokens';
+import type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';
 import { Text } from '~components/Typography';
 import BaseBox from '~components/Box/BaseBox';
 import { useTheme } from '~components/BladeProvider';
@@ -10,8 +10,7 @@ import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { TestID } from '~utils/types';
-import { isReactNative } from '~utils';
-import { logger } from '~utils/logger';
+import { isReactNative, makeSize } from '~utils';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 
 export type CounterProps = {
@@ -24,32 +23,18 @@ export type CounterProps = {
    * If value exceedes `max` it will render `value+`
    */
   max?: number;
-  /**
-   * This prop is deprecated in favor of `color`.
-   *
-   * @default 'neutral'
-   * @deprecated Use `color` instead
-   */
-  intent?: Feedback;
-  /**
-   * This prop is deprecated in favor of `color`.
-   *
-   * @default 'neutral'
-   * @deprecated Use `color` instead
-   */
-  variant?: Feedback | 'blue';
   /**
    * Sets the color of the counter.
    *
    * @default 'neutral'
    */
-  color?: Feedback | 'default';
+  color?: FeedbackColors | 'primary';
   /**
    * Sets the contrast of the counter.
    *
-   * @default 'low'
+   * @default 'subtle'
    */
-  contrast?: 'high' | 'low';
+  emphasis?: SubtleOrIntense;
   /**
    * Sets the size of the counter.
    *
@@ -64,29 +49,28 @@ type ColorProps = {
   backgroundColor: StyledCounterProps['backgroundColor'];
 };
 
-const isFeedbackVariant = (variant: string): variant is Feedback => {
-  const feedbackVariants = ['information', 'negative', 'neutral', 'notice', 'positive'];
-  return feedbackVariants.includes(variant);
-};
-
 const getColorProps = ({
-  variant = 'neutral',
-  contrast = 'low',
+  color = 'neutral',
+  emphasis = 'subtle',
 }: {
-  variant: NonNullable<CounterProps['color'] | 'blue'>;
-  contrast: NonNullable<CounterProps['contrast']>;
+  color: NonNullable<CounterProps['color']>;
+  emphasis: NonNullable<CounterProps['emphasis']>;
 }): ColorProps => {
-  const counterVariant = variant === 'default' ? 'blue' : variant;
   const props: ColorProps = {
-    textColor: 'feedback.text.neutral.lowContrast',
-    backgroundColor: 'feedback.background.neutral.lowContrast',
+    textColor: 'feedback.text.neutral.intense',
+    backgroundColor: 'feedback.background.neutral.subtle',
   };
-  if (isFeedbackVariant(counterVariant)) {
-    props.textColor = `feedback.text.${counterVariant}.${contrast}Contrast`;
-    props.backgroundColor = `feedback.background.${counterVariant}.${contrast}Contrast`;
+
+  if (color === 'primary') {
+    // primary color badge
+    props.textColor =
+      emphasis === 'intense' ? `surface.text.staticWhite.normal` : `surface.text.primary.normal`;
+    props.backgroundColor = `surface.background.primary.${emphasis}`;
   } else {
-    props.textColor = `badge.text.${counterVariant}.${contrast}Contrast`;
-    props.backgroundColor = `badge.background.${counterVariant}.${contrast}Contrast`;
+    // feedback colors badge
+    props.textColor =
+      emphasis === 'intense' ? `surface.text.staticWhite.normal` : `feedback.text.${color}.intense`;
+    props.backgroundColor = `feedback.background.${color}.${emphasis}`;
   }
   return props;
 };
@@ -94,10 +78,8 @@ const getColorProps = ({
 const _Counter = ({
   value,
   max,
-  intent,
-  variant = 'neutral',
-  color,
-  contrast = 'low',
+  color = 'neutral',
+  emphasis = 'subtle',
   size = 'medium',
   testID,
   ...styledProps
@@ -109,21 +91,10 @@ const _Counter = ({
 
   const { platform } = useTheme();
   const { backgroundColor, textColor } = getColorProps({
-    variant: color ?? intent ?? variant,
-    contrast,
+    color,
+    emphasis,
   });
 
-  if (__DEV__) {
-    if (intent) {
-      logger({
-        type: 'warn',
-        message:
-          'The prop `intent` is deprecated and will be removed in a future release. Please use `variant` instead.',
-        moduleName: 'Counter',
-      });
-    }
-  }
-
   const counterTextSizes = {
     small: {
       variant: 'body',
@@ -145,12 +116,14 @@ const _Counter = ({
       {...metaAttribute({ name: MetaConstants.Counter, testID })}
       {...getStyledProps(styledProps)}
     >
-      <StyledCounter backgroundColor={backgroundColor} size={size} platform={platform}>
+      <StyledCounter
+        minHeight={makeSize(counterHeight[size])}
+        backgroundColor={backgroundColor}
+        size={size}
+        platform={platform}
+      >
         <BaseBox
-          paddingRight={horizontalPadding[size]}
-          paddingLeft={horizontalPadding[size]}
-          paddingTop={verticalPadding[size]}
-          paddingBottom={verticalPadding[size]}
+          paddingX={horizontalPadding[size]}
           display="flex"
           flexDirection="row"
           justifyContent="center"
@@ -160,8 +133,7 @@ const _Counter = ({
           <Text
             {...counterTextSizes[size]}
             textAlign="center"
-            type="normal"
-            weight="regular"
+            weight="medium"
             truncateAfterLines={1}
             color={textColor}
           >
diff --git a/packages/blade/src/components/Counter/__tests__/Counter.native.test.tsx b/packages/blade/src/components/Counter/__tests__/Counter.native.test.tsx
index 30a5419ccff..852748eacb1 100644
--- a/packages/blade/src/components/Counter/__tests__/Counter.native.test.tsx
+++ b/packages/blade/src/components/Counter/__tests__/Counter.native.test.tsx
@@ -3,7 +3,7 @@ import { Counter } from '../Counter';
 import renderWithTheme from '~utils/testing/renderWithTheme.native';
 
 const colors: CounterProps['color'][] = [
-  'default',
+  'primary',
   'information',
   'negative',
   'neutral',
@@ -38,76 +38,78 @@ describe('<Counter />', () => {
   });
 
   colors.forEach((color) => {
-    it(`should render low contrast ${color} color Counter`, () => {
-      const { toJSON } = renderWithTheme(<Counter color={color} contrast="low" value={20} />);
+    it(`should render subtle emphasis ${color} color Counter`, () => {
+      const { toJSON } = renderWithTheme(<Counter color={color} emphasis="subtle" value={20} />);
       expect(toJSON()).toMatchSnapshot();
     });
 
-    it(`should render high contrast ${color} color Counter`, () => {
-      const { toJSON } = renderWithTheme(<Counter color={color} contrast="high" value={20} />);
+    it(`should render intense emphasis ${color} color Counter`, () => {
+      const { toJSON } = renderWithTheme(<Counter color={color} emphasis="intense" value={20} />);
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
-  it('should render low contrast positive variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="positive" contrast="low" value={20} />);
+  it('should render subtle emphasis positive color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="positive" emphasis="subtle" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast positive variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="positive" contrast="high" value={20} />);
+  it('should render intense emphasis positive color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="positive" emphasis="intense" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast negative variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="negative" contrast="low" value={20} />);
+  it('should render subtle emphasis negative color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="negative" emphasis="subtle" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast negative variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="negative" contrast="high" value={20} />);
+  it('should render intense emphasis negative color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="negative" emphasis="intense" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast notice variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="notice" contrast="low" value={20} />);
+  it('should render subtle emphasis notice color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="notice" emphasis="subtle" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast notice variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="notice" contrast="high" value={20} />);
+  it('should render intense emphasis notice color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="notice" emphasis="intense" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast information variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="information" contrast="low" value={20} />);
+  it('should render subtle emphasis information color Counter', () => {
+    const { toJSON } = renderWithTheme(
+      <Counter color="information" emphasis="subtle" value={20} />,
+    );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast information variant Counter', () => {
+  it('should render intense emphasis information color Counter', () => {
     const { toJSON } = renderWithTheme(
-      <Counter variant="information" contrast="high" value={20} />,
+      <Counter color="information" emphasis="intense" value={20} />,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast neutral variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="neutral" contrast="low" value={20} />);
+  it('should render subtle emphasis neutral color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="neutral" emphasis="subtle" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast neutral variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="neutral" contrast="high" value={20} />);
+  it('should render intense emphasis neutral color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="neutral" emphasis="intense" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast blue variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="blue" contrast="low" value={20} />);
+  it('should render subtle emphasis primary color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="primary" emphasis="subtle" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast blue variant Counter', () => {
-    const { toJSON } = renderWithTheme(<Counter variant="blue" contrast="high" value={20} />);
+  it('should render intense emphasis primary color Counter', () => {
+    const { toJSON } = renderWithTheme(<Counter color="primary" emphasis="intense" value={20} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
diff --git a/packages/blade/src/components/Counter/__tests__/Counter.web.test.tsx b/packages/blade/src/components/Counter/__tests__/Counter.web.test.tsx
index 5ac2ac7e29d..b632e55b084 100644
--- a/packages/blade/src/components/Counter/__tests__/Counter.web.test.tsx
+++ b/packages/blade/src/components/Counter/__tests__/Counter.web.test.tsx
@@ -3,7 +3,7 @@ import { Counter } from '../Counter';
 import renderWithTheme from '~utils/testing/renderWithTheme.web';
 
 const colors: CounterProps['color'][] = [
-  'default',
+  'primary',
   'information',
   'negative',
   'neutral',
@@ -38,82 +38,92 @@ describe('<Counter />', () => {
   });
 
   colors.forEach((color) => {
-    it(`should render low contrast ${color} color Counter`, () => {
-      const { container } = renderWithTheme(<Counter color={color} contrast="low" value={20} />);
+    it(`should render subtle emphasis ${color} color Counter`, () => {
+      const { container } = renderWithTheme(<Counter color={color} emphasis="subtle" value={20} />);
       expect(container).toMatchSnapshot();
     });
 
-    it(`should render high contrast ${color} color Counter`, () => {
-      const { container } = renderWithTheme(<Counter color={color} contrast="high" value={20} />);
+    it(`should render intense emphasis ${color} color Counter`, () => {
+      const { container } = renderWithTheme(
+        <Counter color={color} emphasis="intense" value={20} />,
+      );
       expect(container).toMatchSnapshot();
     });
   });
 
-  it('should render low contrast positive variant Counter', () => {
-    const { container } = renderWithTheme(<Counter variant="positive" contrast="low" value={20} />);
+  it('should render subtle emphasis positive color Counter', () => {
+    const { container } = renderWithTheme(
+      <Counter color="positive" emphasis="subtle" value={20} />,
+    );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast positive variant Counter', () => {
+  it('should render intense emphasis positive color Counter', () => {
     const { container } = renderWithTheme(
-      <Counter variant="positive" contrast="high" value={20} />,
+      <Counter color="positive" emphasis="intense" value={20} />,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast negative variant Counter', () => {
-    const { container } = renderWithTheme(<Counter variant="negative" contrast="low" value={20} />);
+  it('should render subtle emphasis negative color Counter', () => {
+    const { container } = renderWithTheme(
+      <Counter color="negative" emphasis="subtle" value={20} />,
+    );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast negative variant Counter', () => {
+  it('should render intense emphasis negative color Counter', () => {
     const { container } = renderWithTheme(
-      <Counter variant="negative" contrast="high" value={20} />,
+      <Counter color="negative" emphasis="intense" value={20} />,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast notice variant Counter', () => {
-    const { container } = renderWithTheme(<Counter variant="notice" contrast="low" value={20} />);
+  it('should render subtle emphasis notice color Counter', () => {
+    const { container } = renderWithTheme(<Counter color="notice" emphasis="subtle" value={20} />);
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast notice variant Counter', () => {
-    const { container } = renderWithTheme(<Counter variant="notice" contrast="high" value={20} />);
+  it('should render intense emphasis notice color Counter', () => {
+    const { container } = renderWithTheme(<Counter color="notice" emphasis="intense" value={20} />);
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast information variant Counter', () => {
+  it('should render subtle emphasis information color Counter', () => {
     const { container } = renderWithTheme(
-      <Counter variant="information" contrast="low" value={20} />,
+      <Counter color="information" emphasis="subtle" value={20} />,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast information variant Counter', () => {
+  it('should render intense emphasis information color Counter', () => {
     const { container } = renderWithTheme(
-      <Counter variant="information" contrast="high" value={20} />,
+      <Counter color="information" emphasis="intense" value={20} />,
     );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast neutral variant Counter', () => {
-    const { container } = renderWithTheme(<Counter variant="neutral" contrast="low" value={20} />);
+  it('should render subtle emphasis neutral color Counter', () => {
+    const { container } = renderWithTheme(<Counter color="neutral" emphasis="subtle" value={20} />);
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast neutral variant Counter', () => {
-    const { container } = renderWithTheme(<Counter variant="neutral" contrast="high" value={20} />);
+  it('should render intense emphasis neutral color Counter', () => {
+    const { container } = renderWithTheme(
+      <Counter color="neutral" emphasis="intense" value={20} />,
+    );
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast blue variant Counter', () => {
-    const { container } = renderWithTheme(<Counter variant="blue" contrast="low" value={20} />);
+  it('should render subtle emphasis primary color Counter', () => {
+    const { container } = renderWithTheme(<Counter color="primary" emphasis="subtle" value={20} />);
     expect(container).toMatchSnapshot();
   });
 
-  it('should render high contrast blue variant Counter', () => {
-    const { container } = renderWithTheme(<Counter variant="blue" contrast="high" value={20} />);
+  it('should render intense emphasis primary color Counter', () => {
+    const { container } = renderWithTheme(
+      <Counter color="primary" emphasis="intense" value={20} />,
+    );
     expect(container).toMatchSnapshot();
   });
 
diff --git a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.native.test.tsx.snap b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.native.test.tsx.snap
index c7f3f371163..d1c40fec6b4 100644
--- a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.native.test.tsx.snap
+++ b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.native.test.tsx.snap
@@ -20,18 +20,20 @@ exports[`<Counter /> should render Counter with default props 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -55,33 +57,32 @@ exports[`<Counter /> should render Counter with default props 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -105,7 +106,7 @@ exports[`<Counter /> should render Counter with default props 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis information color Counter 1`] = `
 <View
   style={
     {
@@ -125,18 +126,20 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
     }
   >
     <View
-      backgroundColor="badge.background.blue.highContrast"
+      backgroundColor="feedback.background.information.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(218, 89%, 51%, 1)",
+            "backgroundColor": "hsla(200, 84%, 44%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(218, 89%, 51%, 1)",
+            "backgroundColor": "hsla(200, 84%, 44%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -160,33 +163,32 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="badge.text.blue.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -210,7 +212,7 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render high contrast default color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis information color Counter 2`] = `
 <View
   style={
     {
@@ -230,18 +232,20 @@ exports[`<Counter /> should render high contrast default color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="badge.background.blue.highContrast"
+      backgroundColor="feedback.background.information.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(218, 89%, 51%, 1)",
+            "backgroundColor": "hsla(200, 84%, 44%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(218, 89%, 51%, 1)",
+            "backgroundColor": "hsla(200, 84%, 44%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -265,33 +269,32 @@ exports[`<Counter /> should render high contrast default color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="badge.text.blue.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -315,7 +318,7 @@ exports[`<Counter /> should render high contrast default color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render high contrast information color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis negative color Counter 1`] = `
 <View
   style={
     {
@@ -335,18 +338,20 @@ exports[`<Counter /> should render high contrast information color Counter 1`] =
     }
   >
     <View
-      backgroundColor="feedback.background.information.highContrast"
+      backgroundColor="feedback.background.negative.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(193, 100%, 35%, 1)",
+            "backgroundColor": "hsla(4, 74%, 49%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(193, 100%, 35%, 1)",
+            "backgroundColor": "hsla(4, 74%, 49%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -370,33 +375,32 @@ exports[`<Counter /> should render high contrast information color Counter 1`] =
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.information.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -420,7 +424,7 @@ exports[`<Counter /> should render high contrast information color Counter 1`] =
 </View>
 `;
 
-exports[`<Counter /> should render high contrast information variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis negative color Counter 2`] = `
 <View
   style={
     {
@@ -440,18 +444,20 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
     }
   >
     <View
-      backgroundColor="feedback.background.information.highContrast"
+      backgroundColor="feedback.background.negative.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(193, 100%, 35%, 1)",
+            "backgroundColor": "hsla(4, 74%, 49%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(193, 100%, 35%, 1)",
+            "backgroundColor": "hsla(4, 74%, 49%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -475,33 +481,32 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.information.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -525,7 +530,7 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
 </View>
 `;
 
-exports[`<Counter /> should render high contrast negative color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis neutral color Counter 1`] = `
 <View
   style={
     {
@@ -545,18 +550,20 @@ exports[`<Counter /> should render high contrast negative color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.negative.highContrast"
+      backgroundColor="feedback.background.neutral.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(8, 73%, 47%, 1)",
+            "backgroundColor": "hsla(211, 29%, 26%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(8, 73%, 47%, 1)",
+            "backgroundColor": "hsla(211, 29%, 26%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -580,33 +587,32 @@ exports[`<Counter /> should render high contrast negative color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.negative.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -630,7 +636,7 @@ exports[`<Counter /> should render high contrast negative color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render high contrast negative variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis neutral color Counter 2`] = `
 <View
   style={
     {
@@ -650,18 +656,20 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
     }
   >
     <View
-      backgroundColor="feedback.background.negative.highContrast"
+      backgroundColor="feedback.background.neutral.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(8, 73%, 47%, 1)",
+            "backgroundColor": "hsla(211, 29%, 26%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(8, 73%, 47%, 1)",
+            "backgroundColor": "hsla(211, 29%, 26%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -685,33 +693,32 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.negative.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -735,7 +742,7 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
 </View>
 `;
 
-exports[`<Counter /> should render high contrast neutral color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis notice color Counter 1`] = `
 <View
   style={
     {
@@ -755,18 +762,20 @@ exports[`<Counter /> should render high contrast neutral color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.highContrast"
+      backgroundColor="feedback.background.notice.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 33%, 29%, 1)",
+            "backgroundColor": "hsla(25, 90%, 48%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 33%, 29%, 1)",
+            "backgroundColor": "hsla(25, 90%, 48%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -790,33 +799,32 @@ exports[`<Counter /> should render high contrast neutral color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -840,7 +848,7 @@ exports[`<Counter /> should render high contrast neutral color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis notice color Counter 2`] = `
 <View
   style={
     {
@@ -860,18 +868,20 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.highContrast"
+      backgroundColor="feedback.background.notice.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 33%, 29%, 1)",
+            "backgroundColor": "hsla(25, 90%, 48%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 33%, 29%, 1)",
+            "backgroundColor": "hsla(25, 90%, 48%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -895,33 +905,32 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -945,7 +954,7 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render high contrast notice color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis positive color Counter 1`] = `
 <View
   style={
     {
@@ -965,18 +974,20 @@ exports[`<Counter /> should render high contrast notice color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.notice.highContrast"
+      backgroundColor="feedback.background.positive.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(38, 97%, 38%, 1)",
+            "backgroundColor": "hsla(150, 100%, 32%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(38, 97%, 38%, 1)",
+            "backgroundColor": "hsla(150, 100%, 32%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1000,33 +1011,32 @@ exports[`<Counter /> should render high contrast notice color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.notice.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1050,7 +1060,7 @@ exports[`<Counter /> should render high contrast notice color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis positive color Counter 2`] = `
 <View
   style={
     {
@@ -1070,18 +1080,20 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.notice.highContrast"
+      backgroundColor="feedback.background.positive.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(38, 97%, 38%, 1)",
+            "backgroundColor": "hsla(150, 100%, 32%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(38, 97%, 38%, 1)",
+            "backgroundColor": "hsla(150, 100%, 32%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1105,33 +1117,32 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.notice.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1155,7 +1166,7 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render high contrast positive color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis primary color Counter 1`] = `
 <View
   style={
     {
@@ -1175,18 +1186,20 @@ exports[`<Counter /> should render high contrast positive color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.positive.highContrast"
+      backgroundColor="surface.background.primary.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(160, 100%, 26%, 1)",
+            "backgroundColor": "hsla(227, 100%, 59%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(160, 100%, 26%, 1)",
+            "backgroundColor": "hsla(227, 100%, 59%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1210,33 +1223,32 @@ exports[`<Counter /> should render high contrast positive color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1260,7 +1272,7 @@ exports[`<Counter /> should render high contrast positive color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render high contrast positive variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis primary color Counter 2`] = `
 <View
   style={
     {
@@ -1280,18 +1292,20 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
     }
   >
     <View
-      backgroundColor="feedback.background.positive.highContrast"
+      backgroundColor="surface.background.primary.intense"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(160, 100%, 26%, 1)",
+            "backgroundColor": "hsla(227, 100%, 59%, 1)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(160, 100%, 26%, 1)",
+            "backgroundColor": "hsla(227, 100%, 59%, 1)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1315,33 +1329,32 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.highContrast"
+          color="surface.text.staticWhite.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
                 "color": "hsla(0, 0%, 100%, 1)",
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1385,18 +1398,20 @@ exports[`<Counter /> should render large size Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      minHeight="24px"
       platform="onMobile"
       size="large"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "minHeight": 24,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1420,32 +1435,31 @@ exports[`<Counter /> should render large size Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={100}
           fontStyle="normal"
-          fontWeight="regular"
+          fontWeight="medium"
           lineHeight={100}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "500",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -1470,7 +1484,7 @@ exports[`<Counter /> should render large size Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
+exports[`<Counter /> should render medium size Counter 1`] = `
 <View
   style={
     {
@@ -1490,18 +1504,20 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
     }
   >
     <View
-      backgroundColor="badge.background.blue.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1525,33 +1541,32 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="badge.text.blue.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(218, 89%, 51%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1575,7 +1590,7 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast default color Counter 1`] = `
+exports[`<Counter /> should render small size Counter 1`] = `
 <View
   style={
     {
@@ -1595,18 +1610,20 @@ exports[`<Counter /> should render low contrast default color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="badge.background.blue.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      minHeight="16px"
       platform="onMobile"
-      size="medium"
+      size="small"
       style={
         [
           {
-            "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "minHeight": 16,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1630,33 +1647,32 @@ exports[`<Counter /> should render low contrast default color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
-              "paddingLeft": 8,
-              "paddingRight": 8,
-              "paddingTop": 2,
+              "paddingLeft": 4,
+              "paddingRight": 4,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="badge.text.blue.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
-          fontSize={75}
+          fontSize={25}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={25}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(218, 89%, 51%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 10,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 14,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1680,7 +1696,7 @@ exports[`<Counter /> should render low contrast default color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast information color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis information color Counter 1`] = `
 <View
   style={
     {
@@ -1700,18 +1716,20 @@ exports[`<Counter /> should render low contrast information color Counter 1`] =
     }
   >
     <View
-      backgroundColor="feedback.background.information.lowContrast"
+      backgroundColor="feedback.background.information.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
+            "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
+            "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1735,33 +1753,32 @@ exports[`<Counter /> should render low contrast information color Counter 1`] =
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.information.lowContrast"
+          color="feedback.text.information.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(193, 100%, 35%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(200, 84%, 37%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1785,7 +1802,7 @@ exports[`<Counter /> should render low contrast information color Counter 1`] =
 </View>
 `;
 
-exports[`<Counter /> should render low contrast information variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis information color Counter 2`] = `
 <View
   style={
     {
@@ -1805,18 +1822,20 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
     }
   >
     <View
-      backgroundColor="feedback.background.information.lowContrast"
+      backgroundColor="feedback.background.information.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
+            "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
+            "backgroundColor": "hsla(200, 84%, 44%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1840,33 +1859,32 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.information.lowContrast"
+          color="feedback.text.information.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(193, 100%, 35%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(200, 84%, 37%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1890,7 +1908,7 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
 </View>
 `;
 
-exports[`<Counter /> should render low contrast negative color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis negative color Counter 1`] = `
 <View
   style={
     {
@@ -1910,18 +1928,20 @@ exports[`<Counter /> should render low contrast negative color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.negative.lowContrast"
+      backgroundColor="feedback.background.negative.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
+            "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
+            "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -1945,33 +1965,32 @@ exports[`<Counter /> should render low contrast negative color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.negative.lowContrast"
+          color="feedback.text.negative.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(8, 73%, 47%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(4, 74%, 49%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1995,7 +2014,7 @@ exports[`<Counter /> should render low contrast negative color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis negative color Counter 2`] = `
 <View
   style={
     {
@@ -2015,18 +2034,20 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.negative.lowContrast"
+      backgroundColor="feedback.background.negative.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
+            "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
+            "backgroundColor": "hsla(4, 74%, 49%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2050,33 +2071,32 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.negative.lowContrast"
+          color="feedback.text.negative.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(8, 73%, 47%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(4, 74%, 49%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2100,7 +2120,7 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast neutral color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis neutral color Counter 1`] = `
 <View
   style={
     {
@@ -2120,18 +2140,20 @@ exports[`<Counter /> should render low contrast neutral color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2155,33 +2177,32 @@ exports[`<Counter /> should render low contrast neutral color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2205,7 +2226,7 @@ exports[`<Counter /> should render low contrast neutral color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis neutral color Counter 2`] = `
 <View
   style={
     {
@@ -2225,18 +2246,20 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="feedback.background.neutral.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2260,33 +2283,32 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="feedback.text.neutral.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 33%, 21%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2310,7 +2332,7 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast notice color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis notice color Counter 1`] = `
 <View
   style={
     {
@@ -2330,18 +2352,20 @@ exports[`<Counter /> should render low contrast notice color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.notice.lowContrast"
+      backgroundColor="feedback.background.notice.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
+            "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
+            "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2365,33 +2389,32 @@ exports[`<Counter /> should render low contrast notice color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.notice.lowContrast"
+          color="feedback.text.notice.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(38, 97%, 38%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(25, 85%, 42%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2415,7 +2438,7 @@ exports[`<Counter /> should render low contrast notice color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis notice color Counter 2`] = `
 <View
   style={
     {
@@ -2435,18 +2458,20 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.notice.lowContrast"
+      backgroundColor="feedback.background.notice.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
+            "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
+            "backgroundColor": "hsla(25, 90%, 48%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2470,33 +2495,32 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.notice.lowContrast"
+          color="feedback.text.notice.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(38, 97%, 38%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(25, 85%, 42%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2520,7 +2544,7 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast positive color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis positive color Counter 1`] = `
 <View
   style={
     {
@@ -2540,18 +2564,20 @@ exports[`<Counter /> should render low contrast positive color Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.positive.lowContrast"
+      backgroundColor="feedback.background.positive.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2575,33 +2601,32 @@ exports[`<Counter /> should render low contrast positive color Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.lowContrast"
+          color="feedback.text.positive.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(160, 100%, 26%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(150, 100%, 27%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2625,7 +2650,7 @@ exports[`<Counter /> should render low contrast positive color Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis positive color Counter 2`] = `
 <View
   style={
     {
@@ -2645,18 +2670,20 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.positive.lowContrast"
+      backgroundColor="feedback.background.positive.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
+            "backgroundColor": "hsla(150, 100%, 32%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2680,33 +2707,32 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.lowContrast"
+          color="feedback.text.positive.intense"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(160, 100%, 26%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(150, 100%, 27%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2730,7 +2756,7 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render medium size Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis primary color Counter 1`] = `
 <View
   style={
     {
@@ -2750,18 +2776,20 @@ exports[`<Counter /> should render medium size Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="surface.background.primary.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
       size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2785,33 +2813,32 @@ exports[`<Counter /> should render medium size Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 2,
               "paddingLeft": 8,
               "paddingRight": 8,
-              "paddingTop": 2,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="surface.text.primary.normal"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(227, 100%, 59%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -2835,7 +2862,7 @@ exports[`<Counter /> should render medium size Counter 1`] = `
 </View>
 `;
 
-exports[`<Counter /> should render small size Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis primary color Counter 2`] = `
 <View
   style={
     {
@@ -2855,18 +2882,20 @@ exports[`<Counter /> should render small size Counter 1`] = `
     }
   >
     <View
-      backgroundColor="feedback.background.neutral.lowContrast"
+      backgroundColor="surface.background.primary.subtle"
       data-blade-component="base-box"
+      minHeight="20px"
       platform="onMobile"
-      size="small"
+      size="medium"
       style={
         [
           {
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
+            "minHeight": 20,
           },
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
+            "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexWrap": "nowrap",
@@ -2890,33 +2919,32 @@ exports[`<Counter /> should render small size Counter 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
               "overflow": "hidden",
-              "paddingBottom": 0,
-              "paddingLeft": 4,
-              "paddingRight": 4,
-              "paddingTop": 0,
+              "paddingLeft": 8,
+              "paddingRight": 8,
             },
           ]
         }
       >
         <Text
           accessible={true}
-          color="feedback.text.neutral.lowContrast"
+          color="surface.text.primary.normal"
           data-blade-component="text"
           fontFamily="text"
-          fontSize={25}
+          fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 10,
+                "color": "hsla(227, 100%, 59%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
diff --git a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.ssr.test.tsx.snap b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.ssr.test.tsx.snap
index 1becda2d0d0..91093e5782d 100644
--- a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.ssr.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Counter /> should limit value with max prop 1`] = `"<div id="root"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 fCpzgd jxCTUO"><div data-blade-component="base-box" class="BaseBox-bmPWx dXvdMm"><p class="StyledBaseText-dVBfTO kSDYeK" data-blade-component="text">10+</p></div></div></div></div>"`;
+exports[`<Counter /> should limit value with max prop 1`] = `"<div id="root"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 cTQuSp dbfGbJ"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO cqdhzg" data-blade-component="text">10+</p></div></div></div></div>"`;
diff --git a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.web.test.tsx.snap b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.web.test.tsx.snap
index 4022fcfc8ec..058455445bc 100644
--- a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.web.test.tsx.snap
+++ b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.web.test.tsx.snap
@@ -9,7 +9,8 @@ exports[`<Counter /> should render Counter with default props 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(216,15%,54%,0.09);
+  min-height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -29,14 +30,12 @@ exports[`<Counter /> should render Counter with default props 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -52,14 +51,18 @@ exports[`<Counter /> should render Counter with default props 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -95,7 +98,7 @@ exports[`<Counter /> should render Counter with default props 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis information color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -104,7 +107,8 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(218,89%,51%,1);
+  min-height: 20px;
+  background-color: hsla(200,84%,44%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -124,14 +128,12 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(200,84%,44%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -148,13 +150,17 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -190,7 +196,7 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render high contrast default color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis information color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -199,7 +205,8 @@ exports[`<Counter /> should render high contrast default color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(218,89%,51%,1);
+  min-height: 20px;
+  background-color: hsla(200,84%,44%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -219,14 +226,12 @@ exports[`<Counter /> should render high contrast default color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(200,84%,44%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -243,13 +248,17 @@ exports[`<Counter /> should render high contrast default color Counter 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -285,7 +294,7 @@ exports[`<Counter /> should render high contrast default color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render high contrast information color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis negative color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -294,7 +303,8 @@ exports[`<Counter /> should render high contrast information color Counter 1`] =
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(193,100%,35%,1);
+  min-height: 20px;
+  background-color: hsla(4,74%,49%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -314,14 +324,12 @@ exports[`<Counter /> should render high contrast information color Counter 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(193,100%,35%,1);
+  background-color: hsla(4,74%,49%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -338,13 +346,17 @@ exports[`<Counter /> should render high contrast information color Counter 1`] =
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -380,7 +392,7 @@ exports[`<Counter /> should render high contrast information color Counter 1`] =
 </div>
 `;
 
-exports[`<Counter /> should render high contrast information variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis negative color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -389,7 +401,8 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(193,100%,35%,1);
+  min-height: 20px;
+  background-color: hsla(4,74%,49%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -409,14 +422,12 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(193,100%,35%,1);
+  background-color: hsla(4,74%,49%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -433,13 +444,17 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -475,7 +490,7 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
 </div>
 `;
 
-exports[`<Counter /> should render high contrast negative color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis neutral color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -484,7 +499,8 @@ exports[`<Counter /> should render high contrast negative color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(8,73%,47%,1);
+  min-height: 20px;
+  background-color: hsla(211,29%,26%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -504,14 +520,12 @@ exports[`<Counter /> should render high contrast negative color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(8,73%,47%,1);
+  background-color: hsla(211,29%,26%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -528,13 +542,17 @@ exports[`<Counter /> should render high contrast negative color Counter 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -570,7 +588,7 @@ exports[`<Counter /> should render high contrast negative color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render high contrast negative variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis neutral color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -579,7 +597,8 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(8,73%,47%,1);
+  min-height: 20px;
+  background-color: hsla(211,29%,26%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -599,14 +618,12 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(8,73%,47%,1);
+  background-color: hsla(211,29%,26%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -623,13 +640,17 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -665,7 +686,7 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
 </div>
 `;
 
-exports[`<Counter /> should render high contrast neutral color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis notice color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -674,7 +695,8 @@ exports[`<Counter /> should render high contrast neutral color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(216,33%,29%,1);
+  min-height: 20px;
+  background-color: hsla(25,90%,48%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -694,14 +716,12 @@ exports[`<Counter /> should render high contrast neutral color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,33%,29%,1);
+  background-color: hsla(25,90%,48%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -718,13 +738,17 @@ exports[`<Counter /> should render high contrast neutral color Counter 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -760,7 +784,7 @@ exports[`<Counter /> should render high contrast neutral color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis notice color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -769,7 +793,8 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(216,33%,29%,1);
+  min-height: 20px;
+  background-color: hsla(25,90%,48%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -789,14 +814,12 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,33%,29%,1);
+  background-color: hsla(25,90%,48%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -813,13 +836,17 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -855,7 +882,7 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render high contrast notice color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis positive color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -864,7 +891,8 @@ exports[`<Counter /> should render high contrast notice color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(38,97%,38%,1);
+  min-height: 20px;
+  background-color: hsla(150,100%,32%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -884,14 +912,12 @@ exports[`<Counter /> should render high contrast notice color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(38,97%,38%,1);
+  background-color: hsla(150,100%,32%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -908,13 +934,17 @@ exports[`<Counter /> should render high contrast notice color Counter 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -950,7 +980,7 @@ exports[`<Counter /> should render high contrast notice color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis positive color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -959,7 +989,8 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(38,97%,38%,1);
+  min-height: 20px;
+  background-color: hsla(150,100%,32%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -979,14 +1010,12 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(38,97%,38%,1);
+  background-color: hsla(150,100%,32%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1003,13 +1032,17 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1045,7 +1078,7 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render high contrast positive color Counter 1`] = `
+exports[`<Counter /> should render intense emphasis primary color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1054,7 +1087,8 @@ exports[`<Counter /> should render high contrast positive color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(160,100%,26%,1);
+  min-height: 20px;
+  background-color: hsla(227,100%,59%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1074,14 +1108,12 @@ exports[`<Counter /> should render high contrast positive color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(160,100%,26%,1);
+  background-color: hsla(227,100%,59%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1098,13 +1130,17 @@ exports[`<Counter /> should render high contrast positive color Counter 1`] = `
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1140,7 +1176,7 @@ exports[`<Counter /> should render high contrast positive color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render high contrast positive variant Counter 1`] = `
+exports[`<Counter /> should render intense emphasis primary color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1149,7 +1185,8 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(160,100%,26%,1);
+  min-height: 20px;
+  background-color: hsla(227,100%,59%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1169,14 +1206,12 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(160,100%,26%,1);
+  background-color: hsla(227,100%,59%,1);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1193,13 +1228,17 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
 
 .c4.c4.c4.c4.c4 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1244,7 +1283,8 @@ exports[`<Counter /> should render large size Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(216,15%,54%,0.09);
+  min-height: 24px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1264,14 +1304,12 @@ exports[`<Counter /> should render large size Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1287,14 +1325,18 @@ exports[`<Counter /> should render large size Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1330,7 +1372,7 @@ exports[`<Counter /> should render large size Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
+exports[`<Counter /> should render medium size Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1339,7 +1381,8 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(218,89%,51%,0.09);
+  min-height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1359,14 +1402,12 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1382,14 +1423,18 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1425,7 +1470,7 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast default color Counter 1`] = `
+exports[`<Counter /> should render small size Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1434,7 +1479,8 @@ exports[`<Counter /> should render low contrast default color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(218,89%,51%,0.09);
+  min-height: 16px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1454,14 +1500,12 @@ exports[`<Counter /> should render low contrast default color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 8px;
-  padding-left: 8px;
+  padding-right: 4px;
+  padding-left: 4px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1477,14 +1521,18 @@ exports[`<Counter /> should render low contrast default color Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1520,7 +1568,7 @@ exports[`<Counter /> should render low contrast default color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast information color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis information color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1529,7 +1577,8 @@ exports[`<Counter /> should render low contrast information color Counter 1`] =
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(193,100%,35%,0.09);
+  min-height: 20px;
+  background-color: hsla(200,84%,44%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1549,14 +1598,12 @@ exports[`<Counter /> should render low contrast information color Counter 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(193,100%,35%,0.09);
+  background-color: hsla(200,84%,44%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1572,14 +1619,18 @@ exports[`<Counter /> should render low contrast information color Counter 1`] =
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(193,100%,35%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,37%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1615,7 +1666,7 @@ exports[`<Counter /> should render low contrast information color Counter 1`] =
 </div>
 `;
 
-exports[`<Counter /> should render low contrast information variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis information color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1624,7 +1675,8 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(193,100%,35%,0.09);
+  min-height: 20px;
+  background-color: hsla(200,84%,44%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1644,14 +1696,12 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(193,100%,35%,0.09);
+  background-color: hsla(200,84%,44%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1667,14 +1717,18 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(193,100%,35%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,37%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1710,7 +1764,7 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
 </div>
 `;
 
-exports[`<Counter /> should render low contrast negative color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis negative color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1719,7 +1773,8 @@ exports[`<Counter /> should render low contrast negative color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(9,91%,56%,0.09);
+  min-height: 20px;
+  background-color: hsla(4,74%,49%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1739,14 +1794,12 @@ exports[`<Counter /> should render low contrast negative color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(9,91%,56%,0.09);
+  background-color: hsla(4,74%,49%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1762,14 +1815,18 @@ exports[`<Counter /> should render low contrast negative color Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1805,7 +1862,7 @@ exports[`<Counter /> should render low contrast negative color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis negative color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1814,7 +1871,8 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(9,91%,56%,0.09);
+  min-height: 20px;
+  background-color: hsla(4,74%,49%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1834,14 +1892,12 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(9,91%,56%,0.09);
+  background-color: hsla(4,74%,49%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1857,14 +1913,18 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1900,7 +1960,7 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast neutral color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis neutral color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1909,7 +1969,8 @@ exports[`<Counter /> should render low contrast neutral color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(216,15%,54%,0.09);
+  min-height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -1929,14 +1990,12 @@ exports[`<Counter /> should render low contrast neutral color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -1952,14 +2011,18 @@ exports[`<Counter /> should render low contrast neutral color Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1995,7 +2058,7 @@ exports[`<Counter /> should render low contrast neutral color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis neutral color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2004,7 +2067,8 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(216,15%,54%,0.09);
+  min-height: 20px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2024,14 +2088,12 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -2047,14 +2109,18 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2090,7 +2156,7 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast notice color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis notice color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2099,7 +2165,8 @@ exports[`<Counter /> should render low contrast notice color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(36,100%,44%,0.09);
+  min-height: 20px;
+  background-color: hsla(25,90%,48%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2119,14 +2186,12 @@ exports[`<Counter /> should render low contrast notice color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(36,100%,44%,0.09);
+  background-color: hsla(25,90%,48%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -2142,14 +2207,18 @@ exports[`<Counter /> should render low contrast notice color Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(38,97%,38%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,85%,42%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2185,7 +2254,7 @@ exports[`<Counter /> should render low contrast notice color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis notice color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2194,7 +2263,8 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(36,100%,44%,0.09);
+  min-height: 20px;
+  background-color: hsla(25,90%,48%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2214,14 +2284,12 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(36,100%,44%,0.09);
+  background-color: hsla(25,90%,48%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -2237,14 +2305,18 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(38,97%,38%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,85%,42%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2280,7 +2352,7 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast positive color Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis positive color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2289,7 +2361,8 @@ exports[`<Counter /> should render low contrast positive color Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(155,100%,31%,0.09);
+  min-height: 20px;
+  background-color: hsla(150,100%,32%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2309,14 +2382,12 @@ exports[`<Counter /> should render low contrast positive color Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(155,100%,31%,0.09);
+  background-color: hsla(150,100%,32%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -2332,14 +2403,18 @@ exports[`<Counter /> should render low contrast positive color Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2375,7 +2450,7 @@ exports[`<Counter /> should render low contrast positive color Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis positive color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2384,7 +2459,8 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(155,100%,31%,0.09);
+  min-height: 20px;
+  background-color: hsla(150,100%,32%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2404,14 +2480,12 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(155,100%,31%,0.09);
+  background-color: hsla(150,100%,32%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -2427,14 +2501,18 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2470,7 +2548,7 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render medium size Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis primary color Counter 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2479,7 +2557,8 @@ exports[`<Counter /> should render medium size Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(216,15%,54%,0.09);
+  min-height: 20px;
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2499,14 +2578,12 @@ exports[`<Counter /> should render medium size Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -2522,14 +2599,18 @@ exports[`<Counter /> should render medium size Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2565,7 +2646,7 @@ exports[`<Counter /> should render medium size Counter 1`] = `
 </div>
 `;
 
-exports[`<Counter /> should render small size Counter 1`] = `
+exports[`<Counter /> should render subtle emphasis primary color Counter 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2574,7 +2655,8 @@ exports[`<Counter /> should render small size Counter 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  background-color: hsla(216,15%,54%,0.09);
+  min-height: 20px;
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2594,14 +2676,12 @@ exports[`<Counter /> should render small size Counter 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-right: 4px;
-  padding-left: 4px;
+  padding-right: 8px;
+  padding-left: 8px;
 }
 
 .c2.c2.c2.c2.c2 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -2617,14 +2697,18 @@ exports[`<Counter /> should render small size Counter 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.625rem;
-  font-weight: 400;
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
diff --git a/packages/blade/src/components/Counter/counterTokens.ts b/packages/blade/src/components/Counter/counterTokens.ts
index c7d0ce3949b..e41ded059a8 100644
--- a/packages/blade/src/components/Counter/counterTokens.ts
+++ b/packages/blade/src/components/Counter/counterTokens.ts
@@ -6,10 +6,10 @@ import { size } from '~tokens/global';
 
 type CounterMaxWidth = Size[100] | Size[120];
 
-const verticalPadding: Record<NonNullable<CounterProps['size']>, DotNotationSpacingStringToken> = {
-  small: 'spacing.0',
-  medium: 'spacing.1',
-  large: 'spacing.1',
+const counterHeight: Record<NonNullable<CounterProps['size']>, number> = {
+  small: size[16],
+  medium: size[20],
+  large: size[24],
 };
 
 const horizontalPadding: Record<
@@ -26,4 +26,4 @@ const maxWidth: Record<NonNullable<TypographyPlatforms>, CounterMaxWidth> = {
   onDesktop: size[120],
 };
 
-export { maxWidth, verticalPadding, horizontalPadding };
+export { maxWidth, counterHeight, horizontalPadding };
diff --git a/packages/blade/src/components/Counter/types.ts b/packages/blade/src/components/Counter/types.ts
index 9d13a159c75..6924b23623d 100644
--- a/packages/blade/src/components/Counter/types.ts
+++ b/packages/blade/src/components/Counter/types.ts
@@ -2,17 +2,16 @@ import type { CounterProps } from './Counter';
 import type { Theme } from '~components/BladeProvider';
 import type { TypographyPlatforms } from '~tokens/global';
 import type { DotNotationColorStringToken } from '~utils/types';
+import type { SubtleOrIntense } from '~tokens/theme/theme';
 
 type FeedbackBackgroundColors = `feedback.background.${DotNotationColorStringToken<
   Theme['colors']['feedback']['background']
 >}`;
 
-type BadgeBackgroundColors = `badge.background.${DotNotationColorStringToken<
-  Theme['colors']['badge']['background']
->}`;
+type SurfacePrimaryColors = `surface.background.primary.${SubtleOrIntense}`;
 
 export type StyledCounterProps = {
-  backgroundColor: FeedbackBackgroundColors | BadgeBackgroundColors;
+  backgroundColor: FeedbackBackgroundColors | SurfacePrimaryColors;
   size: NonNullable<CounterProps['size']>;
   platform: TypographyPlatforms;
   theme: Theme;
diff --git a/packages/blade/src/components/Divider/Divider.stories.tsx b/packages/blade/src/components/Divider/Divider.stories.tsx
index 0ce01442339..330ab7285ed 100644
--- a/packages/blade/src/components/Divider/Divider.stories.tsx
+++ b/packages/blade/src/components/Divider/Divider.stories.tsx
@@ -1,5 +1,4 @@
 import type { StoryFn, Meta } from '@storybook/react';
-import { Title } from '@storybook/addon-docs';
 import type { DividerProps } from './Divider';
 import { Divider as DividerComponent } from './Divider';
 import { Heading } from '~components/Typography/Heading';
@@ -16,17 +15,12 @@ import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgType
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=608-883166&mode=design&t=6uRroMDHC66zlvxT-0',
-        bankingTheme:
-          'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=608-883166&mode=design&t=6uRroMDHC66zlvxT-0',
-      }}
+      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=608-883166&mode=design&t=6uRroMDHC66zlvxT-0"
       componentName="Divider"
       componentDescription="Divider is a visual element that is used to separate or divide content within a layout"
       apiDecisionLink={null}
     >
-      <Title>Usage</Title>
+      <Heading size="large">Usage</Heading>
       <Sandbox>
         {`
           import {
diff --git a/packages/blade/src/components/Divider/Divider.tsx b/packages/blade/src/components/Divider/Divider.tsx
index 2396e4464d0..15cf6552c4c 100644
--- a/packages/blade/src/components/Divider/Divider.tsx
+++ b/packages/blade/src/components/Divider/Divider.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import BaseBox from '~components/Box/BaseBox';
 import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
-import type { ColorContrast } from '~tokens/theme/theme';
 import { isReactNative, makeBorderSize } from '~utils';
 import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
 import type { TestID } from '~utils/types';
@@ -28,19 +27,13 @@ type DividerProps = {
    *
    * @default 'normal'
    */
-  variant?: 'normal' | 'subtle';
+  variant?: 'normal' | 'subtle' | 'muted';
   /**
    * Sets the thickness of divider
    *
    * @default 'thin'
    */
-  thickness?: 'thinner' | 'thin' | 'thick';
-  /**
-   * Sets the contrast of divider
-   *
-   * @default 'low'
-   */
-  contrast?: 'low' | 'high';
+  thickness?: 'thinner' | 'thin' | 'thick' | 'thicker';
   /**
    * Sets the height of divider. Divider uses Flex by default, use height only when parent is not flex.
    *
@@ -62,6 +55,7 @@ const StyledDivider = styled(BaseBox)<{
   width: DividerProps['width'];
   isDividerHorizontal: boolean;
 }>(({ theme, borderPosition, dividerStyle, thickness, isDividerHorizontal, width, height }) => ({
+  borderWidth: 0,
   [`${borderPosition}Style`]: dividerStyle,
   [`${borderPosition}Width`]: makeBorderSize(theme.border.width[thickness]),
   ...(isDividerHorizontal ? { flexGrow: 1, width } : { alignSelf: 'stretch', height }),
@@ -70,9 +64,8 @@ const StyledDivider = styled(BaseBox)<{
 const Divider = ({
   orientation = 'horizontal',
   dividerStyle = 'solid',
-  variant = 'normal',
+  variant = 'muted',
   thickness = 'thin',
-  contrast = 'low',
   height,
   width,
   testID,
@@ -80,8 +73,7 @@ const Divider = ({
 }: DividerProps): React.ReactElement => {
   const isDividerHorizontal = orientation === 'horizontal';
   const borderPosition = isDividerHorizontal ? 'borderBottom' : 'borderLeft';
-  const colorContrast: keyof ColorContrast = `${contrast}Contrast`;
-  const borderColor = { [`${borderPosition}Color`]: `surface.border.${variant}.${colorContrast}` };
+  const borderColor = { [`${borderPosition}Color`]: `surface.border.gray.${variant}` };
   const accessibilityProps = isReactNative()
     ? {}
     : makeAccessible({
@@ -90,7 +82,6 @@ const Divider = ({
 
   return (
     <StyledDivider
-      borderWidth="none"
       borderPosition={borderPosition}
       isDividerHorizontal={isDividerHorizontal}
       dividerStyle={dividerStyle}
diff --git a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.native.test.tsx.snap b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.native.test.tsx.snap
index de9dc31123c..3f9f195761a 100644
--- a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.native.test.tsx.snap
+++ b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.native.test.tsx.snap
@@ -22,9 +22,8 @@ exports[`<Divider /> should render Divider using height 1`] = `
     }
   >
     <View
-      borderLeftColor="surface.border.normal.lowContrast"
+      borderLeftColor="surface.border.gray.muted"
       borderPosition="borderLeft"
-      borderWidth="none"
       data-blade-component="divider"
       dividerStyle="solid"
       height="100%"
@@ -32,15 +31,15 @@ exports[`<Divider /> should render Divider using height 1`] = `
       style={
         [
           {
-            "borderLeftColor": "hsla(216, 15%, 54%, 0.18)",
-            "borderStyle": "solid",
-            "borderWidth": 0,
+            "borderLeftColor": "hsla(211, 20%, 52%, 0.18)",
+            "borderLeftStyle": "solid",
             "height": "100%",
           },
           {
             "alignSelf": "stretch",
             "borderLeftStyle": "solid",
             "borderLeftWidth": 1,
+            "borderWidth": 0,
             "height": "100%",
           },
         ]
@@ -71,22 +70,21 @@ exports[`<Divider /> should render Divider within flex container 1`] = `
     }
   >
     <View
-      borderBottomColor="surface.border.normal.lowContrast"
+      borderBottomColor="surface.border.gray.muted"
       borderPosition="borderBottom"
-      borderWidth="none"
       data-blade-component="divider"
       dividerStyle="solid"
       isDividerHorizontal={true}
       style={
         [
           {
-            "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-            "borderStyle": "solid",
-            "borderWidth": 0,
+            "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+            "borderBottomStyle": "solid",
           },
           {
             "borderBottomStyle": "solid",
             "borderBottomWidth": 1,
+            "borderWidth": 0,
             "flexGrow": 1,
           },
         ]
diff --git a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.ssr.test.tsx.snap b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.ssr.test.tsx.snap
index d0e5acadce5..40f5b94209c 100644
--- a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Divider /> should render Divider on server 1`] = `"<div id="root"><div data-blade-component="box" class="BaseBox-bmPWx pJwXq"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div></div></div>"`;
+exports[`<Divider /> should render Divider on server 1`] = `"<div id="root"><div data-blade-component="box" class="BaseBox-bmPWx pJwXq"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div>"`;
 
 exports[`<Divider /> should render Divider on server 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -11,12 +11,12 @@ exports[`<Divider /> should render Divider on server 2`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c2.c2.c2.c2.c2 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -27,31 +27,31 @@ exports[`<Divider /> should render Divider on server 2`] = `
 
 @media screen and (min-width:320px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
diff --git a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.web.test.tsx.snap b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.web.test.tsx.snap
index d647c5d8953..64f4f77f72f 100644
--- a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.web.test.tsx.snap
+++ b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.web.test.tsx.snap
@@ -9,12 +9,12 @@ exports[`<Divider /> should render Divider within flex container 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c2.c2.c2.c2.c2 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -25,31 +25,31 @@ exports[`<Divider /> should render Divider within flex container 1`] = `
 
 @media screen and (min-width:320px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -75,12 +75,12 @@ exports[`<Divider /> should render horizontal Divider using width 1`] = `
 
 .c1.c1.c1.c1.c1 {
   width: 100%;
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c2.c2.c2.c2.c2 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -92,31 +92,31 @@ exports[`<Divider /> should render horizontal Divider using width 1`] = `
 
 @media screen and (min-width:320px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -142,12 +142,12 @@ exports[`<Divider /> should render vertical Divider using height 1`] = `
 
 .c1.c1.c1.c1.c1 {
   height: 100%;
-  border-width: 0px;
-  border-left-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-left-color: hsla(211,20%,52%,0.18);
+  border-left-style: solid;
 }
 
 .c2.c2.c2.c2.c2 {
+  border-width: 0;
   border-left-style: solid;
   border-left-width: 1px;
   -webkit-align-self: stretch;
@@ -158,31 +158,31 @@ exports[`<Divider /> should render vertical Divider using height 1`] = `
 
 @media screen and (min-width:320px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-left-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-left-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-left-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-left-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c1.c1.c1.c1.c1 {
-    border-style: solid;
+    border-left-style: solid;
   }
 }
 
diff --git a/packages/blade/src/components/Dropdown/Dropdown.tsx b/packages/blade/src/components/Dropdown/Dropdown.tsx
index 38d5a1eee3b..9b97f973c2c 100644
--- a/packages/blade/src/components/Dropdown/Dropdown.tsx
+++ b/packages/blade/src/components/Dropdown/Dropdown.tsx
@@ -56,7 +56,6 @@ const _Dropdown = ({
   isOpen: isOpenControlled,
   onOpenChange,
   selectionType = 'single',
-  onDismiss,
   testID,
   ...styledProps
 }: DropdownProps): React.ReactElement => {
@@ -101,9 +100,6 @@ const _Dropdown = ({
 
   useDidUpdate(() => {
     onOpenChange?.(isOpen);
-    if (!isOpen) {
-      onDismiss?.();
-    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
diff --git a/packages/blade/src/components/Dropdown/StyledDropdownOverlay.tsx b/packages/blade/src/components/Dropdown/StyledDropdownOverlay.tsx
index 5e4245cf67e..da9cc21381c 100644
--- a/packages/blade/src/components/Dropdown/StyledDropdownOverlay.tsx
+++ b/packages/blade/src/components/Dropdown/StyledDropdownOverlay.tsx
@@ -8,9 +8,9 @@ const StyledDropdownOverlay = styled(BaseBox)<{
   const { theme, isInBottomSheet } = props;
 
   return {
-    backgroundColor: theme.colors.surface.popup.background,
+    backgroundColor: theme.colors.popup.background.subtle,
     borderWidth: isInBottomSheet ? undefined : theme.border.width.thin,
-    borderColor: theme.colors.surface.border.normal.lowContrast,
+    borderColor: theme.colors.interactive.border.gray.faded,
     borderStyle: isInBottomSheet ? undefined : 'solid',
     borderRadius: makeSize(theme.border.radius.medium),
   };
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
index eb7c6f652fb..93eda275713 100644
--- a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
+++ b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
@@ -116,23 +116,24 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.subdued.lowContrast"
+                    color="surface.text.gray.subtle"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={75}
                     fontStyle="normal"
-                    fontWeight="bold"
-                    lineHeight={50}
+                    fontWeight="semibold"
+                    lineHeight={75}
                     numberOfLines={2}
                     style={
                       [
                         {
-                          "color": "hsla(217, 18%, 45%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(211, 26%, 34%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 12,
                           "fontStyle": "normal",
-                          "fontWeight": "700",
-                          "lineHeight": 16,
+                          "fontWeight": "600",
+                          "letterSpacing": 0,
+                          "lineHeight": 18,
                           "marginBottom": 0,
                           "marginLeft": 0,
                           "marginRight": 0,
@@ -179,7 +180,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   >
                     <Text
                       accessible={true}
-                      color="surface.text.normal.lowContrast"
+                      color="surface.text.gray.normal"
                       data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
@@ -189,11 +190,12 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       style={
                         [
                           {
-                            "color": "hsla(217, 56%, 17%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(212, 39%, 16%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -219,8 +221,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               style={
                 [
                   {
-                    "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                    "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+                    "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                    "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
                     "borderBottomStyle": "solid",
                     "borderBottomWidth": 1,
                     "borderTopLeftRadius": 2,
@@ -356,15 +358,16 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         style={
                           {
                             "backgroundColor": "transparent",
-                            "color": "hsla(214, 18%, 69%, 1)",
+                            "color": "hsla(211, 20%, 52%, 0.32)",
                             "flexBasis": 0,
                             "flexGrow": 1,
                             "flexShrink": 1,
-                            "fontFamily": "Lato",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
                             "height": 36,
+                            "letterSpacing": 0,
                             "marginBottom": 0,
                             "marginLeft": 0,
                             "marginRight": 0,
@@ -383,7 +386,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.placeholder.lowContrast"
+                          color="surface.text.gray.disabled"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -394,11 +397,12 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(214, 18%, 69%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(211, 20%, 52%, 0.32)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -573,7 +577,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         <RNSVGPath
                           clipRule={0}
                           d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
-                          fill={4279445060}
+                          fill={4285959847}
                           fillRule={0}
                           propList={
                             [
@@ -632,7 +636,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         <RNSVGPath
                           clipRule={0}
                           d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z"
-                          fill={4279445060}
+                          fill={4285959847}
                           fillRule={0}
                           propList={
                             [
@@ -650,7 +654,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                      "backgroundColor": "hsla(227, 100%, 59%, 1)",
                       "bottom": 0,
                       "height": 1,
                       "left": 0,
@@ -763,19 +767,19 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   "width": "100%",
                 },
                 {
-                  "elevation": 12,
-                  "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+                  "elevation": 16,
+                  "shadowColor": "hsla(217, 56%, 17%, 0.55)",
                   "shadowOffset": {
-                    "height": 8,
+                    "height": 4,
                     "width": 0,
                   },
-                  "shadowOpacity": 0.1,
-                  "shadowRadius": 4,
+                  "shadowOpacity": 0.17,
+                  "shadowRadius": 6,
                 },
                 [
                   {
                     "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                    "borderColor": "hsla(216, 15%, 54%, 0.18)",
+                    "borderColor": "hsla(211, 20%, 52%, 0.18)",
                     "borderRadius": 4,
                     "borderStyle": "solid",
                     "borderWidth": 1,
@@ -888,23 +892,23 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                           }
                         >
                           <Text
-                            accessibilityRole="header"
                             accessible={true}
-                            color="surface.text.normal.lowContrast"
-                            data-blade-component="heading"
+                            color="surface.text.gray.normal"
+                            data-blade-component="text"
                             fontFamily="text"
                             fontSize={200}
                             fontStyle="normal"
-                            fontWeight="bold"
-                            lineHeight={300}
+                            fontWeight="semibold"
+                            lineHeight={200}
                             style={
                               [
                                 {
-                                  "color": "hsla(217, 56%, 17%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(212, 39%, 16%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 16,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 24,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -927,22 +931,21 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   </View>
                 </View>
                 <View
-                  borderBottomColor="surface.border.normal.lowContrast"
+                  borderBottomColor="surface.border.gray.muted"
                   borderPosition="borderBottom"
-                  borderWidth="none"
                   data-blade-component="divider"
                   dividerStyle="solid"
                   isDividerHorizontal={true}
                   style={
                     [
                       {
-                        "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                        "borderStyle": "solid",
-                        "borderWidth": 0,
+                        "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                        "borderBottomStyle": "solid",
                       },
                       {
                         "borderBottomStyle": "solid",
                         "borderBottomWidth": 1,
+                        "borderWidth": 0,
                         "flexGrow": 1,
                       },
                     ]
@@ -989,7 +992,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 getItemCount={[Function]}
                 isInBottomSheet={false}
                 keyExtractor={[Function]}
-                marginBottom={0}
+                marginBottom="0px"
                 onContentSizeChange={[Function]}
                 onLayout={[Function]}
                 onMomentumScrollBegin={[Function]}
@@ -1003,7 +1006,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 style={
                   [
                     {
-                      "marginBottom": 0,
+                      "marginBottom": "0pxpx",
                       "maxHeight": 300,
                       "paddingBottom": 8,
                       "paddingLeft": 8,
@@ -1125,7 +1128,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.normal.lowContrast"
+                            color="interactive.text.gray.normal"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
@@ -1136,11 +1139,12 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                             style={
                               [
                                 {
-                                  "color": "hsla(217, 56%, 17%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(212, 39%, 16%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
                                   "fontWeight": "400",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -1284,7 +1288,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.normal.lowContrast"
+                            color="interactive.text.gray.normal"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
@@ -1295,11 +1299,12 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                             style={
                               [
                                 {
-                                  "color": "hsla(217, 56%, 17%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(212, 39%, 16%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
                                   "fontWeight": "400",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -1356,22 +1361,21 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               }
             >
               <View
-                borderBottomColor="surface.border.normal.lowContrast"
+                borderBottomColor="surface.border.gray.muted"
                 borderPosition="borderBottom"
-                borderWidth="none"
                 data-blade-component="divider"
                 dividerStyle="solid"
                 isDividerHorizontal={true}
                 style={
                   [
                     {
-                      "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                      "borderStyle": "solid",
-                      "borderWidth": 0,
+                      "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                      "borderBottomStyle": "solid",
                     },
                     {
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
+                      "borderWidth": 0,
                       "flexGrow": 1,
                     },
                   ]
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap
index 213e8a04020..252eb2f0020 100644
--- a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dropdown /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kUMlmJ"><div data-blade-component="base-box" class="BaseBox-bmPWx jjDQyK"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><input tabindex="-1" aria-hidden="true" value=""/></div><div data-blade-component="select-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dJfiGc cgXnWX"><div class="BaseBox-bmPWx eRtEHm tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx drbAuO"><button type="button" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" value="" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeButton-hsusrk-1 bAkdbd"><p class="StyledBaseText-dVBfTO kxNGZv" data-blade-component="text">Select Option</p></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><div data-blade-component="base-box" class="BaseBox-bmPWx dxquVw"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 lmEfDF"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 fDSHXQ"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx yMflf"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 brSCvF jkDUYw"><div data-blade-component="base-box" class="BaseBox-bmPWx cZtflA"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><h6 class="StyledBaseText-dVBfTO iFUkNH" data-blade-component="heading">Recent Searches</h6></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div></div></div><div id="dropdown-undefined-actionlist" role="listbox" aria-multiselectable="false" aria-labelledby="dropdown-undefined-label" data-blade-component="action-list" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledListBoxWrapperweb__StyledListBoxWrapper-sc-1eo4pr6-0  eqjJNO"><button id="dropdown-undefined-0" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  kntvDs" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="apple" data-index="0"><div data-blade-component="base-box" class="BaseBox-bmPWx kCHCkj"><div data-blade-component="base-box" class="BaseBox-bmPWx ieaOju"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bSRMqp"><p class="StyledBaseText-dVBfTO dfbRdk" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gAZVjQ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button><button id="dropdown-undefined-1" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  kntvDs" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="mango" data-index="1"><div data-blade-component="base-box" class="BaseBox-bmPWx kCHCkj"><div data-blade-component="base-box" class="BaseBox-bmPWx ieaOju"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bSRMqp"><p class="StyledBaseText-dVBfTO dfbRdk" data-blade-component="text">Mango</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gAZVjQ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button></div></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx dJEYFx"></div></div></div></div></div></div></div>"`;
+exports[`<Dropdown /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kUMlmJ"><div data-blade-component="base-box" class="BaseBox-bmPWx jjDQyK"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><input tabindex="-1" aria-hidden="true" value=""/></div><div data-blade-component="select-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  djRbKc cgXnWX"><div class="BaseBox-bmPWx eRtEHm tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx drbAuO"><button type="button" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" value="" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeButton-hsusrk-1 fpblXh"><p class="StyledBaseText-dVBfTO dNDwxU" data-blade-component="text">Select Option</p></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><div data-blade-component="base-box" class="BaseBox-bmPWx dxquVw"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 lmEfDF"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 fDSHXQ"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx yMflf"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 qogZr hBPEVn"><div data-blade-component="base-box" class="BaseBox-bmPWx cZtflA"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">Recent Searches</p></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div id="dropdown-undefined-actionlist" role="listbox" aria-multiselectable="false" aria-labelledby="dropdown-undefined-label" data-blade-component="action-list" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledListBoxWrapperweb__StyledListBoxWrapper-sc-1eo4pr6-0  eqjJNO"><button id="dropdown-undefined-0" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  kNhTCc" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="apple" data-index="0"><div data-blade-component="base-box" class="BaseBox-bmPWx kCHCkj"><div data-blade-component="base-box" class="BaseBox-bmPWx ieaOju"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bSRMqp"><p class="StyledBaseText-dVBfTO fMVqO" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gAZVjQ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button><button id="dropdown-undefined-1" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  kNhTCc" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="mango" data-index="1"><div data-blade-component="base-box" class="BaseBox-bmPWx kCHCkj"><div data-blade-component="base-box" class="BaseBox-bmPWx ieaOju"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bSRMqp"><p class="StyledBaseText-dVBfTO fMVqO" data-blade-component="text">Mango</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gAZVjQ"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button></div></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx dJEYFx"></div></div></div></div></div></div></div>"`;
 
 exports[`<Dropdown /> should render dropdown and make it visible on click 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -137,7 +137,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 
 .c24.c24.c24.c24.c24 {
   width: 100%;
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c26.c26.c26.c26.c26 {
@@ -207,9 +207,8 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c33.c33.c33.c33.c33 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c37.c37.c37.c37.c37 {
@@ -297,6 +296,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c11.c11.c11.c11.c11 {
@@ -321,7 +321,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 .c25.c25.c25.c25.c25 {
   background-color: hsla(0,0%,100%,1);
   border-width: 1px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
   border-radius: 4px;
 }
@@ -330,10 +330,10 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -349,6 +349,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -363,25 +364,25 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c43.c43.c43.c43.c43:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c43.c43.c43.c43.c43:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c43.c43.c43.c43.c43:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c43.c43.c43.c43.c43 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -389,14 +390,18 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -407,27 +412,35 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -439,27 +452,35 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c32.c32.c32.c32.c32 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c40.c40.c40.c40.c40 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -471,13 +492,17 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 
 .c46.c46.c46.c46.c46 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -499,6 +524,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c34.c34.c34.c34.c34 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -508,14 +534,18 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -537,56 +567,72 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c13.c13.c13.c13.c13::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -602,7 +648,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
   -webkit-animation: cAlpMa-450290765 250ms cubic-bezier(0.3,0,0.2,1) forwards;
@@ -610,8 +656,8 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c9.c9.c9.c9.c9 {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -629,8 +675,8 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c9.c9.c9.c9.c9:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -654,8 +700,8 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c9.c9.c9.c9.c9:focus-within {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -721,11 +767,15 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 }
 
 .c36.c36.c36.c36.c36:hover:not([aria-disabled=true]) {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c36.c36.c36.c36.c36[aria-selected=true] {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
+}
+
+.c36.c36.c36.c36.c36[aria-selected=true]:hover {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 @media screen and (min-width:768px) {
@@ -739,31 +789,31 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
 
 @media screen and (min-width:320px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -906,7 +956,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
                         clip-rule="evenodd"
                         d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -923,7 +973,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
                         clip-rule="evenodd"
                         d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -986,12 +1036,12 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 2`] =
                         class="c31"
                         data-blade-component="base-box"
                       >
-                        <h6
+                        <p
                           class="c32"
-                          data-blade-component="heading"
+                          data-blade-component="text"
                         >
                           Recent Searches
-                        </h6>
+                        </p>
                       </div>
                     </div>
                   </div>
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap
index 8fa71a8b463..74deeea7d4e 100644
--- a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap
+++ b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.web.test.tsx.snap
@@ -135,7 +135,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 
 .c24.c24.c24.c24.c24 {
   width: 100%;
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c26.c26.c26.c26.c26 {
@@ -205,9 +205,8 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c33.c33.c33.c33.c33 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c37.c37.c37.c37.c37 {
@@ -295,6 +294,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c11.c11.c11.c11.c11 {
@@ -319,7 +319,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 .c25.c25.c25.c25.c25 {
   background-color: hsla(0,0%,100%,1);
   border-width: 1px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
   border-radius: 4px;
 }
@@ -328,10 +328,10 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -347,6 +347,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -361,25 +362,25 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c43.c43.c43.c43.c43:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c43.c43.c43.c43.c43:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c43.c43.c43.c43.c43:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c43.c43.c43.c43.c43 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -387,14 +388,18 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -405,27 +410,35 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -437,27 +450,35 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c32.c32.c32.c32.c32 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c40.c40.c40.c40.c40 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -469,13 +490,17 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 
 .c46.c46.c46.c46.c46 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -497,6 +522,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c34.c34.c34.c34.c34 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -506,14 +532,18 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -535,56 +565,72 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c13.c13.c13.c13.c13::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -600,7 +646,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
   -webkit-animation: cAlpMa-450290765 250ms cubic-bezier(0.3,0,0.2,1) forwards;
@@ -608,8 +654,8 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c9.c9.c9.c9.c9 {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -627,8 +673,8 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c9.c9.c9.c9.c9:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -652,8 +698,8 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c9.c9.c9.c9.c9:focus-within {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -719,11 +765,15 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 }
 
 .c36.c36.c36.c36.c36:hover:not([aria-disabled=true]) {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c36.c36.c36.c36.c36[aria-selected=true] {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
+}
+
+.c36.c36.c36.c36.c36[aria-selected=true]:hover {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 @media screen and (min-width:768px) {
@@ -737,31 +787,31 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
 
 @media screen and (min-width:320px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c33.c33.c33.c33.c33 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -902,7 +952,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
                         clip-rule="evenodd"
                         d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -919,7 +969,7 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
                         clip-rule="evenodd"
                         d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -982,12 +1032,12 @@ exports[`<Dropdown /> should render dropdown and make it visible on click 1`] =
                         class="c31"
                         data-blade-component="base-box"
                       >
-                        <h6
+                        <p
                           class="c32"
-                          data-blade-component="heading"
+                          data-blade-component="text"
                         >
                           Recent Searches
-                        </h6>
+                        </p>
                       </div>
                     </div>
                   </div>
diff --git a/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx b/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx
index a4ea090047d..0b54d05346a 100644
--- a/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx
+++ b/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx
@@ -8,7 +8,7 @@ import {
 } from './stories';
 import { getSimpleAutoComplete } from './autoCompleteStories';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
-import { Code, Heading, Text, Title } from '~components/Typography';
+import { Code, Heading, Text } from '~components/Typography';
 import { Sandbox, VerticalSandbox } from '~utils/storybook/Sandbox/SandpackEditor';
 import { Box } from '~components/Box';
 import { ArgsTable } from '~utils/storybook/ArgsTable';
@@ -23,21 +23,16 @@ const DropdownDocs = (): React.ReactElement => {
       componentDescription="Dropdown component to help you create select menu or action menu. To create a menu, you would have to use this component + Trigger (SelectInput, AutoComplete, DropdownButton, DropdownLink) + ActionList"
       imports=""
       showStorybookControls={false}
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=38643-719971',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=13448-381615',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=38643-719971"
     >
       <Box as="section">
-        <Title size="medium">Playground</Title>
+        <Heading size="xlarge">Playground</Heading>
         <Sandbox editorHeight={400}>{Playground}</Sandbox>
       </Box>
       <BaseBox id="dropdown" as="section">
-        <Title size="medium" marginBottom="spacing.4">
+        <Heading size="xlarge" marginBottom="spacing.4">
           Dropdown
-        </Title>
+        </Heading>
         <Text>A Dropdown in Blade is usually a composite of 3 elements -</Text>
         <List variant="ordered-filled" marginY="spacing.5">
           <ListItem>
@@ -116,7 +111,7 @@ const DropdownDocs = (): React.ReactElement => {
         </List>
       </BaseBox>
       <BaseBox as="section" id="dropdownheader">
-        <Title size="medium">DropdownHeader</Title>
+        <Heading size="xlarge">DropdownHeader</Heading>
         <ArgsTable
           data={{
             title: 'string',
@@ -128,7 +123,7 @@ const DropdownDocs = (): React.ReactElement => {
         />
       </BaseBox>
       <BaseBox as="section" id="dropdownfooter">
-        <Title size="medium">DropdownFooter</Title>
+        <Heading size="xlarge">DropdownFooter</Heading>
         <ArgsTable
           data={{
             children: 'ReactNode',
@@ -136,7 +131,7 @@ const DropdownDocs = (): React.ReactElement => {
         />
       </BaseBox>
       <BaseBox as="section">
-        <Title size="small">With SelectInput</Title>
+        <Heading size="large">With SelectInput</Heading>
         <Text marginY="spacing.3">
           Check out more Select examples at{' '}
           <Link href="/?path=/docs/components-dropdown-with-select--with-single-select">
@@ -153,7 +148,7 @@ const DropdownDocs = (): React.ReactElement => {
         <VerticalSandbox minHeight="250px" code={WithControlledSelectStory} />
       </BaseBox>
       <BaseBox as="section">
-        <Title size="small">With AutoComplete</Title>
+        <Heading size="large">With AutoComplete</Heading>
         <Text marginY="spacing.3">
           Check out more AutoComplete examples at{' '}
           <Link href="/?path=/docs/components-dropdown-with-autocomplete--with-single-select">
@@ -170,9 +165,9 @@ const DropdownDocs = (): React.ReactElement => {
         <VerticalSandbox minHeight="250px" code={getSimpleAutoComplete('multiple')} />
       </BaseBox>
       <BaseBox as="section">
-        <Title size="small" marginBottom="spacing.3">
+        <Heading size="large" marginBottom="spacing.3">
           With Button
-        </Title>
+        </Heading>
         <Text marginY="spacing.3">
           Check out more Menu examples at{' '}
           <Link href="/?path=/docs/components-dropdown-with-button-and-link--default">
diff --git a/packages/blade/src/components/Dropdown/docs/DropdownWithButton.stories.tsx b/packages/blade/src/components/Dropdown/docs/DropdownWithButton.stories.tsx
index 5f3d0ea0ad4..d90ba77e0cd 100644
--- a/packages/blade/src/components/Dropdown/docs/DropdownWithButton.stories.tsx
+++ b/packages/blade/src/components/Dropdown/docs/DropdownWithButton.stories.tsx
@@ -168,7 +168,7 @@ export const InternalAutoPositioning = (): React.ReactElement => {
         <Dropdown>
           <DropdownButton>Top Left Menu</DropdownButton>
           <DropdownOverlay width="70%">
-            <ActionList surfaceLevel={3}>
+            <ActionList>
               <ActionListItem title="Apples" value="Apples" />
               <ActionListItem title="Appricots" value="Appricots" />
             </ActionList>
@@ -179,7 +179,7 @@ export const InternalAutoPositioning = (): React.ReactElement => {
         <Dropdown>
           <DropdownButton>Top Right Menu</DropdownButton>
           <DropdownOverlay>
-            <ActionList surfaceLevel={3}>
+            <ActionList>
               <ActionListItem title="Apples" value="Apples" />
               <ActionListItem title="Appricots" value="Appricots" />
             </ActionList>
@@ -190,7 +190,7 @@ export const InternalAutoPositioning = (): React.ReactElement => {
         <Dropdown>
           <DropdownButton>Bottom Right Menu</DropdownButton>
           <DropdownOverlay>
-            <ActionList surfaceLevel={3}>
+            <ActionList>
               <ActionListItem title="Apples" value="Apples" />
               <ActionListItem title="Appricots" value="Appricots" />
             </ActionList>
@@ -201,7 +201,7 @@ export const InternalAutoPositioning = (): React.ReactElement => {
         <Dropdown>
           <DropdownButton>Bottom Left Menu</DropdownButton>
           <DropdownOverlay>
-            <ActionList surfaceLevel={3}>
+            <ActionList>
               <ActionListItem title="Apples" value="Apples" />
               <ActionListItem title="Appricots" value="Appricots" />
             </ActionList>
diff --git a/packages/blade/src/components/Dropdown/docs/stories.ts b/packages/blade/src/components/Dropdown/docs/stories.ts
index 11fbce12973..3803cb119ae 100644
--- a/packages/blade/src/components/Dropdown/docs/stories.ts
+++ b/packages/blade/src/components/Dropdown/docs/stories.ts
@@ -395,7 +395,7 @@ const WithValidationStateStory = `
             }}
           />
           <DropdownOverlay>
-            <ActionList surfaceLevel={2}>
+            <ActionList>
               <ActionListItem title="Blade" value="blade" />
               <ActionListItem title="Primer" value="primer" />
               <ActionListItem title="Geist" description="by Vercel" value="geist" />
@@ -746,7 +746,12 @@ const WithLinkStory = `
       <Box padding="spacing.10" display="flex" alignItems="center" gap="spacing.2">
         <Text>Sort By</Text>
         <Box flex="1">
-          <Dropdown onDismiss={() => setIsDropdownOpen(false)}>
+          <Dropdown 
+            onOpenChange={(isOpen) => {
+              if (!isOpen) {
+                setIsDropdownOpen(false)
+              }
+            }>
             <DropdownLink
               icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}
               iconPosition="right"
diff --git a/packages/blade/src/components/Dropdown/types.ts b/packages/blade/src/components/Dropdown/types.ts
index 9305761bfa8..ad9b64c43f3 100644
--- a/packages/blade/src/components/Dropdown/types.ts
+++ b/packages/blade/src/components/Dropdown/types.ts
@@ -14,27 +14,6 @@ type DropdownProps = {
    */
   onOpenChange?: (isOpen: boolean) => void;
   selectionType?: 'single' | 'multiple';
-  /**
-   * ## Deprecated ⚠️
-   *
-   * Use `onOpenChange` instead for knowing when dropdown gets dismissed.
-   *
-   * ### Migration
-   * ```diff
-   * <Dropdown
-   * - onDismiss={() => console.log('dismissed')}
-   * + onOpenChange={(isOpen) => {
-   * +  if (!isOpen) {
-   * +    console.log('dismissed');
-   * +  }
-   * + }}
-   * />
-   *
-   * ```
-   *
-   * @deprecated
-   */
-  onDismiss?: () => void;
   children: React.ReactNode[];
 } & TestID &
   StyledPropsBlade;
diff --git a/packages/blade/src/components/Form/CharacterCounter/CharacterCounter.tsx b/packages/blade/src/components/Form/CharacterCounter/CharacterCounter.tsx
index 8e265087204..2bd4949e8d0 100644
--- a/packages/blade/src/components/Form/CharacterCounter/CharacterCounter.tsx
+++ b/packages/blade/src/components/Form/CharacterCounter/CharacterCounter.tsx
@@ -10,7 +10,7 @@ export const CharacterCounter = ({
   currentCount,
   maxCount,
 }: CharacterCounterProps): ReactElement => (
-  <Text variant="caption" weight="regular" type="muted">
+  <Text variant="caption" weight="regular" color="surface.text.gray.muted">
     {currentCount}/{maxCount}
   </Text>
 );
diff --git a/packages/blade/src/components/Form/FormHint.tsx b/packages/blade/src/components/Form/FormHint.tsx
index d6a4d5afd6d..64e12f7343c 100644
--- a/packages/blade/src/components/Form/FormHint.tsx
+++ b/packages/blade/src/components/Form/FormHint.tsx
@@ -2,37 +2,29 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import { FormHintWrapper } from './FormHintWrapper';
-import { BaseText } from '~components/Typography/BaseText';
+import type { TextProps } from '~components/Typography/Text';
+import { Text } from '~components/Typography/Text';
 import BaseBox from '~components/Box/BaseBox';
 import { CheckIcon, InfoIcon } from '~components/Icons';
-import type { BaseTextProps } from '~components/Typography/BaseText/types';
 import { getPlatformType } from '~utils/getPlatformType';
 
 type HintTextProps = {
   icon?: React.ElementType;
   children: string;
   id?: string;
-  color: BaseTextProps['color'];
+  color: TextProps<{ variant: 'caption' }>['color'];
 };
 
 const HintText = ({ icon: Icon, children, id, color }: HintTextProps): ReactElement => {
   const isReactNative = getPlatformType() === 'react-native';
 
   return (
-    <BaseBox marginTop="spacing.2">
+    <BaseBox marginTop="spacing.2" id={id}>
       <FormHintWrapper>
         {Icon ? <Icon /> : null}
-        <BaseText
-          id={id}
-          as={isReactNative ? undefined : 'span'}
-          color={color}
-          fontSize={50}
-          lineHeight={50}
-          fontStyle="italic"
-          fontFamily="text"
-        >
+        <Text as={isReactNative ? undefined : 'span'} color={color} size="small" variant="caption">
           {children}
-        </BaseText>
+        </Text>
       </FormHintWrapper>
     </BaseBox>
   );
@@ -76,13 +68,13 @@ export type FormHintProps = {
 const Icons = {
   error: (): ReactElement => (
     <>
-      <InfoIcon color="feedback.icon.negative.lowContrast" size="small" />
+      <InfoIcon color="feedback.icon.negative.intense" size="small" />
       <BaseBox marginRight="spacing.2" />
     </>
   ),
   success: (): ReactElement => (
     <>
-      <CheckIcon color="feedback.icon.positive.lowContrast" size="small" />
+      <CheckIcon color="feedback.icon.positive.intense" size="small" />
       <BaseBox marginRight="spacing.2" />
     </>
   ),
@@ -97,11 +89,11 @@ const FormHint = ({
   errorTextId,
   successTextId,
 }: FormHintProps): React.ReactElement => {
-  const colors = {
-    help: 'surface.text.muted.lowContrast',
-    error: 'feedback.text.negative.lowContrast',
-    success: 'feedback.text.positive.lowContrast',
-  } as const;
+  const colors: Record<string, TextProps<{ variant: 'caption' }>['color']> = {
+    help: 'surface.text.gray.muted',
+    error: 'feedback.text.negative.intense',
+    success: 'feedback.text.positive.intense',
+  };
 
   const showError = type === 'error' && errorText;
   const showSuccess = type === 'success' && successText;
diff --git a/packages/blade/src/components/Form/FormLabel.tsx b/packages/blade/src/components/Form/FormLabel.tsx
index 5ee91bbc7be..8adfe4e0aa1 100644
--- a/packages/blade/src/components/Form/FormLabel.tsx
+++ b/packages/blade/src/components/Form/FormLabel.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { VisuallyHidden } from '~components/VisuallyHidden';
 import { Text } from '~components/Typography';
-import { BaseText } from '~components/Typography/BaseText';
 import { getPlatformType, useBreakpoint } from '~utils';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import BaseBox from '~components/Box/BaseBox';
 import { useTheme } from '~components/BladeProvider';
-import type { ColorContrastTypes } from '~tokens/theme/theme';
 import { makeSpace } from '~utils/makeSpace';
 import { makeSize } from '~utils/makeSize';
 import { size } from '~tokens/global';
@@ -18,7 +16,6 @@ type CommonProps = {
   accessibilityText?: string;
   children: string | undefined;
   id?: string;
-  contrast?: ColorContrastTypes;
 };
 
 type LabelProps = CommonProps & {
@@ -56,7 +53,6 @@ const FormLabel = ({
   children,
   id,
   htmlFor,
-  contrast = 'low',
 }: FormLabelProps): React.ReactElement => {
   const { theme } = useTheme();
   const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });
@@ -69,23 +65,20 @@ const FormLabel = ({
 
   if (necessityIndicator === 'optional') {
     necessityLabel = (
-      <Text variant="caption" weight="regular" type="placeholder">
+      <Text variant="caption" size="small" color="surface.text.gray.muted">
         (optional)
       </Text>
     );
   }
   if (necessityIndicator === 'required') {
     necessityLabel = (
-      <BaseText
-        lineHeight={100}
-        fontFamily="text"
-        fontStyle="normal"
-        fontSize={75}
-        fontWeight="bold"
-        color="feedback.text.negative.lowContrast"
+      <Text
+        variant="body"
+        size={isLabelLeftPositioned ? 'medium' : 'small'}
+        color="feedback.text.negative.intense"
       >
         *
-      </BaseText>
+      </Text>
     );
   }
 
@@ -106,12 +99,11 @@ const FormLabel = ({
       maxHeight={makeSpace(size[36])}
     >
       <Text
-        type="subdued"
         variant="body"
-        contrast={contrast}
         size={isLabelLeftPositioned ? 'medium' : 'small'}
+        color="surface.text.gray.subtle"
         truncateAfterLines={2}
-        weight="bold"
+        weight="semibold"
         wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}
       >
         {children}
diff --git a/packages/blade/src/components/Form/Selector/SelectorInput.web.tsx b/packages/blade/src/components/Form/Selector/SelectorInput.web.tsx
index b55ffa0e582..cce296e8a9a 100644
--- a/packages/blade/src/components/Form/Selector/SelectorInput.web.tsx
+++ b/packages/blade/src/components/Form/Selector/SelectorInput.web.tsx
@@ -13,6 +13,7 @@ import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { makeMotionTime } from '~utils/makeMotionTime';
 import { makeAccessible } from '~utils/makeAccessible';
 import { useMergeRefs } from '~utils/useMergeRefs';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 
 const getHoverStyles = ({
   theme,
@@ -39,9 +40,7 @@ const StyledInput = styled.input<HoverProps>(
   ({ theme, isChecked, isDisabled, hasError, hoverTokens }) => ({
     ...screenReaderStyles,
     '&:focus-visible + div': {
-      // TODO: Replace with focus outline token
-      outline: `1px solid ${theme.colors.surface.background.level1.lowContrast}`,
-      boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,
+      ...getFocusRingStyles({ theme }),
     },
     '&:hover + div': {
       ...getHoverStyles({ theme, isChecked, isDisabled, hasError, hoverTokens }),
diff --git a/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx b/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx
index 05fc41e1a16..f83fb44b337 100644
--- a/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx
+++ b/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx
@@ -1,27 +1,29 @@
-import { BaseText } from '~components/Typography/BaseText';
-import { getPlatformType } from '~utils';
+import { Box } from '~components/Box';
+import { Text } from '~components/Typography/Text';
+import { castWebType, getPlatformType } from '~utils';
 
 const SelectorSupportText = ({
   children,
   id,
+  isNegative,
 }: {
   children: React.ReactNode;
   id?: string;
+  isNegative?: boolean;
 }): React.ReactElement => {
   const isReactNative = getPlatformType() === 'react-native';
 
   return (
-    <BaseText
-      id={id}
-      as={isReactNative ? undefined : 'span'}
-      color="surface.text.muted.lowContrast"
-      fontSize={50}
-      lineHeight={50}
-      fontStyle="italic"
-      fontFamily="text"
-    >
-      {children}
-    </BaseText>
+    <Box id={id} display={isReactNative ? undefined : castWebType('contents')}>
+      <Text
+        variant="caption"
+        size="small"
+        as={isReactNative ? undefined : 'span'}
+        color={isNegative ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'}
+      >
+        {children}
+      </Text>
+    </Box>
   );
 };
 
diff --git a/packages/blade/src/components/Form/Selector/SelectorTitle.tsx b/packages/blade/src/components/Form/Selector/SelectorTitle.tsx
index cf6a776ef22..b06cf55c6c9 100644
--- a/packages/blade/src/components/Form/Selector/SelectorTitle.tsx
+++ b/packages/blade/src/components/Form/Selector/SelectorTitle.tsx
@@ -1,5 +1,5 @@
 import BaseBox from '~components/Box/BaseBox';
-import { BaseText } from '~components/Typography/BaseText';
+import { Text } from '~components/Typography/Text';
 
 const SelectorTitle = ({
   children,
@@ -10,29 +10,15 @@ const SelectorTitle = ({
   isDisabled?: boolean;
   size: 'small' | 'medium';
 }): React.ReactElement => {
-  const lineHeight = {
-    small: 50,
-    medium: 100,
-  } as const;
-  const fontSize = {
-    small: 75,
-    medium: 100,
-  } as const;
-
   return (
     <>
       <BaseBox marginLeft="spacing.2" />
-      <BaseText
-        lineHeight={lineHeight[size]}
-        fontFamily="text"
-        fontWeight="regular"
-        fontSize={fontSize[size]}
-        color={
-          isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast'
-        }
+      <Text
+        size={size}
+        color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}
       >
         {children}
-      </BaseText>
+      </Text>
     </>
   );
 };
diff --git a/packages/blade/src/components/Form/Selector/types.ts b/packages/blade/src/components/Form/Selector/types.ts
index 83843176fb6..6f82e8bd2ae 100644
--- a/packages/blade/src/components/Form/Selector/types.ts
+++ b/packages/blade/src/components/Form/Selector/types.ts
@@ -1,6 +1,7 @@
 import type React from 'react';
-import type { DotNotationColorStringToken, TestID } from '~utils/types';
+import type { TestID } from '~utils/types';
 import type { Theme } from '~components/BladeProvider';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 type SelectorLabelProps = {
@@ -29,7 +30,7 @@ type SelectorInputProps = HoverProps & {
   accessibilityLabel?: string;
 };
 
-type ColorTokens = `colors.${DotNotationColorStringToken<Theme['colors']>}` | 'transparent';
+type ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;
 type SelectorInputHoverTokens = {
   default: {
     background: {
diff --git a/packages/blade/src/components/Icons/ActivityIcon/ActivityIcon.native.test.tsx b/packages/blade/src/components/Icons/ActivityIcon/ActivityIcon.native.test.tsx
index d8d081a69b0..17d6b1d9330 100644
--- a/packages/blade/src/components/Icons/ActivityIcon/ActivityIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ActivityIcon/ActivityIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ActivityIcon />', () => {
   it('should render ActivityIcon', () => {
     const renderTree = renderWithTheme(
-      <ActivityIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ActivityIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ActivityIcon/ActivityIcon.web.test.tsx b/packages/blade/src/components/Icons/ActivityIcon/ActivityIcon.web.test.tsx
index 3f853ff3f20..5afafc72584 100644
--- a/packages/blade/src/components/Icons/ActivityIcon/ActivityIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ActivityIcon/ActivityIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ActivityIcon />', () => {
   it('should render ActivityIcon', () => {
     const { container } = renderWithTheme(
-      <ActivityIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ActivityIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.native.test.tsx.snap
index d869e926903..7bd50bc779b 100644
--- a/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ActivityIcon /> should render ActivityIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 1C9.43043 1 9.81257 1.27543 9.94868 1.68377L15 16.8377L17.0513 10.6838C17.1874 10.2754 17.5696 10 18 10H22C22.5523 10 23 10.4477 23 11C23 11.5523 22.5523 12 22 12H18.7208L15.9487 20.3162C15.8126 20.7246 15.4304 21 15 21C14.5696 21 14.1874 20.7246 14.0513 20.3162L9 5.16228L6.94868 11.3162C6.81257 11.7246 6.43043 12 6 12H2C1.44772 12 1 11.5523 1 11C1 10.4477 1.44772 10 2 10H5.27924L8.05132 1.68377C8.18743 1.27543 8.56957 1 9 1Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.web.test.tsx.snap
index 24edf721b6b..20f7415927b 100644
--- a/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ActivityIcon /> should render ActivityIcon 1`] = `
       clip-rule="evenodd"
       d="M9 1C9.43043 1 9.81257 1.27543 9.94868 1.68377L15 16.8377L17.0513 10.6838C17.1874 10.2754 17.5696 10 18 10H22C22.5523 10 23 10.4477 23 11C23 11.5523 22.5523 12 22 12H18.7208L15.9487 20.3162C15.8126 20.7246 15.4304 21 15 21C14.5696 21 14.1874 20.7246 14.0513 20.3162L9 5.16228L6.94868 11.3162C6.81257 11.7246 6.43043 12 6 12H2C1.44772 12 1 11.5523 1 11C1 10.4477 1.44772 10 2 10H5.27924L8.05132 1.68377C8.18743 1.27543 8.56957 1 9 1Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AirplayIcon/AirplayIcon.native.test.tsx b/packages/blade/src/components/Icons/AirplayIcon/AirplayIcon.native.test.tsx
index a5042d32908..cf89f7daec4 100644
--- a/packages/blade/src/components/Icons/AirplayIcon/AirplayIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AirplayIcon/AirplayIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AirplayIcon />', () => {
   it('should render AirplayIcon', () => {
     const renderTree = renderWithTheme(
-      <AirplayIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AirplayIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AirplayIcon/AirplayIcon.web.test.tsx b/packages/blade/src/components/Icons/AirplayIcon/AirplayIcon.web.test.tsx
index 33cb87cd8ef..e376c0acce9 100644
--- a/packages/blade/src/components/Icons/AirplayIcon/AirplayIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AirplayIcon/AirplayIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AirplayIcon />', () => {
   it('should render AirplayIcon', () => {
     const { container } = renderWithTheme(
-      <AirplayIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AirplayIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.native.test.tsx.snap
index 5f5e5bf5156..fdfc708fcfa 100644
--- a/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<AirplayIcon /> should render AirplayIcon 1`] = `
     >
       <RNSVGPath
         d="M3 4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V14C21 14.5523 20.5523 15 20 15H19C18.4477 15 18 15.4477 18 16C18 16.5523 18.4477 17 19 17H20C21.6569 17 23 15.6569 23 14V4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V14C1 15.6569 2.34315 17 4 17H5C5.55228 17 6 16.5523 6 16C6 15.4477 5.55228 15 5 15H4C3.44772 15 3 14.5523 3 14V4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<AirplayIcon /> should render AirplayIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12.7682 13.3598C12.5782 13.1318 12.2968 13 12 13C11.7032 13 11.4218 13.1318 11.2318 13.3598L6.23179 19.3598C5.98339 19.6579 5.92984 20.0728 6.09442 20.4242C6.259 20.7755 6.61199 21 7.00001 21H17C17.388 21 17.741 20.7755 17.9056 20.4242C18.0702 20.0728 18.0166 19.6579 17.7682 19.3598L12.7682 13.3598ZM12 15.562L14.865 19H9.13505L12 15.562Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.web.test.tsx.snap
index 4d7f9b32e06..18411277883 100644
--- a/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<AirplayIcon /> should render AirplayIcon 1`] = `
     <path
       d="M3 4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V14C21 14.5523 20.5523 15 20 15H19C18.4477 15 18 15.4477 18 16C18 16.5523 18.4477 17 19 17H20C21.6569 17 23 15.6569 23 14V4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V14C1 15.6569 2.34315 17 4 17H5C5.55228 17 6 16.5523 6 16C6 15.4477 5.55228 15 5 15H4C3.44772 15 3 14.5523 3 14V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M12.7682 13.3598C12.5782 13.1318 12.2968 13 12 13C11.7032 13 11.4218 13.1318 11.2318 13.3598L6.23179 19.3598C5.98339 19.6579 5.92984 20.0728 6.09442 20.4242C6.259 20.7755 6.61199 21 7.00001 21H17C17.388 21 17.741 20.7755 17.9056 20.4242C18.0702 20.0728 18.0166 19.6579 17.7682 19.3598L12.7682 13.3598ZM12 15.562L14.865 19H9.13505L12 15.562Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AlertCircleIcon/AlertCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/AlertCircleIcon/AlertCircleIcon.native.test.tsx
index da3f81fa5dd..ed3d54a33ef 100644
--- a/packages/blade/src/components/Icons/AlertCircleIcon/AlertCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AlertCircleIcon/AlertCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AlertCircleIcon />', () => {
   it('should render AlertCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <AlertCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlertCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlertCircleIcon/AlertCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/AlertCircleIcon/AlertCircleIcon.web.test.tsx
index 0da7fe59195..8935711d8a3 100644
--- a/packages/blade/src/components/Icons/AlertCircleIcon/AlertCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AlertCircleIcon/AlertCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AlertCircleIcon />', () => {
   it('should render AlertCircleIcon', () => {
     const { container } = renderWithTheme(
-      <AlertCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlertCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.native.test.tsx.snap
index adb9671a3a1..03cb4ac6030 100644
--- a/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
     >
       <RNSVGPath
         d="M12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
       />
       <RNSVGPath
         d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -70,7 +70,7 @@ exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.web.test.tsx.snap
index a5ead618251..985d3cbd4b4 100644
--- a/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.web.test.tsx.snap
@@ -14,18 +14,18 @@ exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
     <path
       d="M12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AlertOctagonIcon/AlertOctagonIcon.native.test.tsx b/packages/blade/src/components/Icons/AlertOctagonIcon/AlertOctagonIcon.native.test.tsx
index fad7b3ac369..f2aae2e9e43 100644
--- a/packages/blade/src/components/Icons/AlertOctagonIcon/AlertOctagonIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AlertOctagonIcon/AlertOctagonIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AlertOctagonIcon />', () => {
   it('should render AlertOctagonIcon', () => {
     const renderTree = renderWithTheme(
-      <AlertOctagonIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlertOctagonIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlertOctagonIcon/AlertOctagonIcon.web.test.tsx b/packages/blade/src/components/Icons/AlertOctagonIcon/AlertOctagonIcon.web.test.tsx
index e6509170574..e60a00c1380 100644
--- a/packages/blade/src/components/Icons/AlertOctagonIcon/AlertOctagonIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AlertOctagonIcon/AlertOctagonIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AlertOctagonIcon />', () => {
   it('should render AlertOctagonIcon', () => {
     const { container } = renderWithTheme(
-      <AlertOctagonIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlertOctagonIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.native.test.tsx.snap
index 780ae8fbdf3..0f4549d8c65 100644
--- a/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
     >
       <RNSVGPath
         d="M12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
       />
       <RNSVGPath
         d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -70,7 +70,7 @@ exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7.15289 1.29289C7.33386 1.11193 7.58386 1 7.86 1H16.14C16.4052 1 16.6596 1.10536 16.8471 1.29289L22.7071 7.15289C22.8946 7.34043 23 7.59478 23 7.86V16.14C23 16.4052 22.8946 16.6596 22.7071 16.8471L16.8471 22.7071C16.6596 22.8946 16.4052 23 16.14 23H7.86C7.59478 23 7.34043 22.8946 7.15289 22.7071L1.29289 16.8471C1.10536 16.6596 1 16.4052 1 16.14V7.86C1 7.59478 1.10536 7.34043 1.29289 7.15289L7.15289 1.29289ZM8.27421 3L3 8.27421V15.7258L8.27421 21H15.7258L21 15.7258V8.27421L15.7258 3H8.27421Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.web.test.tsx.snap
index 17b934c3468..979ad55db1e 100644
--- a/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.web.test.tsx.snap
@@ -14,18 +14,18 @@ exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
     <path
       d="M12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M7.15289 1.29289C7.33386 1.11193 7.58386 1 7.86 1H16.14C16.4052 1 16.6596 1.10536 16.8471 1.29289L22.7071 7.15289C22.8946 7.34043 23 7.59478 23 7.86V16.14C23 16.4052 22.8946 16.6596 22.7071 16.8471L16.8471 22.7071C16.6596 22.8946 16.4052 23 16.14 23H7.86C7.59478 23 7.34043 22.8946 7.15289 22.7071L1.29289 16.8471C1.10536 16.6596 1 16.4052 1 16.14V7.86C1 7.59478 1.10536 7.34043 1.29289 7.15289L7.15289 1.29289ZM8.27421 3L3 8.27421V15.7258L8.27421 21H15.7258L21 15.7258V8.27421L15.7258 3H8.27421Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AlertOnlyIcon/AlertOnlyIcon.native.test.tsx b/packages/blade/src/components/Icons/AlertOnlyIcon/AlertOnlyIcon.native.test.tsx
index 0c54a591a83..3afc70d1f69 100644
--- a/packages/blade/src/components/Icons/AlertOnlyIcon/AlertOnlyIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AlertOnlyIcon/AlertOnlyIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AlertOnlyIcon />', () => {
   it('should render AlertOnlyIcon', () => {
     const renderTree = renderWithTheme(
-      <AlertOnlyIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlertOnlyIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlertOnlyIcon/AlertOnlyIcon.web.test.tsx b/packages/blade/src/components/Icons/AlertOnlyIcon/AlertOnlyIcon.web.test.tsx
index 5274fb92903..38eb17cf99c 100644
--- a/packages/blade/src/components/Icons/AlertOnlyIcon/AlertOnlyIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AlertOnlyIcon/AlertOnlyIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AlertOnlyIcon />', () => {
   it('should render AlertOnlyIcon', () => {
     const { container } = renderWithTheme(
-      <AlertOnlyIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlertOnlyIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.native.test.tsx.snap
index 64ba5f704b4..b0d89e726bf 100644
--- a/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<AlertOnlyIcon /> should render AlertOnlyIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5V14C11 14.5523 11.4477 15 12 15C12.5523 15 13 14.5523 13 14V5ZM12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.web.test.tsx.snap
index 8eafb55f607..6bdb37d98ee 100644
--- a/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<AlertOnlyIcon /> should render AlertOnlyIcon 1`] = `
       clip-rule="evenodd"
       d="M13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5V14C11 14.5523 11.4477 15 12 15C12.5523 15 13 14.5523 13 14V5ZM12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AlertTriangleIcon/AlertTriangleIcon.native.test.tsx b/packages/blade/src/components/Icons/AlertTriangleIcon/AlertTriangleIcon.native.test.tsx
index 4c130d08bb8..50941daf129 100644
--- a/packages/blade/src/components/Icons/AlertTriangleIcon/AlertTriangleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AlertTriangleIcon/AlertTriangleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AlertTriangleIcon />', () => {
   it('should render AlertTriangleIcon', () => {
     const renderTree = renderWithTheme(
-      <AlertTriangleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlertTriangleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlertTriangleIcon/AlertTriangleIcon.web.test.tsx b/packages/blade/src/components/Icons/AlertTriangleIcon/AlertTriangleIcon.web.test.tsx
index ab69333944d..d5004688894 100644
--- a/packages/blade/src/components/Icons/AlertTriangleIcon/AlertTriangleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AlertTriangleIcon/AlertTriangleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AlertTriangleIcon />', () => {
   it('should render AlertTriangleIcon', () => {
     const { container } = renderWithTheme(
-      <AlertTriangleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlertTriangleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.native.test.tsx.snap
index addd1361f5e..4e0c3e4711e 100644
--- a/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
     >
       <RNSVGPath
         d="M12 8.10275C12.5523 8.10275 13 8.55047 13 9.10275V13.1028C13 13.655 12.5523 14.1028 12 14.1028C11.4477 14.1028 11 13.655 11 13.1028V9.10275C11 8.55047 11.4477 8.10275 12 8.10275Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
       />
       <RNSVGPath
         d="M12 18.1028C12.5523 18.1028 13 17.655 13 17.1028C13 16.5505 12.5523 16.1028 12 16.1028C11.4477 16.1028 11 16.5505 11 17.1028C11 17.655 11.4477 18.1028 12 18.1028Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -70,7 +70,7 @@ exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9.43502 3.44412C9.97887 2.54754 10.9514 2 12 2C13.0486 2 14.0212 2.54754 14.565 3.44412L14.5679 3.44886L23.0379 17.5889L23.046 17.6027C23.5791 18.5258 23.5822 19.6624 23.0544 20.5885C22.5265 21.5145 21.5469 22.091 20.481 22.1027L20.47 22.1028L3.51903 22.1027C2.45315 22.091 1.47353 21.5145 0.94567 20.5885C0.41781 19.6624 0.420993 18.5258 0.95403 17.6027L0.962153 17.5889L9.43502 3.44412ZM11.1462 4.47938L2.6827 18.6086C2.50833 18.9152 2.50837 19.2913 2.68322 19.5981C2.85842 19.9054 3.1829 20.0972 3.53642 20.1027H20.4636C20.8171 20.0972 21.1416 19.9054 21.3168 19.5981C21.4917 19.2913 21.4917 18.9153 21.3174 18.6086L12.855 4.48137L12.8538 4.47938C12.6723 4.1817 12.3488 4 12 4C11.6513 4 11.3277 4.1817 11.1462 4.47938Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.web.test.tsx.snap
index b49b6a4a669..5f2f3f05373 100644
--- a/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.web.test.tsx.snap
@@ -14,18 +14,18 @@ exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
     <path
       d="M12 8.10275C12.5523 8.10275 13 8.55047 13 9.10275V13.1028C13 13.655 12.5523 14.1028 12 14.1028C11.4477 14.1028 11 13.655 11 13.1028V9.10275C11 8.55047 11.4477 8.10275 12 8.10275Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M12 18.1028C12.5523 18.1028 13 17.655 13 17.1028C13 16.5505 12.5523 16.1028 12 16.1028C11.4477 16.1028 11 16.5505 11 17.1028C11 17.655 11.4477 18.1028 12 18.1028Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M9.43502 3.44412C9.97887 2.54754 10.9514 2 12 2C13.0486 2 14.0212 2.54754 14.565 3.44412L14.5679 3.44886L23.0379 17.5889L23.046 17.6027C23.5791 18.5258 23.5822 19.6624 23.0544 20.5885C22.5265 21.5145 21.5469 22.091 20.481 22.1027L20.47 22.1028L3.51903 22.1027C2.45315 22.091 1.47353 21.5145 0.94567 20.5885C0.41781 19.6624 0.420993 18.5258 0.95403 17.6027L0.962153 17.5889L9.43502 3.44412ZM11.1462 4.47938L2.6827 18.6086C2.50833 18.9152 2.50837 19.2913 2.68322 19.5981C2.85842 19.9054 3.1829 20.0972 3.53642 20.1027H20.4636C20.8171 20.0972 21.1416 19.9054 21.3168 19.5981C21.4917 19.2913 21.4917 18.9153 21.3174 18.6086L12.855 4.48137L12.8538 4.47938C12.6723 4.1817 12.3488 4 12 4C11.6513 4 11.3277 4.1817 11.1462 4.47938Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AlignCenterIcon/AlignCenterIcon.native.test.tsx b/packages/blade/src/components/Icons/AlignCenterIcon/AlignCenterIcon.native.test.tsx
index 26bd69f9489..126f8082e85 100644
--- a/packages/blade/src/components/Icons/AlignCenterIcon/AlignCenterIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AlignCenterIcon/AlignCenterIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AlignCenterIcon />', () => {
   it('should render AlignCenterIcon', () => {
     const renderTree = renderWithTheme(
-      <AlignCenterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlignCenterIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlignCenterIcon/AlignCenterIcon.web.test.tsx b/packages/blade/src/components/Icons/AlignCenterIcon/AlignCenterIcon.web.test.tsx
index 1aafa583251..177a83ee980 100644
--- a/packages/blade/src/components/Icons/AlignCenterIcon/AlignCenterIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AlignCenterIcon/AlignCenterIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AlignCenterIcon />', () => {
   it('should render AlignCenterIcon', () => {
     const { container } = renderWithTheme(
-      <AlignCenterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlignCenterIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.native.test.tsx.snap
index 71c1f3e4af4..f86911b752d 100644
--- a/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
     >
       <RNSVGPath
         d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
       />
       <RNSVGPath
         d="M6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11H18C18.5523 11 19 10.5523 19 10C19 9.44772 18.5523 9 18 9H6Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
       />
       <RNSVGPath
         d="M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -78,7 +78,7 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
       />
       <RNSVGPath
         d="M6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17H6Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.web.test.tsx.snap
index e550e302b4b..a85ed157a8e 100644
--- a/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.web.test.tsx.snap
@@ -14,22 +14,22 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
     <path
       d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11H18C18.5523 11 19 10.5523 19 10C19 9.44772 18.5523 9 18 9H6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17H6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/AlignJustifyIcon/AlignJustifyIcon.native.test.tsx b/packages/blade/src/components/Icons/AlignJustifyIcon/AlignJustifyIcon.native.test.tsx
index e81bc764a6a..145d4e18a69 100644
--- a/packages/blade/src/components/Icons/AlignJustifyIcon/AlignJustifyIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AlignJustifyIcon/AlignJustifyIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AlignJustifyIcon />', () => {
   it('should render AlignJustifyIcon', () => {
     const renderTree = renderWithTheme(
-      <AlignJustifyIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlignJustifyIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlignJustifyIcon/AlignJustifyIcon.web.test.tsx b/packages/blade/src/components/Icons/AlignJustifyIcon/AlignJustifyIcon.web.test.tsx
index 08433136649..f29fe48ea4e 100644
--- a/packages/blade/src/components/Icons/AlignJustifyIcon/AlignJustifyIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AlignJustifyIcon/AlignJustifyIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AlignJustifyIcon />', () => {
   it('should render AlignJustifyIcon', () => {
     const { container } = renderWithTheme(
-      <AlignJustifyIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlignJustifyIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.native.test.tsx.snap
index 8a2bfe7678f..f171069faf3 100644
--- a/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<AlignJustifyIcon /> should render AlignJustifyIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3ZM3 9C2.44772 9 2 9.44772 2 10C2 10.5523 2.44772 11 3 11H21C21.5523 11 22 10.5523 22 10C22 9.44772 21.5523 9 21 9H3ZM2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14ZM3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H21C21.5523 19 22 18.5523 22 18C22 17.4477 21.5523 17 21 17H3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.web.test.tsx.snap
index 6f46c1204bd..14fdd8be021 100644
--- a/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<AlignJustifyIcon /> should render AlignJustifyIcon 1`] = `
       clip-rule="evenodd"
       d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3ZM3 9C2.44772 9 2 9.44772 2 10C2 10.5523 2.44772 11 3 11H21C21.5523 11 22 10.5523 22 10C22 9.44772 21.5523 9 21 9H3ZM2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14ZM3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H21C21.5523 19 22 18.5523 22 18C22 17.4477 21.5523 17 21 17H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AlignLeftIcon/AlignLeftIcon.native.test.tsx b/packages/blade/src/components/Icons/AlignLeftIcon/AlignLeftIcon.native.test.tsx
index a5cc86115ab..e6e25e38697 100644
--- a/packages/blade/src/components/Icons/AlignLeftIcon/AlignLeftIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AlignLeftIcon/AlignLeftIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AlignLeftIcon />', () => {
   it('should render AlignLeftIcon', () => {
     const renderTree = renderWithTheme(
-      <AlignLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlignLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlignLeftIcon/AlignLeftIcon.web.test.tsx b/packages/blade/src/components/Icons/AlignLeftIcon/AlignLeftIcon.web.test.tsx
index 43f96569f9a..8b4008e2303 100644
--- a/packages/blade/src/components/Icons/AlignLeftIcon/AlignLeftIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AlignLeftIcon/AlignLeftIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AlignLeftIcon />', () => {
   it('should render AlignLeftIcon', () => {
     const { container } = renderWithTheme(
-      <AlignLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlignLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.native.test.tsx.snap
index 553741c31a9..f16cb52d9a6 100644
--- a/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
     >
       <RNSVGPath
         d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
       />
       <RNSVGPath
         d="M3 9C2.44772 9 2 9.44772 2 10C2 10.5523 2.44772 11 3 11H17C17.5523 11 18 10.5523 18 10C18 9.44772 17.5523 9 17 9H3Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
       />
       <RNSVGPath
         d="M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -78,7 +78,7 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
       />
       <RNSVGPath
         d="M3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H17C17.5523 19 18 18.5523 18 18C18 17.4477 17.5523 17 17 17H3Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.web.test.tsx.snap
index ca6b9f20b30..f13dc8e1584 100644
--- a/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.web.test.tsx.snap
@@ -14,22 +14,22 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
     <path
       d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M3 9C2.44772 9 2 9.44772 2 10C2 10.5523 2.44772 11 3 11H17C17.5523 11 18 10.5523 18 10C18 9.44772 17.5523 9 17 9H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H17C17.5523 19 18 18.5523 18 18C18 17.4477 17.5523 17 17 17H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/AlignRightIcon/AlignRightIcon.native.test.tsx b/packages/blade/src/components/Icons/AlignRightIcon/AlignRightIcon.native.test.tsx
index e3a3a06153a..87a3b0fc5c1 100644
--- a/packages/blade/src/components/Icons/AlignRightIcon/AlignRightIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AlignRightIcon/AlignRightIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AlignRightIcon />', () => {
   it('should render AlignRightIcon', () => {
     const renderTree = renderWithTheme(
-      <AlignRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlignRightIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlignRightIcon/AlignRightIcon.web.test.tsx b/packages/blade/src/components/Icons/AlignRightIcon/AlignRightIcon.web.test.tsx
index c0b66db6d69..802cadfc139 100644
--- a/packages/blade/src/components/Icons/AlignRightIcon/AlignRightIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AlignRightIcon/AlignRightIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AlignRightIcon />', () => {
   it('should render AlignRightIcon', () => {
     const { container } = renderWithTheme(
-      <AlignRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AlignRightIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.native.test.tsx.snap
index 520737a0469..8857b151a0d 100644
--- a/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
     >
       <RNSVGPath
         d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
       />
       <RNSVGPath
         d="M7 9C6.44772 9 6 9.44772 6 10C6 10.5523 6.44772 11 7 11H21C21.5523 11 22 10.5523 22 10C22 9.44772 21.5523 9 21 9H7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
       />
       <RNSVGPath
         d="M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -78,7 +78,7 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
       />
       <RNSVGPath
         d="M7 17C6.44772 17 6 17.4477 6 18C6 18.5523 6.44772 19 7 19H21C21.5523 19 22 18.5523 22 18C22 17.4477 21.5523 17 21 17H7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.web.test.tsx.snap
index c47af0c3bb6..97e777df232 100644
--- a/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.web.test.tsx.snap
@@ -14,22 +14,22 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
     <path
       d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M7 9C6.44772 9 6 9.44772 6 10C6 10.5523 6.44772 11 7 11H21C21.5523 11 22 10.5523 22 10C22 9.44772 21.5523 9 21 9H7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M7 17C6.44772 17 6 17.4477 6 18C6 18.5523 6.44772 19 7 19H21C21.5523 19 22 18.5523 22 18C22 17.4477 21.5523 17 21 17H7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/AnchorIcon/AnchorIcon.native.test.tsx b/packages/blade/src/components/Icons/AnchorIcon/AnchorIcon.native.test.tsx
index d8f49d70b69..464eb94fdec 100644
--- a/packages/blade/src/components/Icons/AnchorIcon/AnchorIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AnchorIcon/AnchorIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AnchorIcon />', () => {
   it('should render AnchorIcon', () => {
     const renderTree = renderWithTheme(
-      <AnchorIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AnchorIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AnchorIcon/AnchorIcon.web.test.tsx b/packages/blade/src/components/Icons/AnchorIcon/AnchorIcon.web.test.tsx
index 0975ebc0999..a2b0adaa36b 100644
--- a/packages/blade/src/components/Icons/AnchorIcon/AnchorIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AnchorIcon/AnchorIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AnchorIcon />', () => {
   it('should render AnchorIcon', () => {
     const { container } = renderWithTheme(
-      <AnchorIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AnchorIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.native.test.tsx.snap
index 765c1f7a4a4..d1f170b6240 100644
--- a/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<AnchorIcon /> should render AnchorIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 5C8 2.79086 9.79086 1 12 1C14.2091 1 16 2.79086 16 5C16 6.86384 14.7252 8.42994 13 8.87398V20.9451C17.1716 20.4839 20.4839 17.1716 20.9451 13H19C18.4477 13 18 12.5523 18 12C18 11.4477 18.4477 11 19 11H22C22.5523 11 23 11.4477 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 11.7348 1.10536 11.4804 1.29289 11.2929C1.48043 11.1054 1.73478 11 2 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H3.05493C3.51608 17.1716 6.82838 20.4839 11 20.9451V8.87398C9.27477 8.42994 8 6.86384 8 5ZM14 5C14 6.10457 13.1046 7 12 7C10.8954 7 10 6.10457 10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.web.test.tsx.snap
index a50ebb573fc..7cc2f65387e 100644
--- a/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<AnchorIcon /> should render AnchorIcon 1`] = `
       clip-rule="evenodd"
       d="M8 5C8 2.79086 9.79086 1 12 1C14.2091 1 16 2.79086 16 5C16 6.86384 14.7252 8.42994 13 8.87398V20.9451C17.1716 20.4839 20.4839 17.1716 20.9451 13H19C18.4477 13 18 12.5523 18 12C18 11.4477 18.4477 11 19 11H22C22.5523 11 23 11.4477 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 11.7348 1.10536 11.4804 1.29289 11.2929C1.48043 11.1054 1.73478 11 2 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H3.05493C3.51608 17.1716 6.82838 20.4839 11 20.9451V8.87398C9.27477 8.42994 8 6.86384 8 5ZM14 5C14 6.10457 13.1046 7 12 7C10.8954 7 10 6.10457 10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AnnouncementIcon/AnnouncementIcon.native.test.tsx b/packages/blade/src/components/Icons/AnnouncementIcon/AnnouncementIcon.native.test.tsx
index 1dee65b821f..506cd5f8174 100644
--- a/packages/blade/src/components/Icons/AnnouncementIcon/AnnouncementIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AnnouncementIcon/AnnouncementIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AnnouncementIcon />', () => {
   it('should render AnnouncementIcon', () => {
     const renderTree = renderWithTheme(
-      <AnnouncementIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AnnouncementIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AnnouncementIcon/AnnouncementIcon.web.test.tsx b/packages/blade/src/components/Icons/AnnouncementIcon/AnnouncementIcon.web.test.tsx
index b17beed856f..aa886cf06f5 100644
--- a/packages/blade/src/components/Icons/AnnouncementIcon/AnnouncementIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AnnouncementIcon/AnnouncementIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AnnouncementIcon />', () => {
   it('should render AnnouncementIcon', () => {
     const { container } = renderWithTheme(
-      <AnnouncementIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AnnouncementIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.native.test.tsx.snap
index cac24a32e00..451cd114bf1 100644
--- a/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<AnnouncementIcon /> should render AnnouncementIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9.74698 0.0226661C10.208 -0.0654516 10.68 0.107305 10.9752 0.472159L22.1817 14.3225C22.4769 14.6874 22.5474 15.1851 22.365 15.6176C22.1826 16.05 21.777 16.3469 21.3097 16.3902L12.1719 17.2357C11.7483 17.2749 11.333 17.0998 11.0654 16.769L6.26258 10.8331C5.99494 10.5023 5.91033 10.0597 6.0371 9.65352L8.77111 0.893484C8.91094 0.445471 9.286 0.110784 9.74698 0.0226661ZM8.6696 9.76166L12.6156 14.6386L18.7074 14.0749L10.4923 3.92164L8.6696 9.76166ZM4.0217 15.1445C3.6995 15.522 3.52687 16.0105 3.54673 16.5153L3.55216 16.6535C3.58568 17.5056 4.20675 18.22 5.04593 18.3718C5.51918 18.4574 6.00497 18.3518 6.39838 18.0819L4.0217 15.1445ZM1.00351 16.6153C0.947233 15.1845 1.5698 13.8111 2.68297 12.9105L3.38894 12.3392C3.93532 11.8972 4.73663 11.9817 5.17871 12.5281L9.18104 17.4747C9.62312 18.021 9.53857 18.8224 8.99219 19.2644L8.11452 19.9746C7.12772 20.773 5.84217 21.1022 4.59306 20.8764C2.57956 20.5123 1.08937 18.7981 1.00895 16.7535L1.00351 16.6153ZM11.9835 20.9374C11.5414 20.391 10.7401 20.3065 10.1937 20.7486C9.6473 21.1906 9.56275 21.992 10.0048 22.5383L10.8053 23.5276C11.2474 24.074 12.0487 24.1586 12.5951 23.7165C13.1415 23.2744 13.226 22.4731 12.7839 21.9267L11.9835 20.9374Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.web.test.tsx.snap
index 221fc072ef7..804c7dfe1eb 100644
--- a/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<AnnouncementIcon /> should render AnnouncementIcon 1`] = `
       clip-rule="evenodd"
       d="M9.74698 0.0226661C10.208 -0.0654516 10.68 0.107305 10.9752 0.472159L22.1817 14.3225C22.4769 14.6874 22.5474 15.1851 22.365 15.6176C22.1826 16.05 21.777 16.3469 21.3097 16.3902L12.1719 17.2357C11.7483 17.2749 11.333 17.0998 11.0654 16.769L6.26258 10.8331C5.99494 10.5023 5.91033 10.0597 6.0371 9.65352L8.77111 0.893484C8.91094 0.445471 9.286 0.110784 9.74698 0.0226661ZM8.6696 9.76166L12.6156 14.6386L18.7074 14.0749L10.4923 3.92164L8.6696 9.76166ZM4.0217 15.1445C3.6995 15.522 3.52687 16.0105 3.54673 16.5153L3.55216 16.6535C3.58568 17.5056 4.20675 18.22 5.04593 18.3718C5.51918 18.4574 6.00497 18.3518 6.39838 18.0819L4.0217 15.1445ZM1.00351 16.6153C0.947233 15.1845 1.5698 13.8111 2.68297 12.9105L3.38894 12.3392C3.93532 11.8972 4.73663 11.9817 5.17871 12.5281L9.18104 17.4747C9.62312 18.021 9.53857 18.8224 8.99219 19.2644L8.11452 19.9746C7.12772 20.773 5.84217 21.1022 4.59306 20.8764C2.57956 20.5123 1.08937 18.7981 1.00895 16.7535L1.00351 16.6153ZM11.9835 20.9374C11.5414 20.391 10.7401 20.3065 10.1937 20.7486C9.6473 21.1906 9.56275 21.992 10.0048 22.5383L10.8053 23.5276C11.2474 24.074 12.0487 24.1586 12.5951 23.7165C13.1415 23.2744 13.226 22.4731 12.7839 21.9267L11.9835 20.9374Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ApertureIcon/ApertureIcon.native.test.tsx b/packages/blade/src/components/Icons/ApertureIcon/ApertureIcon.native.test.tsx
index e71615b1dbf..5c38227fe9e 100644
--- a/packages/blade/src/components/Icons/ApertureIcon/ApertureIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ApertureIcon/ApertureIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ApertureIcon />', () => {
   it('should render ApertureIcon', () => {
     const renderTree = renderWithTheme(
-      <ApertureIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ApertureIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ApertureIcon/ApertureIcon.web.test.tsx b/packages/blade/src/components/Icons/ApertureIcon/ApertureIcon.web.test.tsx
index 4b73fb483c6..623915494b7 100644
--- a/packages/blade/src/components/Icons/ApertureIcon/ApertureIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ApertureIcon/ApertureIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ApertureIcon />', () => {
   it('should render ApertureIcon', () => {
     const { container } = renderWithTheme(
-      <ApertureIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ApertureIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.native.test.tsx.snap
index eca853adc26..612e40aadbd 100644
--- a/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ApertureIcon /> should render ApertureIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3.20377 5.39391C5.2109 2.72559 8.40393 1 12 1C12.3927 1 12.7806 1.02058 13.1627 1.06072C13.2083 1.06262 13.2539 1.06766 13.2993 1.07593C17.224 1.53775 20.5165 4.06572 22.0594 7.54247C22.0788 7.58008 22.0958 7.61907 22.1104 7.65927C22.6829 8.991 23 10.4585 23 12C23 14.4134 22.2228 16.6452 20.905 18.4589C20.8736 18.5108 20.8373 18.5601 20.7962 18.6061C18.7891 21.2744 15.5961 23 12 23C11.6074 23 11.2196 22.9794 10.8377 22.9393C10.7919 22.9374 10.7461 22.9324 10.7006 22.9241C6.77649 22.4623 3.48442 19.9349 1.94126 16.4589C1.92133 16.4204 1.90383 16.3805 1.88896 16.3392C1.31685 15.0079 1 13.5409 1 12C1 9.58664 1.77719 7.35481 3.09493 5.54113C3.12638 5.48921 3.16272 5.43988 3.20377 5.39391ZM12.5886 20.9811C15.0884 20.8197 17.3103 19.6377 18.8418 17.8475L16.6199 13.9999L12.5886 20.9811ZM17.4986 11.522C17.4902 11.5066 17.4814 11.4914 17.4722 11.4764L16.0422 9H20.4879C20.8195 9.93834 21 10.9481 21 12C21 13.4294 20.6667 14.7811 20.0737 15.9814L17.4986 11.522ZM15.4652 12.0002L13.7329 15H10.2673L8.53485 11.9999L10.2672 9H13.7327L15.4652 12.0002ZM12.578 17L10.3548 20.85C7.92612 20.4013 5.83933 18.9776 4.51555 17H9.67206C9.68462 17.0002 9.69721 17.0002 9.7098 17H12.578ZM6.5256 12.5199L7.95777 15H3.51212C3.18046 14.0617 3 13.0519 3 12C3 10.5706 3.33324 9.21896 3.92628 8.01865L6.5036 12.4818C6.51064 12.4946 6.51798 12.5074 6.5256 12.5199ZM7.38009 10.0002L5.15819 6.15255C6.68971 4.36229 8.91164 3.18028 11.4115 3.01893L8.83196 7.48602C8.82614 7.49571 8.82048 7.50552 8.81498 7.51542L7.38009 10.0002ZM14.2916 7H11.4221L13.6453 3.15005C16.0739 3.59871 18.1607 5.02241 19.4845 7H14.3265C14.3149 6.9998 14.3032 6.9998 14.2916 7Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.web.test.tsx.snap
index 45a9ec83cdc..8ae67cda9b7 100644
--- a/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ApertureIcon /> should render ApertureIcon 1`] = `
       clip-rule="evenodd"
       d="M3.20377 5.39391C5.2109 2.72559 8.40393 1 12 1C12.3927 1 12.7806 1.02058 13.1627 1.06072C13.2083 1.06262 13.2539 1.06766 13.2993 1.07593C17.224 1.53775 20.5165 4.06572 22.0594 7.54247C22.0788 7.58008 22.0958 7.61907 22.1104 7.65927C22.6829 8.991 23 10.4585 23 12C23 14.4134 22.2228 16.6452 20.905 18.4589C20.8736 18.5108 20.8373 18.5601 20.7962 18.6061C18.7891 21.2744 15.5961 23 12 23C11.6074 23 11.2196 22.9794 10.8377 22.9393C10.7919 22.9374 10.7461 22.9324 10.7006 22.9241C6.77649 22.4623 3.48442 19.9349 1.94126 16.4589C1.92133 16.4204 1.90383 16.3805 1.88896 16.3392C1.31685 15.0079 1 13.5409 1 12C1 9.58664 1.77719 7.35481 3.09493 5.54113C3.12638 5.48921 3.16272 5.43988 3.20377 5.39391ZM12.5886 20.9811C15.0884 20.8197 17.3103 19.6377 18.8418 17.8475L16.6199 13.9999L12.5886 20.9811ZM17.4986 11.522C17.4902 11.5066 17.4814 11.4914 17.4722 11.4764L16.0422 9H20.4879C20.8195 9.93834 21 10.9481 21 12C21 13.4294 20.6667 14.7811 20.0737 15.9814L17.4986 11.522ZM15.4652 12.0002L13.7329 15H10.2673L8.53485 11.9999L10.2672 9H13.7327L15.4652 12.0002ZM12.578 17L10.3548 20.85C7.92612 20.4013 5.83933 18.9776 4.51555 17H9.67206C9.68462 17.0002 9.69721 17.0002 9.7098 17H12.578ZM6.5256 12.5199L7.95777 15H3.51212C3.18046 14.0617 3 13.0519 3 12C3 10.5706 3.33324 9.21896 3.92628 8.01865L6.5036 12.4818C6.51064 12.4946 6.51798 12.5074 6.5256 12.5199ZM7.38009 10.0002L5.15819 6.15255C6.68971 4.36229 8.91164 3.18028 11.4115 3.01893L8.83196 7.48602C8.82614 7.49571 8.82048 7.50552 8.81498 7.51542L7.38009 10.0002ZM14.2916 7H11.4221L13.6453 3.15005C16.0739 3.59871 18.1607 5.02241 19.4845 7H14.3265C14.3149 6.9998 14.3032 6.9998 14.2916 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AppStoreIcon/AppStoreIcon.native.test.tsx b/packages/blade/src/components/Icons/AppStoreIcon/AppStoreIcon.native.test.tsx
index c6689991dd4..afaa453f2ce 100644
--- a/packages/blade/src/components/Icons/AppStoreIcon/AppStoreIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AppStoreIcon/AppStoreIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AppStoreIcon />', () => {
   it('should render AppStoreIcon', () => {
     const renderTree = renderWithTheme(
-      <AppStoreIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AppStoreIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AppStoreIcon/AppStoreIcon.web.test.tsx b/packages/blade/src/components/Icons/AppStoreIcon/AppStoreIcon.web.test.tsx
index 20cd85cbb6f..5614552aff9 100644
--- a/packages/blade/src/components/Icons/AppStoreIcon/AppStoreIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AppStoreIcon/AppStoreIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AppStoreIcon />', () => {
   it('should render AppStoreIcon', () => {
     const { container } = renderWithTheme(
-      <AppStoreIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AppStoreIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.native.test.tsx.snap
index 2b26d43e3af..ec01cc405e7 100644
--- a/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<AppStoreIcon /> should render AppStoreIcon 1`] = `
     >
       <RNSVGPath
         d="M17.5549 4.37079L20.7774 7.74158L17.5549 11.1124L14.3323 7.74158L17.5549 4.37079ZM8.8323 4.94252V9.70689H4.27743V4.94252H8.8323ZM20.2195 16.8534V21.6178H15.6646V16.8534H20.2195ZM8.8323 16.8534V21.6178H4.27743V16.8534H8.8323ZM18.2771 1.75409C17.8834 1.34299 17.2264 1.34299 16.8327 1.75409L11.7716 7.03861C11.4014 7.4251 11.4012 8.0345 11.771 8.42132L16.832 13.7152C17.2259 14.1271 17.8838 14.1271 18.2777 13.7152L23.3388 8.42132C23.7086 8.0345 23.7083 7.4251 23.3382 7.03861L18.2771 1.75409ZM11.1097 3.56033C11.1097 3.00805 10.662 2.56033 10.1097 2.56033H3C2.44771 2.56033 2 3.00805 2 3.56033V11.0891C2 11.6414 2.44772 12.0891 3 12.0891H10.1097C10.662 12.0891 11.1097 11.6414 11.1097 11.0891V3.56033ZM22.4969 15.4713C22.4969 14.919 22.0492 14.4713 21.4969 14.4713H14.3872C13.8349 14.4713 13.3872 14.919 13.3872 15.4713V23C13.3872 23.5523 13.8349 24 14.3872 24H21.4969C22.0492 24 22.4969 23.5523 22.4969 23V15.4713ZM11.1097 15.4713C11.1097 14.919 10.662 14.4713 10.1097 14.4713H3C2.44771 14.4713 2 14.919 2 15.4713V23C2 23.5523 2.44772 24 3 24H10.1097C10.662 24 11.1097 23.5523 11.1097 23V15.4713Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.web.test.tsx.snap
index c1970e78235..a6ccc9f007c 100644
--- a/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<AppStoreIcon /> should render AppStoreIcon 1`] = `
     <path
       d="M17.5549 4.37079L20.7774 7.74158L17.5549 11.1124L14.3323 7.74158L17.5549 4.37079ZM8.8323 4.94252V9.70689H4.27743V4.94252H8.8323ZM20.2195 16.8534V21.6178H15.6646V16.8534H20.2195ZM8.8323 16.8534V21.6178H4.27743V16.8534H8.8323ZM18.2771 1.75409C17.8834 1.34299 17.2264 1.34299 16.8327 1.75409L11.7716 7.03861C11.4014 7.4251 11.4012 8.0345 11.771 8.42132L16.832 13.7152C17.2259 14.1271 17.8838 14.1271 18.2777 13.7152L23.3388 8.42132C23.7086 8.0345 23.7083 7.4251 23.3382 7.03861L18.2771 1.75409ZM11.1097 3.56033C11.1097 3.00805 10.662 2.56033 10.1097 2.56033H3C2.44771 2.56033 2 3.00805 2 3.56033V11.0891C2 11.6414 2.44772 12.0891 3 12.0891H10.1097C10.662 12.0891 11.1097 11.6414 11.1097 11.0891V3.56033ZM22.4969 15.4713C22.4969 14.919 22.0492 14.4713 21.4969 14.4713H14.3872C13.8349 14.4713 13.3872 14.919 13.3872 15.4713V23C13.3872 23.5523 13.8349 24 14.3872 24H21.4969C22.0492 24 22.4969 23.5523 22.4969 23V15.4713ZM11.1097 15.4713C11.1097 14.919 10.662 14.4713 10.1097 14.4713H3C2.44771 14.4713 2 14.919 2 15.4713V23C2 23.5523 2.44772 24 3 24H10.1097C10.662 24 11.1097 23.5523 11.1097 23V15.4713Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ArrowDownIcon/ArrowDownIcon.native.test.tsx b/packages/blade/src/components/Icons/ArrowDownIcon/ArrowDownIcon.native.test.tsx
index 5ca2a0c167d..2a8d763c462 100644
--- a/packages/blade/src/components/Icons/ArrowDownIcon/ArrowDownIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowDownIcon/ArrowDownIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ArrowDownIcon />', () => {
   it('should render ArrowDownIcon', () => {
     const renderTree = renderWithTheme(
-      <ArrowDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowDownIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowDownIcon/ArrowDownIcon.web.test.tsx b/packages/blade/src/components/Icons/ArrowDownIcon/ArrowDownIcon.web.test.tsx
index ecfcd495423..9b31d909c14 100644
--- a/packages/blade/src/components/Icons/ArrowDownIcon/ArrowDownIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowDownIcon/ArrowDownIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ArrowDownIcon />', () => {
   it('should render ArrowDownIcon', () => {
     const { container } = renderWithTheme(
-      <ArrowDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowDownIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.native.test.tsx.snap
index 4bc7447b036..3ff6408ccaf 100644
--- a/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ArrowDownIcon /> should render ArrowDownIcon 1`] = `
     >
       <RNSVGPath
         d="M13 4a1 1 0 1 0-2 0v13.586l-4.293-4.293a1 1 0 0 0-1.414 1.414l6 6a1 1 0 0 0 1.414 0l6-6a1 1 0 0 0-1.414-1.414L13 17.586V4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.web.test.tsx.snap
index ce79236c111..a129945c3be 100644
--- a/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ArrowDownIcon /> should render ArrowDownIcon 1`] = `
     <path
       d="M13 4a1 1 0 1 0-2 0v13.586l-4.293-4.293a1 1 0 0 0-1.414 1.414l6 6a1 1 0 0 0 1.414 0l6-6a1 1 0 0 0-1.414-1.414L13 17.586V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.native.test.tsx b/packages/blade/src/components/Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.native.test.tsx
index 81455865b0d..c10e52aace5 100644
--- a/packages/blade/src/components/Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ArrowDownLeftIcon />', () => {
   it('should render ArrowDownLeftIcon', () => {
     const renderTree = renderWithTheme(
-      <ArrowDownLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowDownLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.web.test.tsx b/packages/blade/src/components/Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.web.test.tsx
index 9c9988e946a..c3a7112982f 100644
--- a/packages/blade/src/components/Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ArrowDownLeftIcon />', () => {
   it('should render ArrowDownLeftIcon', () => {
     const { container } = renderWithTheme(
-      <ArrowDownLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowDownLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.native.test.tsx.snap
index a7fef0b6f79..b41d7e97042 100644
--- a/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ArrowDownLeftIcon /> should render ArrowDownLeftIcon 1`] = `
     >
       <RNSVGPath
         d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L7 15.5858V9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V17.9998C5 18.1354 5.02699 18.2649 5.07588 18.3828C5.12432 18.4999 5.19595 18.6096 5.29078 18.705C5.29219 18.7064 5.2936 18.7078 5.29502 18.7092C5.48924 18.9023 5.74301 18.9992 5.997 19C5.998 19 5.999 19 6 19H15C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17H8.41421L18.7071 6.70711Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.web.test.tsx.snap
index 8df4c072ad9..e26534fcb66 100644
--- a/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ArrowDownLeftIcon /> should render ArrowDownLeftIcon 1`] = `
     <path
       d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L7 15.5858V9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V17.9998C5 18.1354 5.02699 18.2649 5.07588 18.3828C5.12432 18.4999 5.19595 18.6096 5.29078 18.705C5.29219 18.7064 5.2936 18.7078 5.29502 18.7092C5.48924 18.9023 5.74301 18.9992 5.997 19C5.998 19 5.999 19 6 19H15C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17H8.41421L18.7071 6.70711Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ArrowDownRightIcon/ArrowDownRightIcon.native.test.tsx b/packages/blade/src/components/Icons/ArrowDownRightIcon/ArrowDownRightIcon.native.test.tsx
index 326a5db987e..4d9fa5ecda4 100644
--- a/packages/blade/src/components/Icons/ArrowDownRightIcon/ArrowDownRightIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowDownRightIcon/ArrowDownRightIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ArrowDownRightIcon />', () => {
   it('should render ArrowDownRightIcon', () => {
     const renderTree = renderWithTheme(
-      <ArrowDownRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowDownRightIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowDownRightIcon/ArrowDownRightIcon.web.test.tsx b/packages/blade/src/components/Icons/ArrowDownRightIcon/ArrowDownRightIcon.web.test.tsx
index fd13697a0ae..c605e370c23 100644
--- a/packages/blade/src/components/Icons/ArrowDownRightIcon/ArrowDownRightIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowDownRightIcon/ArrowDownRightIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ArrowDownRightIcon />', () => {
   it('should render ArrowDownRightIcon', () => {
     const { container } = renderWithTheme(
-      <ArrowDownRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowDownRightIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.native.test.tsx.snap
index 03a8b8d466c..ea08701a663 100644
--- a/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ArrowDownRightIcon /> should render ArrowDownRightIcon 1`] = `
     >
       <RNSVGPath
         d="M6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L15.5858 17H9C8.44772 17 8 17.4477 8 18C8 18.5523 8.44772 19 9 19H17.9993C18.0003 19 18.002 19 18.003 19C18.1375 18.9996 18.2657 18.9727 18.3828 18.9241C18.498 18.8764 18.6062 18.8063 18.7005 18.7136C18.7049 18.7093 18.7093 18.7049 18.7136 18.7005C18.8901 18.5208 18.9992 18.2746 19 18.003C19 18.002 19 18.001 19 18V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V15.5858L6.70711 5.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.web.test.tsx.snap
index 8bf556f1946..8eb656e3a36 100644
--- a/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ArrowDownRightIcon /> should render ArrowDownRightIcon 1`] = `
     <path
       d="M6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L15.5858 17H9C8.44772 17 8 17.4477 8 18C8 18.5523 8.44772 19 9 19H17.9993C18.0003 19 18.002 19 18.003 19C18.1375 18.9996 18.2657 18.9727 18.3828 18.9241C18.498 18.8764 18.6062 18.8063 18.7005 18.7136C18.7049 18.7093 18.7093 18.7049 18.7136 18.7005C18.8901 18.5208 18.9992 18.2746 19 18.003C19 18.002 19 18.001 19 18V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V15.5858L6.70711 5.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ArrowLeftIcon/ArrowLeftIcon.native.test.tsx b/packages/blade/src/components/Icons/ArrowLeftIcon/ArrowLeftIcon.native.test.tsx
index ba573754885..837c0fb8675 100644
--- a/packages/blade/src/components/Icons/ArrowLeftIcon/ArrowLeftIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowLeftIcon/ArrowLeftIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ArrowLeftIcon />', () => {
   it('should render ArrowLeftIcon', () => {
     const renderTree = renderWithTheme(
-      <ArrowLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowLeftIcon/ArrowLeftIcon.web.test.tsx b/packages/blade/src/components/Icons/ArrowLeftIcon/ArrowLeftIcon.web.test.tsx
index 90cbbdbf1b2..8a8f41badb3 100644
--- a/packages/blade/src/components/Icons/ArrowLeftIcon/ArrowLeftIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowLeftIcon/ArrowLeftIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ArrowLeftIcon />', () => {
   it('should render ArrowLeftIcon', () => {
     const { container } = renderWithTheme(
-      <ArrowLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.native.test.tsx.snap
index 27235d96c2c..967caca1784 100644
--- a/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ArrowLeftIcon /> should render ArrowLeftIcon 1`] = `
     >
       <RNSVGPath
         d="M10.707 6.707a1 1 0 0 0-1.414-1.414l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L6.414 13H20a1 1 0 1 0 0-2H6.414l4.293-4.293Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.web.test.tsx.snap
index 42f0abea1bd..5f6d2cbd174 100644
--- a/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ArrowLeftIcon /> should render ArrowLeftIcon 1`] = `
     <path
       d="M10.707 6.707a1 1 0 0 0-1.414-1.414l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L6.414 13H20a1 1 0 1 0 0-2H6.414l4.293-4.293Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ArrowRightIcon/ArrowRightIcon.native.test.tsx b/packages/blade/src/components/Icons/ArrowRightIcon/ArrowRightIcon.native.test.tsx
index eda175a37be..59ca4469832 100644
--- a/packages/blade/src/components/Icons/ArrowRightIcon/ArrowRightIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowRightIcon/ArrowRightIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ArrowRightIcon />', () => {
   it('should render ArrowRightIcon', () => {
     const renderTree = renderWithTheme(
-      <ArrowRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowRightIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowRightIcon/ArrowRightIcon.web.test.tsx b/packages/blade/src/components/Icons/ArrowRightIcon/ArrowRightIcon.web.test.tsx
index 9470a3fd29d..b6aacd12793 100644
--- a/packages/blade/src/components/Icons/ArrowRightIcon/ArrowRightIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowRightIcon/ArrowRightIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ArrowRightIcon />', () => {
   it('should render ArrowRightIcon', () => {
     const { container } = renderWithTheme(
-      <ArrowRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowRightIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.native.test.tsx.snap
index b60feb79a31..9b595e2adcc 100644
--- a/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ArrowRightIcon /> should render ArrowRightIcon 1`] = `
     >
       <RNSVGPath
         d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.web.test.tsx.snap
index f8ff9b30e65..8d15b2f10f8 100644
--- a/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ArrowRightIcon /> should render ArrowRightIcon 1`] = `
     <path
       d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ArrowUpIcon/ArrowUpIcon.native.test.tsx b/packages/blade/src/components/Icons/ArrowUpIcon/ArrowUpIcon.native.test.tsx
index 14f092e31c6..1b1953f2ab5 100644
--- a/packages/blade/src/components/Icons/ArrowUpIcon/ArrowUpIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowUpIcon/ArrowUpIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ArrowUpIcon />', () => {
   it('should render ArrowUpIcon', () => {
     const renderTree = renderWithTheme(
-      <ArrowUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowUpIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowUpIcon/ArrowUpIcon.web.test.tsx b/packages/blade/src/components/Icons/ArrowUpIcon/ArrowUpIcon.web.test.tsx
index 67c90c8c76c..59ed6427a16 100644
--- a/packages/blade/src/components/Icons/ArrowUpIcon/ArrowUpIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowUpIcon/ArrowUpIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ArrowUpIcon />', () => {
   it('should render ArrowUpIcon', () => {
     const { container } = renderWithTheme(
-      <ArrowUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowUpIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.native.test.tsx.snap
index 13192efb4b9..68d2b207338 100644
--- a/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ArrowUpIcon /> should render ArrowUpIcon 1`] = `
     >
       <RNSVGPath
         d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.web.test.tsx.snap
index eae642bf74e..8d108fcbff9 100644
--- a/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ArrowUpIcon /> should render ArrowUpIcon 1`] = `
     <path
       d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ArrowUpLeftIcon/ArrowUpLeftIcon.native.test.tsx b/packages/blade/src/components/Icons/ArrowUpLeftIcon/ArrowUpLeftIcon.native.test.tsx
index 608a57f5d13..c5d516d352c 100644
--- a/packages/blade/src/components/Icons/ArrowUpLeftIcon/ArrowUpLeftIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowUpLeftIcon/ArrowUpLeftIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ArrowUpLeftIcon />', () => {
   it('should render ArrowUpLeftIcon', () => {
     const renderTree = renderWithTheme(
-      <ArrowUpLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowUpLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowUpLeftIcon/ArrowUpLeftIcon.web.test.tsx b/packages/blade/src/components/Icons/ArrowUpLeftIcon/ArrowUpLeftIcon.web.test.tsx
index 7ce334d8480..1a13d04ec7d 100644
--- a/packages/blade/src/components/Icons/ArrowUpLeftIcon/ArrowUpLeftIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowUpLeftIcon/ArrowUpLeftIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ArrowUpLeftIcon />', () => {
   it('should render ArrowUpLeftIcon', () => {
     const { container } = renderWithTheme(
-      <ArrowUpLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowUpLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.native.test.tsx.snap
index 94c4fa54c9f..b9c96692d45 100644
--- a/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ArrowUpLeftIcon /> should render ArrowUpLeftIcon 1`] = `
     >
       <RNSVGPath
         d="M6 5C5.44772 5 5 5.44772 5 6V15C5 15.5523 5.44772 16 6 16C6.55228 16 7 15.5523 7 15V8.41421L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L8.41421 7H15C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5H6Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.web.test.tsx.snap
index d9bd519ba5a..41bf5f3c598 100644
--- a/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ArrowUpLeftIcon /> should render ArrowUpLeftIcon 1`] = `
     <path
       d="M6 5C5.44772 5 5 5.44772 5 6V15C5 15.5523 5.44772 16 6 16C6.55228 16 7 15.5523 7 15V8.41421L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L8.41421 7H15C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5H6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ArrowUpRightIcon/ArrowUpRightIcon.native.test.tsx b/packages/blade/src/components/Icons/ArrowUpRightIcon/ArrowUpRightIcon.native.test.tsx
index b66d6c94cb5..76a030a5981 100644
--- a/packages/blade/src/components/Icons/ArrowUpRightIcon/ArrowUpRightIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowUpRightIcon/ArrowUpRightIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ArrowUpRightIcon />', () => {
   it('should render ArrowUpRightIcon', () => {
     const renderTree = renderWithTheme(
-      <ArrowUpRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowUpRightIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowUpRightIcon/ArrowUpRightIcon.web.test.tsx b/packages/blade/src/components/Icons/ArrowUpRightIcon/ArrowUpRightIcon.web.test.tsx
index d9fed756250..e5c8a8da490 100644
--- a/packages/blade/src/components/Icons/ArrowUpRightIcon/ArrowUpRightIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ArrowUpRightIcon/ArrowUpRightIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ArrowUpRightIcon />', () => {
   it('should render ArrowUpRightIcon', () => {
     const { container } = renderWithTheme(
-      <ArrowUpRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ArrowUpRightIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.native.test.tsx.snap
index d88b6207eaa..e84c0eaa399 100644
--- a/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ArrowUpRightIcon /> should render ArrowUpRightIcon 1`] = `
     >
       <RNSVGPath
         d="M9 5a1 1 0 0 0 0 2h6.586L5.293 17.293a1 1 0 1 0 1.414 1.414L17 8.414V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.web.test.tsx.snap
index a6fb9690077..e03a824fb2b 100644
--- a/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ArrowUpRightIcon /> should render ArrowUpRightIcon 1`] = `
     <path
       d="M9 5a1 1 0 0 0 0 2h6.586L5.293 17.293a1 1 0 1 0 1.414 1.414L17 8.414V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/AtSignIcon/AtSignIcon.native.test.tsx b/packages/blade/src/components/Icons/AtSignIcon/AtSignIcon.native.test.tsx
index d778ebb8c09..6e6bde059a0 100644
--- a/packages/blade/src/components/Icons/AtSignIcon/AtSignIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AtSignIcon/AtSignIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AtSignIcon />', () => {
   it('should render AtSignIcon', () => {
     const renderTree = renderWithTheme(
-      <AtSignIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AtSignIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AtSignIcon/AtSignIcon.web.test.tsx b/packages/blade/src/components/Icons/AtSignIcon/AtSignIcon.web.test.tsx
index 18972f631c9..5f4c1f06117 100644
--- a/packages/blade/src/components/Icons/AtSignIcon/AtSignIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AtSignIcon/AtSignIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AtSignIcon />', () => {
   it('should render AtSignIcon', () => {
     const { container } = renderWithTheme(
-      <AtSignIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AtSignIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.native.test.tsx.snap
index e95a0d08aec..ddbe33382e6 100644
--- a/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<AtSignIcon /> should render AtSignIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M14.4999 1.28843C9.52184 0.126697 4.39951 2.54737 2.13656 7.13099C-0.126387 11.7146 1.06648 17.2531 5.01567 20.4988C8.96487 23.7445 14.6295 23.8419 18.688 20.7339C19.1265 20.3981 19.2097 19.7704 18.8739 19.332C18.5381 18.8935 17.9105 18.8102 17.472 19.146C14.1514 21.6889 9.51671 21.6092 6.28555 18.9537C3.05439 16.2981 2.07841 11.7666 3.92991 8.01638C5.78141 4.26614 9.97241 2.28559 14.0454 3.23609C18.1183 4.18659 20.9997 7.81767 21 12V13C21 14.1045 20.1046 15 19 15C17.8954 15 17 14.1045 17 13V12.0139C17 12.0093 17 12.0046 17 12C17 9.23855 14.7614 6.99997 12 6.99997C9.23858 6.99997 7 9.23855 7 12C7 14.7614 9.23858 17 12 17C13.488 17 14.8241 16.35 15.7401 15.3185C16.4652 16.3362 17.6551 17 19 17C21.2091 17 23 15.2091 23 13V11.9999C22.9997 6.88809 19.4779 2.45015 14.4999 1.28843ZM15 11.9944L15 12V12.011C14.994 13.6628 13.6532 15 12 15C10.3431 15 9 13.6568 9 12C9 10.3431 10.3431 8.99997 12 8.99997C13.655 8.99997 14.997 10.3401 15 11.9944Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.web.test.tsx.snap
index 0fa72d38ebd..1c609bc05f3 100644
--- a/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<AtSignIcon /> should render AtSignIcon 1`] = `
       clip-rule="evenodd"
       d="M14.4999 1.28843C9.52184 0.126697 4.39951 2.54737 2.13656 7.13099C-0.126387 11.7146 1.06648 17.2531 5.01567 20.4988C8.96487 23.7445 14.6295 23.8419 18.688 20.7339C19.1265 20.3981 19.2097 19.7704 18.8739 19.332C18.5381 18.8935 17.9105 18.8102 17.472 19.146C14.1514 21.6889 9.51671 21.6092 6.28555 18.9537C3.05439 16.2981 2.07841 11.7666 3.92991 8.01638C5.78141 4.26614 9.97241 2.28559 14.0454 3.23609C18.1183 4.18659 20.9997 7.81767 21 12V13C21 14.1045 20.1046 15 19 15C17.8954 15 17 14.1045 17 13V12.0139C17 12.0093 17 12.0046 17 12C17 9.23855 14.7614 6.99997 12 6.99997C9.23858 6.99997 7 9.23855 7 12C7 14.7614 9.23858 17 12 17C13.488 17 14.8241 16.35 15.7401 15.3185C16.4652 16.3362 17.6551 17 19 17C21.2091 17 23 15.2091 23 13V11.9999C22.9997 6.88809 19.4779 2.45015 14.4999 1.28843ZM15 11.9944L15 12V12.011C14.994 13.6628 13.6532 15 12 15C10.3431 15 9 13.6568 9 12C9 10.3431 10.3431 8.99997 12 8.99997C13.655 8.99997 14.997 10.3401 15 11.9944Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/AttachmentIcon/AttachmentIcon.native.test.tsx b/packages/blade/src/components/Icons/AttachmentIcon/AttachmentIcon.native.test.tsx
index 163e89511b5..ec9096a3e44 100644
--- a/packages/blade/src/components/Icons/AttachmentIcon/AttachmentIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AttachmentIcon/AttachmentIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AttachmentIcon />', () => {
   it('should render AttachmentIcon', () => {
     const renderTree = renderWithTheme(
-      <AttachmentIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AttachmentIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AttachmentIcon/AttachmentIcon.web.test.tsx b/packages/blade/src/components/Icons/AttachmentIcon/AttachmentIcon.web.test.tsx
index cca27320d52..9cfad7e2008 100644
--- a/packages/blade/src/components/Icons/AttachmentIcon/AttachmentIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AttachmentIcon/AttachmentIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AttachmentIcon />', () => {
   it('should render AttachmentIcon', () => {
     const { container } = renderWithTheme(
-      <AttachmentIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AttachmentIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.native.test.tsx.snap
index b2661d8ef47..f4dd3481453 100644
--- a/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
     >
       <RNSVGPath
         d="M2 12C2 9.79086 3.79086 8 6 8H9C9.55229 8 10 7.55228 10 7C10 6.44772 9.55229 6 9 6H6C2.68629 6 0 8.68629 0 12C0 13.5913 0.632141 15.1174 1.75736 16.2426C2.88258 17.3679 4.4087 18 6 18H9C9.55229 18 10 17.5523 10 17C10 16.4477 9.55229 16 9 16H6C4.93913 16 3.92172 15.5786 3.17157 14.8284C2.42143 14.0783 2 13.0609 2 12Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
       />
       <RNSVGPath
         d="M15 6C14.4477 6 14 6.44772 14 7C14 7.55228 14.4477 8 15 8H18C19.0609 8 20.0783 8.42143 20.8284 9.17157C21.5786 9.92172 22 10.9391 22 12C22 14.2091 20.2091 16 18 16H15C14.4477 16 14 16.4477 14 17C14 17.5523 14.4477 18 15 18H18C21.3137 18 24 15.3137 24 12C24 10.4087 23.3679 8.88258 22.2426 7.75736C21.1174 6.63214 19.5913 6 18 6H15Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
       />
       <RNSVGPath
         d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.web.test.tsx.snap
index df4bb2ff4aa..6c5f85fc54d 100644
--- a/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.web.test.tsx.snap
@@ -14,17 +14,17 @@ exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
     <path
       d="M2 12C2 9.79086 3.79086 8 6 8H9C9.55229 8 10 7.55228 10 7C10 6.44772 9.55229 6 9 6H6C2.68629 6 0 8.68629 0 12C0 13.5913 0.632141 15.1174 1.75736 16.2426C2.88258 17.3679 4.4087 18 6 18H9C9.55229 18 10 17.5523 10 17C10 16.4477 9.55229 16 9 16H6C4.93913 16 3.92172 15.5786 3.17157 14.8284C2.42143 14.0783 2 13.0609 2 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M15 6C14.4477 6 14 6.44772 14 7C14 7.55228 14.4477 8 15 8H18C19.0609 8 20.0783 8.42143 20.8284 9.17157C21.5786 9.92172 22 10.9391 22 12C22 14.2091 20.2091 16 18 16H15C14.4477 16 14 16.4477 14 17C14 17.5523 14.4477 18 15 18H18C21.3137 18 24 15.3137 24 12C24 10.4087 23.3679 8.88258 22.2426 7.75736C21.1174 6.63214 19.5913 6 18 6H15Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/AwardIcon/AwardIcon.native.test.tsx b/packages/blade/src/components/Icons/AwardIcon/AwardIcon.native.test.tsx
index 5059ea2f9cd..06a5d6d04eb 100644
--- a/packages/blade/src/components/Icons/AwardIcon/AwardIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/AwardIcon/AwardIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<AwardIcon />', () => {
   it('should render AwardIcon', () => {
     const renderTree = renderWithTheme(
-      <AwardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AwardIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AwardIcon/AwardIcon.web.test.tsx b/packages/blade/src/components/Icons/AwardIcon/AwardIcon.web.test.tsx
index a1ae53f1f0e..b3dd8c7c92c 100644
--- a/packages/blade/src/components/Icons/AwardIcon/AwardIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/AwardIcon/AwardIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<AwardIcon />', () => {
   it('should render AwardIcon', () => {
     const { container } = renderWithTheme(
-      <AwardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <AwardIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.native.test.tsx.snap
index fe14865d013..421d5b6b4f4 100644
--- a/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<AwardIcon /> should render AwardIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 0C7.58172 0 4 3.58172 4 8C4 10.5901 5.23084 12.8926 7.13952 14.3547L6.00873 22.8683C5.95817 23.249 6.13004 23.625 6.45099 23.8358C6.77193 24.0466 7.18525 24.0551 7.51452 23.8575L12 21.1662L16.4855 23.8575C16.8148 24.055 17.2281 24.0466 17.549 23.8358C17.8699 23.625 18.0418 23.2491 17.9913 22.8685L16.8617 14.3538C18.7697 12.8917 20 10.5895 20 8C20 3.58172 16.4183 0 12 0ZM15.3305 12.9915C15.2735 13.021 15.2199 13.0558 15.1702 13.095C14.2504 13.6686 13.1639 14 12 14C8.68629 14 6 11.3137 6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8C18 10.0815 16.9401 11.9154 15.3305 12.9915ZM14.9861 15.4241L15.7359 21.0753L12.5145 19.1425C12.1978 18.9525 11.8022 18.9525 11.4855 19.1425L8.26447 21.0751L9.01499 15.4245C9.93735 15.7957 10.9448 16 12 16C13.0556 16 14.0635 15.7955 14.9861 15.4241Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.web.test.tsx.snap
index 47192c23b6b..0d0eb9991d4 100644
--- a/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<AwardIcon /> should render AwardIcon 1`] = `
       clip-rule="evenodd"
       d="M12 0C7.58172 0 4 3.58172 4 8C4 10.5901 5.23084 12.8926 7.13952 14.3547L6.00873 22.8683C5.95817 23.249 6.13004 23.625 6.45099 23.8358C6.77193 24.0466 7.18525 24.0551 7.51452 23.8575L12 21.1662L16.4855 23.8575C16.8148 24.055 17.2281 24.0466 17.549 23.8358C17.8699 23.625 18.0418 23.2491 17.9913 22.8685L16.8617 14.3538C18.7697 12.8917 20 10.5895 20 8C20 3.58172 16.4183 0 12 0ZM15.3305 12.9915C15.2735 13.021 15.2199 13.0558 15.1702 13.095C14.2504 13.6686 13.1639 14 12 14C8.68629 14 6 11.3137 6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8C18 10.0815 16.9401 11.9154 15.3305 12.9915ZM14.9861 15.4241L15.7359 21.0753L12.5145 19.1425C12.1978 18.9525 11.8022 18.9525 11.4855 19.1425L8.26447 21.0751L9.01499 15.4245C9.93735 15.7957 10.9448 16 12 16C13.0556 16 14.0635 15.7955 14.9861 15.4241Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BankIcon/BankIcon.native.test.tsx b/packages/blade/src/components/Icons/BankIcon/BankIcon.native.test.tsx
index 5ca5bacb639..2d3c90f48e9 100644
--- a/packages/blade/src/components/Icons/BankIcon/BankIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BankIcon/BankIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BankIcon />', () => {
   it('should render CloseIcon', () => {
     const renderTree = renderWithTheme(
-      <BankIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BankIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BankIcon/BankIcon.web.test.tsx b/packages/blade/src/components/Icons/BankIcon/BankIcon.web.test.tsx
index 64a3f8de2bd..8ee3e1f0deb 100644
--- a/packages/blade/src/components/Icons/BankIcon/BankIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BankIcon/BankIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BankIcon />', () => {
   it('should render CloseIcon', () => {
     const { container } = renderWithTheme(
-      <BankIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BankIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.native.test.tsx.snap
index 4b9dd372683..cbda355d4ac 100644
--- a/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<BankIcon /> should render CloseIcon 1`] = `
     >
       <RNSVGPath
         d="M5.105 10.429a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1H5.105Zm6.316 0a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1H11.42ZM2 22a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-1.143a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1V22Zm15.737-11.571a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1h-1.158Zm-5.273-9.186a1 1 0 0 0-.928 0l-9 4.714A1 1 0 0 0 2 6.843v.49a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-.49a1 1 0 0 0-.536-.886l-9-4.714Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.web.test.tsx.snap
index db7bb7151ee..7e6f274ea02 100644
--- a/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<BankIcon /> should render CloseIcon 1`] = `
     <path
       d="M5.105 10.429a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1H5.105Zm6.316 0a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1H11.42ZM2 22a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-1.143a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1V22Zm15.737-11.571a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1h-1.158Zm-5.273-9.186a1 1 0 0 0-.928 0l-9 4.714A1 1 0 0 0 2 6.843v.49a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-.49a1 1 0 0 0-.536-.886l-9-4.714Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/BarChartAltIcon/BarChartAltIcon.native.test.tsx b/packages/blade/src/components/Icons/BarChartAltIcon/BarChartAltIcon.native.test.tsx
index 56fd14af61d..9f77ab89a6c 100644
--- a/packages/blade/src/components/Icons/BarChartAltIcon/BarChartAltIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BarChartAltIcon/BarChartAltIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BarChartAltIcon />', () => {
   it('should render BarChartAltIcon', () => {
     const renderTree = renderWithTheme(
-      <BarChartAltIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BarChartAltIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BarChartAltIcon/BarChartAltIcon.web.test.tsx b/packages/blade/src/components/Icons/BarChartAltIcon/BarChartAltIcon.web.test.tsx
index 4bab313d65c..ea57dd57968 100644
--- a/packages/blade/src/components/Icons/BarChartAltIcon/BarChartAltIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BarChartAltIcon/BarChartAltIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BarChartAltIcon />', () => {
   it('should render BarChartAltIcon', () => {
     const { container } = renderWithTheme(
-      <BarChartAltIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BarChartAltIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.native.test.tsx.snap
index 80ff70a0bfa..c6ab3692751 100644
--- a/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 3C9 2.44772 9.44771 2 10 2H14C14.5523 2 15 2.44772 15 3V21C15 21.5523 14.5523 22 14 22H10C9.44771 22 9 21.5523 9 21V3ZM13 4H11V20H13V4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M17 8C17 7.44772 17.4477 7 18 7H22C22.5523 7 23 7.44772 23 8V21C23 21.5523 22.5523 22 22 22H18C17.4477 22 17 21.5523 17 21V8ZM19 9V20H21V9H19Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 12C1.44772 12 1 12.4477 1 13V21C1 21.5523 1.44772 22 2 22H6C6.55228 22 7 21.5523 7 21V13C7 12.4477 6.55228 12 6 12H2ZM3 20V14H5V20H3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.web.test.tsx.snap
index e2c09fdd8cc..99f26798d73 100644
--- a/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.web.test.tsx.snap
@@ -15,21 +15,21 @@ exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
       clip-rule="evenodd"
       d="M9 3C9 2.44772 9.44771 2 10 2H14C14.5523 2 15 2.44772 15 3V21C15 21.5523 14.5523 22 14 22H10C9.44771 22 9 21.5523 9 21V3ZM13 4H11V20H13V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M17 8C17 7.44772 17.4477 7 18 7H22C22.5523 7 23 7.44772 23 8V21C23 21.5523 22.5523 22 22 22H18C17.4477 22 17 21.5523 17 21V8ZM19 9V20H21V9H19Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M2 12C1.44772 12 1 12.4477 1 13V21C1 21.5523 1.44772 22 2 22H6C6.55228 22 7 21.5523 7 21V13C7 12.4477 6.55228 12 6 12H2ZM3 20V14H5V20H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BarChartIcon/BarChartIcon.native.test.tsx b/packages/blade/src/components/Icons/BarChartIcon/BarChartIcon.native.test.tsx
index 84f009fff7d..1a351f6f73a 100644
--- a/packages/blade/src/components/Icons/BarChartIcon/BarChartIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BarChartIcon/BarChartIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BarChartIcon />', () => {
   it('should render BarChartIcon', () => {
     const renderTree = renderWithTheme(
-      <BarChartIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BarChartIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BarChartIcon/BarChartIcon.web.test.tsx b/packages/blade/src/components/Icons/BarChartIcon/BarChartIcon.web.test.tsx
index e42ba5d42e7..aa51dfd345b 100644
--- a/packages/blade/src/components/Icons/BarChartIcon/BarChartIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BarChartIcon/BarChartIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BarChartIcon />', () => {
   it('should render BarChartIcon', () => {
     const { container } = renderWithTheme(
-      <BarChartIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BarChartIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.native.test.tsx.snap
index 5d5541414b8..09fee9301a0 100644
--- a/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M17 3C17 2.44772 17.4477 2 18 2H22C22.5523 2 23 2.44772 23 3V21C23 21.5523 22.5523 22 22 22H18C17.4477 22 17 21.5523 17 21V3ZM21 4H19V20H21V4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 8C9 7.44772 9.44771 7 10 7H14C14.5523 7 15 7.44772 15 8V21C15 21.5523 14.5523 22 14 22H10C9.44771 22 9 21.5523 9 21V8ZM11 9V20H13V9H11Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 12C1.44772 12 1 12.4477 1 13V21C1 21.5523 1.44772 22 2 22H6C6.55228 22 7 21.5523 7 21V13C7 12.4477 6.55228 12 6 12H2ZM3 20V14H5V20H3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.web.test.tsx.snap
index 9277c2166b4..d54e8713780 100644
--- a/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.web.test.tsx.snap
@@ -15,21 +15,21 @@ exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
       clip-rule="evenodd"
       d="M17 3C17 2.44772 17.4477 2 18 2H22C22.5523 2 23 2.44772 23 3V21C23 21.5523 22.5523 22 22 22H18C17.4477 22 17 21.5523 17 21V3ZM21 4H19V20H21V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M9 8C9 7.44772 9.44771 7 10 7H14C14.5523 7 15 7.44772 15 8V21C15 21.5523 14.5523 22 14 22H10C9.44771 22 9 21.5523 9 21V8ZM11 9V20H13V9H11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M2 12C1.44772 12 1 12.4477 1 13V21C1 21.5523 1.44772 22 2 22H6C6.55228 22 7 21.5523 7 21V13C7 12.4477 6.55228 12 6 12H2ZM3 20V14H5V20H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BatteryChargingIcon/BatteryChargingIcon.native.test.tsx b/packages/blade/src/components/Icons/BatteryChargingIcon/BatteryChargingIcon.native.test.tsx
index d23d478c19b..0f9e2304ff7 100644
--- a/packages/blade/src/components/Icons/BatteryChargingIcon/BatteryChargingIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BatteryChargingIcon/BatteryChargingIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BatteryChargingIcon />', () => {
   it('should render BatteryChargingIcon', () => {
     const renderTree = renderWithTheme(
-      <BatteryChargingIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BatteryChargingIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BatteryChargingIcon/BatteryChargingIcon.web.test.tsx b/packages/blade/src/components/Icons/BatteryChargingIcon/BatteryChargingIcon.web.test.tsx
index c96c33aa3ee..5c8225ce25f 100644
--- a/packages/blade/src/components/Icons/BatteryChargingIcon/BatteryChargingIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BatteryChargingIcon/BatteryChargingIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BatteryChargingIcon />', () => {
   it('should render BatteryChargingIcon', () => {
     const { container } = renderWithTheme(
-      <BatteryChargingIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BatteryChargingIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.native.test.tsx.snap
index d6e990c8202..c77a0526ff9 100644
--- a/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BatteryChargingIcon /> should render BatteryChargingIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.8321 6.55481C12.1384 6.09528 12.0142 5.47441 11.5547 5.16806C11.0952 4.8617 10.4743 4.98588 10.168 5.44541L6.16795 11.4454C5.96338 11.7523 5.94431 12.1468 6.11833 12.472C6.29235 12.7971 6.63121 13.0001 7 13.0001H11.1315L8.16795 17.4454C7.8616 17.9049 7.98577 18.5258 8.4453 18.8322C8.90483 19.1385 9.5257 19.0143 9.83205 18.5548L13.8321 12.5548C14.0366 12.248 14.0557 11.8534 13.8817 11.5282C13.7077 11.2031 13.3688 11.0001 13 11.0001H8.86852L11.8321 6.55481ZM3 7.00009C2.44772 7.00009 2 7.44781 2 8.00009V16.0001C2 16.5524 2.44772 17.0001 3 17.0001H5C5.55228 17.0001 6 17.4478 6 18.0001C6 18.5524 5.55228 19.0001 5 19.0001H3C1.34315 19.0001 0 17.6569 0 16.0001V8.00009C0 6.34324 1.34315 5.00009 3 5.00009H6.19C6.74228 5.00009 7.19 5.44781 7.19 6.00009C7.19 6.55238 6.74228 7.00009 6.19 7.00009H3ZM14.0001 6.00009C14.0001 5.44781 14.4478 5.00009 15.0001 5.00009H17.0001C18.6569 5.00009 20.0001 6.34324 20.0001 8.00009V16.0001C20.0001 17.6569 18.6569 19.0001 17.0001 19.0001H13.8101C13.2578 19.0001 12.8101 18.5524 12.8101 18.0001C12.8101 17.4478 13.2578 17.0001 13.8101 17.0001H17.0001C17.5523 17.0001 18.0001 16.5524 18.0001 16.0001V8.00009C18.0001 7.44781 17.5523 7.00009 17.0001 7.00009H15.0001C14.4478 7.00009 14.0001 6.55238 14.0001 6.00009ZM23 10.0001C23.5523 10.0001 24 10.4478 24 11.0001V13.0001C24 13.5524 23.5523 14.0001 23 14.0001C22.4477 14.0001 22 13.5524 22 13.0001V11.0001C22 10.4478 22.4477 10.0001 23 10.0001Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.web.test.tsx.snap
index f822ecf809b..558685fa6fb 100644
--- a/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<BatteryChargingIcon /> should render BatteryChargingIcon 1`] = `
       clip-rule="evenodd"
       d="M11.8321 6.55481C12.1384 6.09528 12.0142 5.47441 11.5547 5.16806C11.0952 4.8617 10.4743 4.98588 10.168 5.44541L6.16795 11.4454C5.96338 11.7523 5.94431 12.1468 6.11833 12.472C6.29235 12.7971 6.63121 13.0001 7 13.0001H11.1315L8.16795 17.4454C7.8616 17.9049 7.98577 18.5258 8.4453 18.8322C8.90483 19.1385 9.5257 19.0143 9.83205 18.5548L13.8321 12.5548C14.0366 12.248 14.0557 11.8534 13.8817 11.5282C13.7077 11.2031 13.3688 11.0001 13 11.0001H8.86852L11.8321 6.55481ZM3 7.00009C2.44772 7.00009 2 7.44781 2 8.00009V16.0001C2 16.5524 2.44772 17.0001 3 17.0001H5C5.55228 17.0001 6 17.4478 6 18.0001C6 18.5524 5.55228 19.0001 5 19.0001H3C1.34315 19.0001 0 17.6569 0 16.0001V8.00009C0 6.34324 1.34315 5.00009 3 5.00009H6.19C6.74228 5.00009 7.19 5.44781 7.19 6.00009C7.19 6.55238 6.74228 7.00009 6.19 7.00009H3ZM14.0001 6.00009C14.0001 5.44781 14.4478 5.00009 15.0001 5.00009H17.0001C18.6569 5.00009 20.0001 6.34324 20.0001 8.00009V16.0001C20.0001 17.6569 18.6569 19.0001 17.0001 19.0001H13.8101C13.2578 19.0001 12.8101 18.5524 12.8101 18.0001C12.8101 17.4478 13.2578 17.0001 13.8101 17.0001H17.0001C17.5523 17.0001 18.0001 16.5524 18.0001 16.0001V8.00009C18.0001 7.44781 17.5523 7.00009 17.0001 7.00009H15.0001C14.4478 7.00009 14.0001 6.55238 14.0001 6.00009ZM23 10.0001C23.5523 10.0001 24 10.4478 24 11.0001V13.0001C24 13.5524 23.5523 14.0001 23 14.0001C22.4477 14.0001 22 13.5524 22 13.0001V11.0001C22 10.4478 22.4477 10.0001 23 10.0001Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BatteryIcon/BatteryIcon.native.test.tsx b/packages/blade/src/components/Icons/BatteryIcon/BatteryIcon.native.test.tsx
index 7a348136094..8d51d25a793 100644
--- a/packages/blade/src/components/Icons/BatteryIcon/BatteryIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BatteryIcon/BatteryIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BatteryIcon />', () => {
   it('should render BatteryIcon', () => {
     const renderTree = renderWithTheme(
-      <BatteryIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BatteryIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BatteryIcon/BatteryIcon.web.test.tsx b/packages/blade/src/components/Icons/BatteryIcon/BatteryIcon.web.test.tsx
index 50ee7d7a965..579471c65f9 100644
--- a/packages/blade/src/components/Icons/BatteryIcon/BatteryIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BatteryIcon/BatteryIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BatteryIcon />', () => {
   it('should render BatteryIcon', () => {
     const { container } = renderWithTheme(
-      <BatteryIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BatteryIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.native.test.tsx.snap
index 9bfcafa33de..f55ff513c41 100644
--- a/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BatteryIcon /> should render BatteryIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 5C1.34315 5 0 6.34315 0 8V16C0 17.6569 1.34315 19 3 19H17C18.6569 19 20 17.6569 20 16V8C20 6.34315 18.6569 5 17 5H3ZM2 8C2 7.44772 2.44772 7 3 7H17C17.5523 7 18 7.44772 18 8V16C18 16.5523 17.5523 17 17 17H3C2.44772 17 2 16.5523 2 16V8Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<BatteryIcon /> should render BatteryIcon 1`] = `
       />
       <RNSVGPath
         d="M24 11C24 10.4477 23.5523 10 23 10C22.4477 10 22 10.4477 22 11V13C22 13.5523 22.4477 14 23 14C23.5523 14 24 13.5523 24 13V11Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.web.test.tsx.snap
index b1ca24aa7ef..ebeee0f966b 100644
--- a/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<BatteryIcon /> should render BatteryIcon 1`] = `
       clip-rule="evenodd"
       d="M3 5C1.34315 5 0 6.34315 0 8V16C0 17.6569 1.34315 19 3 19H17C18.6569 19 20 17.6569 20 16V8C20 6.34315 18.6569 5 17 5H3ZM2 8C2 7.44772 2.44772 7 3 7H17C17.5523 7 18 7.44772 18 8V16C18 16.5523 17.5523 17 17 17H3C2.44772 17 2 16.5523 2 16V8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M24 11C24 10.4477 23.5523 10 23 10C22.4477 10 22 10.4477 22 11V13C22 13.5523 22.4477 14 23 14C23.5523 14 24 13.5523 24 13V11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/BellIcon/BellIcon.native.test.tsx b/packages/blade/src/components/Icons/BellIcon/BellIcon.native.test.tsx
index 698a7f95870..78e79422846 100644
--- a/packages/blade/src/components/Icons/BellIcon/BellIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BellIcon/BellIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BellIcon />', () => {
   it('should render BellIcon', () => {
     const renderTree = renderWithTheme(
-      <BellIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BellIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BellIcon/BellIcon.web.test.tsx b/packages/blade/src/components/Icons/BellIcon/BellIcon.web.test.tsx
index 97aa8daffad..e16cf158bca 100644
--- a/packages/blade/src/components/Icons/BellIcon/BellIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BellIcon/BellIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BellIcon />', () => {
   it('should render BellIcon', () => {
     const { container } = renderWithTheme(
-      <BellIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BellIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.native.test.tsx.snap
index 249e96b4719..352c4389a05 100644
--- a/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BellIcon /> should render BellIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 3C8.68629 3 6 5.68629 6 9V14C6 14.7286 5.80521 15.4117 5.46487 16H18.5351C18.1948 15.4117 18 14.7286 18 14V9C18 5.68629 15.3137 3 12 3ZM22 16C20.8954 16 20 15.1046 20 14V9C20 4.58172 16.4183 1 12 1C7.58172 1 4 4.58172 4 9V14C4 15.1046 3.10457 16 2 16C1.44772 16 1 16.4477 1 17C1 17.5523 1.44772 18 2 18H22C22.5523 18 23 17.5523 23 17C23 16.4477 22.5523 16 22 16ZM9.76823 20.135C10.246 19.8579 10.8579 20.0205 11.135 20.4982C11.3139 20.8066 11.6435 20.9965 12 20.9965C12.3565 20.9965 12.6861 20.8066 12.865 20.4982C13.1421 20.0205 13.754 19.8579 14.2318 20.135C14.7095 20.4121 14.8721 21.024 14.595 21.5018C14.0583 22.427 13.0696 22.9965 12 22.9965C10.9304 22.9965 9.9417 22.427 9.405 21.5018C9.12788 21.024 9.2905 20.4121 9.76823 20.135Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.web.test.tsx.snap
index 2957afd4c0c..e486a5d3c75 100644
--- a/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<BellIcon /> should render BellIcon 1`] = `
       clip-rule="evenodd"
       d="M12 3C8.68629 3 6 5.68629 6 9V14C6 14.7286 5.80521 15.4117 5.46487 16H18.5351C18.1948 15.4117 18 14.7286 18 14V9C18 5.68629 15.3137 3 12 3ZM22 16C20.8954 16 20 15.1046 20 14V9C20 4.58172 16.4183 1 12 1C7.58172 1 4 4.58172 4 9V14C4 15.1046 3.10457 16 2 16C1.44772 16 1 16.4477 1 17C1 17.5523 1.44772 18 2 18H22C22.5523 18 23 17.5523 23 17C23 16.4477 22.5523 16 22 16ZM9.76823 20.135C10.246 19.8579 10.8579 20.0205 11.135 20.4982C11.3139 20.8066 11.6435 20.9965 12 20.9965C12.3565 20.9965 12.6861 20.8066 12.865 20.4982C13.1421 20.0205 13.754 19.8579 14.2318 20.135C14.7095 20.4121 14.8721 21.024 14.595 21.5018C14.0583 22.427 13.0696 22.9965 12 22.9965C10.9304 22.9965 9.9417 22.427 9.405 21.5018C9.12788 21.024 9.2905 20.4121 9.76823 20.135Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BellOffIcon/BellOffIcon.native.test.tsx b/packages/blade/src/components/Icons/BellOffIcon/BellOffIcon.native.test.tsx
index fdefa0b6e56..6e9873b73aa 100644
--- a/packages/blade/src/components/Icons/BellOffIcon/BellOffIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BellOffIcon/BellOffIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BellOffIcon />', () => {
   it('should render BellOffIcon', () => {
     const renderTree = renderWithTheme(
-      <BellOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BellOffIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BellOffIcon/BellOffIcon.web.test.tsx b/packages/blade/src/components/Icons/BellOffIcon/BellOffIcon.web.test.tsx
index aefc70aa450..cbeb00a9a4c 100644
--- a/packages/blade/src/components/Icons/BellOffIcon/BellOffIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BellOffIcon/BellOffIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BellOffIcon />', () => {
   it('should render BellOffIcon', () => {
     const { container } = renderWithTheme(
-      <BellOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BellOffIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.native.test.tsx.snap
index 21934799198..47350591caa 100644
--- a/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L4.58432 5.99853C4.09725 7.23173 3.94742 8.54072 3.91519 9.78658C3.896 10.5283 3.91846 11.2698 3.94438 11.9748L3.95594 12.284C3.97858 12.8838 4.00001 13.4516 4.00001 14C4.00001 15.1046 3.10458 16 2.00001 16C1.44772 16 1.00001 16.4477 1.00001 17C1.00001 17.5523 1.44772 18 2.00001 18H16.5858L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L17.7094 16.2952C17.7079 16.2937 17.7064 16.2921 17.7048 16.2906L6.50379 5.08957C6.49307 5.07834 6.48207 5.06734 6.47078 5.05657L1.70711 0.292893ZM6.17615 7.59037C6.00903 8.28471 5.93525 9.03692 5.91452 9.8383C5.89709 10.5121 5.91721 11.1992 5.94303 11.9014L5.9543 12.2022C5.97691 12.7999 6.00001 13.4105 6.00001 14C6.00001 14.7286 5.80522 15.4117 5.46488 16H14.5858L6.17615 7.59037Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -66,7 +66,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
         />
         <RNSVGPath
           d="M9.05144 3.77092C10.9096 2.72242 13.1848 2.73955 15.0269 3.81591C16.8691 4.89227 18.0011 6.86592 18 8.99949V13C18 13.5523 18.4477 14 19 14C19.5523 14 20 13.5523 20 13V9.00051C20.0015 6.15576 18.4921 3.52422 16.0359 2.08907C13.5797 0.65393 10.5461 0.631087 8.06858 2.02908C7.58758 2.30049 7.41768 2.91043 7.68909 3.39143C7.9605 3.87242 8.57044 4.04233 9.05144 3.77092Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -75,7 +75,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
         />
         <RNSVGPath
           d="M11.135 20.4982C10.8579 20.0205 10.246 19.8579 9.76824 20.135C9.29051 20.4121 9.12789 21.024 9.40501 21.5018C9.9417 22.427 10.9304 22.9965 12 22.9965C13.0696 22.9965 14.0583 22.427 14.595 21.5018C14.8721 21.024 14.7095 20.4121 14.2318 20.135C13.7541 19.8579 13.1421 20.0205 12.865 20.4982C12.6861 20.8066 12.3565 20.9965 12 20.9965C11.6435 20.9965 11.3139 20.8066 11.135 20.4982Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -88,7 +88,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
           name="clip0_60_209"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.web.test.tsx.snap
index e3756b992cb..b6205565b31 100644
--- a/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.web.test.tsx.snap
@@ -19,18 +19,18 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
         clip-rule="evenodd"
         d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L4.58432 5.99853C4.09725 7.23173 3.94742 8.54072 3.91519 9.78658C3.896 10.5283 3.91846 11.2698 3.94438 11.9748L3.95594 12.284C3.97858 12.8838 4.00001 13.4516 4.00001 14C4.00001 15.1046 3.10458 16 2.00001 16C1.44772 16 1.00001 16.4477 1.00001 17C1.00001 17.5523 1.44772 18 2.00001 18H16.5858L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L17.7094 16.2952C17.7079 16.2937 17.7064 16.2921 17.7048 16.2906L6.50379 5.08957C6.49307 5.07834 6.48207 5.06734 6.47078 5.05657L1.70711 0.292893ZM6.17615 7.59037C6.00903 8.28471 5.93525 9.03692 5.91452 9.8383C5.89709 10.5121 5.91721 11.1992 5.94303 11.9014L5.9543 12.2022C5.97691 12.7999 6.00001 13.4105 6.00001 14C6.00001 14.7286 5.80522 15.4117 5.46488 16H14.5858L6.17615 7.59037Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         d="M9.05144 3.77092C10.9096 2.72242 13.1848 2.73955 15.0269 3.81591C16.8691 4.89227 18.0011 6.86592 18 8.99949V13C18 13.5523 18.4477 14 19 14C19.5523 14 20 13.5523 20 13V9.00051C20.0015 6.15576 18.4921 3.52422 16.0359 2.08907C13.5797 0.65393 10.5461 0.631087 8.06858 2.02908C7.58758 2.30049 7.41768 2.91043 7.68909 3.39143C7.9605 3.87242 8.57044 4.04233 9.05144 3.77092Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M11.135 20.4982C10.8579 20.0205 10.246 19.8579 9.76824 20.135C9.29051 20.4121 9.12789 21.024 9.40501 21.5018C9.9417 22.427 10.9304 22.9965 12 22.9965C13.0696 22.9965 14.0583 22.427 14.595 21.5018C14.8721 21.024 14.7095 20.4121 14.2318 20.135C13.7541 19.8579 13.1421 20.0205 12.865 20.4982C12.6861 20.8066 12.3565 20.9965 12 20.9965C11.6435 20.9965 11.3139 20.8066 11.135 20.4982Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -42,7 +42,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/BillIcon/BillIcon.native.test.tsx b/packages/blade/src/components/Icons/BillIcon/BillIcon.native.test.tsx
index 2699ccb456a..901d74bfea1 100644
--- a/packages/blade/src/components/Icons/BillIcon/BillIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BillIcon/BillIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BillIcon />', () => {
   it('should render BillIcon', () => {
     const renderTree = renderWithTheme(
-      <BillIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BillIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BillIcon/BillIcon.web.test.tsx b/packages/blade/src/components/Icons/BillIcon/BillIcon.web.test.tsx
index 72b52df2157..816e86b199d 100644
--- a/packages/blade/src/components/Icons/BillIcon/BillIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BillIcon/BillIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BillIcon />', () => {
   it('should render BillIcon', () => {
     const { container } = renderWithTheme(
-      <BillIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BillIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.native.test.tsx.snap
index 992c368578d..baaf3afbbb1 100644
--- a/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
     >
       <RNSVGPath
         d="M8.36841 8.13722C7.81612 8.13722 7.36841 8.58786 7.36841 9.14376C7.36841 9.69965 7.81612 10.1503 8.36841 10.1503H14.9579C15.5102 10.1503 15.9579 9.69965 15.9579 9.14376C15.9579 8.58786 15.5102 8.13722 14.9579 8.13722H8.36841Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
       />
       <RNSVGPath
         d="M7.36841 6.03268C7.36841 5.47678 7.81612 5.02614 8.36841 5.02614H14.9579C15.5102 5.02614 15.9579 5.47678 15.9579 6.03268C15.9579 6.58857 15.5102 7.03921 14.9579 7.03921H8.36841C7.81612 7.03921 7.36841 6.58857 7.36841 6.03268Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
       />
       <RNSVGPath
         d="M8.36841 11.7974C7.81612 11.7974 7.36841 12.248 7.36841 12.8039C7.36841 13.3598 7.81612 13.8105 8.36841 13.8105H10.5789C11.1312 13.8105 11.5789 13.3598 11.5789 12.8039C11.5789 12.248 11.1312 11.7974 10.5789 11.7974H8.36841Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -79,7 +79,7 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M19 1C20.1046 1 21 1.90128 21 3.01307V22.0901C21 22.5132 20.5127 22.7474 20.1857 22.4815L16.8143 19.7393C16.6309 19.5902 16.3691 19.5902 16.1857 19.7393L12.3143 22.8882C12.1309 23.0373 11.8691 23.0373 11.6857 22.8882L7.81426 19.7393C7.63094 19.5902 7.36906 19.5902 7.18574 19.7393L3.81426 22.4815C3.48728 22.7474 3 22.5132 3 22.0901V3.01307C3 1.90128 3.89543 1 5 1H19ZM5 3.01307H19V18.9289L18.0713 18.1735C17.1547 17.428 15.8453 17.428 14.9287 18.1735L12 20.5556L9.0713 18.1735C8.1547 17.428 6.8453 17.428 5.9287 18.1735L5 18.9289V3.01307Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.web.test.tsx.snap
index 426a7fd0bdb..e70e16f17e8 100644
--- a/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.web.test.tsx.snap
@@ -14,23 +14,23 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
     <path
       d="M8.36841 8.13722C7.81612 8.13722 7.36841 8.58786 7.36841 9.14376C7.36841 9.69965 7.81612 10.1503 8.36841 10.1503H14.9579C15.5102 10.1503 15.9579 9.69965 15.9579 9.14376C15.9579 8.58786 15.5102 8.13722 14.9579 8.13722H8.36841Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M7.36841 6.03268C7.36841 5.47678 7.81612 5.02614 8.36841 5.02614H14.9579C15.5102 5.02614 15.9579 5.47678 15.9579 6.03268C15.9579 6.58857 15.5102 7.03921 14.9579 7.03921H8.36841C7.81612 7.03921 7.36841 6.58857 7.36841 6.03268Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M8.36841 11.7974C7.81612 11.7974 7.36841 12.248 7.36841 12.8039C7.36841 13.3598 7.81612 13.8105 8.36841 13.8105H10.5789C11.1312 13.8105 11.5789 13.3598 11.5789 12.8039C11.5789 12.248 11.1312 11.7974 10.5789 11.7974H8.36841Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M19 1C20.1046 1 21 1.90128 21 3.01307V22.0901C21 22.5132 20.5127 22.7474 20.1857 22.4815L16.8143 19.7393C16.6309 19.5902 16.3691 19.5902 16.1857 19.7393L12.3143 22.8882C12.1309 23.0373 11.8691 23.0373 11.6857 22.8882L7.81426 19.7393C7.63094 19.5902 7.36906 19.5902 7.18574 19.7393L3.81426 22.4815C3.48728 22.7474 3 22.5132 3 22.0901V3.01307C3 1.90128 3.89543 1 5 1H19ZM5 3.01307H19V18.9289L18.0713 18.1735C17.1547 17.428 15.8453 17.428 14.9287 18.1735L12 20.5556L9.0713 18.1735C8.1547 17.428 6.8453 17.428 5.9287 18.1735L5 18.9289V3.01307Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BluetoothIcon/BluetoothIcon.native.test.tsx b/packages/blade/src/components/Icons/BluetoothIcon/BluetoothIcon.native.test.tsx
index 62532498346..3c413ea7a9a 100644
--- a/packages/blade/src/components/Icons/BluetoothIcon/BluetoothIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BluetoothIcon/BluetoothIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BluetoothIcon />', () => {
   it('should render BluetoothIcon', () => {
     const renderTree = renderWithTheme(
-      <BluetoothIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BluetoothIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BluetoothIcon/BluetoothIcon.web.test.tsx b/packages/blade/src/components/Icons/BluetoothIcon/BluetoothIcon.web.test.tsx
index 6b6e18e26e9..36853e9cd85 100644
--- a/packages/blade/src/components/Icons/BluetoothIcon/BluetoothIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BluetoothIcon/BluetoothIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BluetoothIcon />', () => {
   it('should render BluetoothIcon', () => {
     const { container } = renderWithTheme(
-      <BluetoothIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BluetoothIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.native.test.tsx.snap
index 7af458dc8cd..a3e0f41a069 100644
--- a/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.native.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<BluetoothIcon /> should render BluetoothIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -73,7 +73,7 @@ exports[`<BluetoothIcon /> should render BluetoothIcon 1`] = `
           name="clip0_59_170"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.web.test.tsx.snap
index f5acfa75651..91685509d2a 100644
--- a/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.web.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<BluetoothIcon /> should render BluetoothIcon 1`] = `
       <path
         d="M6.5 6.5L17.5 17.5L12 23V1L17.5 6.5L6.5 17.5"
         data-blade-component="svg-path"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -33,7 +33,7 @@ exports[`<BluetoothIcon /> should render BluetoothIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/BoldIcon/BoldIcon.native.test.tsx b/packages/blade/src/components/Icons/BoldIcon/BoldIcon.native.test.tsx
index 790cea4dab2..f11bb09c91a 100644
--- a/packages/blade/src/components/Icons/BoldIcon/BoldIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BoldIcon/BoldIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BoldIcon />', () => {
   it('should render BoldIcon', () => {
     const renderTree = renderWithTheme(
-      <BoldIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BoldIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BoldIcon/BoldIcon.web.test.tsx b/packages/blade/src/components/Icons/BoldIcon/BoldIcon.web.test.tsx
index b4ed2f36858..720a24b5a50 100644
--- a/packages/blade/src/components/Icons/BoldIcon/BoldIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BoldIcon/BoldIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BoldIcon />', () => {
   it('should render BoldIcon', () => {
     const { container } = renderWithTheme(
-      <BoldIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BoldIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.native.test.tsx.snap
index fdb4abc4243..ccd0626b9e0 100644
--- a/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BoldIcon /> should render BoldIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5 3C4.44772 3 4 3.44772 4 4V20C4 20.5523 4.44772 21 5 21H14C16.7614 21 19 18.7614 19 16C19 14.123 17.9657 12.4875 16.4359 11.6325C17.3991 10.7211 18 9.43071 18 8C18 5.23858 15.7614 3 13 3H5ZM13 11C14.6569 11 16 9.65685 16 8C16 6.34315 14.6569 5 13 5H6V11H13ZM6 13V19H14C15.6569 19 17 17.6569 17 16C17 14.3431 15.6569 13 14 13H6Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.web.test.tsx.snap
index e543ed0f6c5..1ac5dd9c185 100644
--- a/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<BoldIcon /> should render BoldIcon 1`] = `
       clip-rule="evenodd"
       d="M5 3C4.44772 3 4 3.44772 4 4V20C4 20.5523 4.44772 21 5 21H14C16.7614 21 19 18.7614 19 16C19 14.123 17.9657 12.4875 16.4359 11.6325C17.3991 10.7211 18 9.43071 18 8C18 5.23858 15.7614 3 13 3H5ZM13 11C14.6569 11 16 9.65685 16 8C16 6.34315 14.6569 5 13 5H6V11H13ZM6 13V19H14C15.6569 19 17 17.6569 17 16C17 14.3431 15.6569 13 14 13H6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BookIcon/BookIcon.native.test.tsx b/packages/blade/src/components/Icons/BookIcon/BookIcon.native.test.tsx
index 4b0364e6796..efd6752adfc 100644
--- a/packages/blade/src/components/Icons/BookIcon/BookIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BookIcon/BookIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BookIcon />', () => {
   it('should render BookIcon', () => {
     const renderTree = renderWithTheme(
-      <BookIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BookIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BookIcon/BookIcon.web.test.tsx b/packages/blade/src/components/Icons/BookIcon/BookIcon.web.test.tsx
index 6a961ee477b..9d2a82c990b 100644
--- a/packages/blade/src/components/Icons/BookIcon/BookIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BookIcon/BookIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BookIcon />', () => {
   it('should render BookIcon', () => {
     const { container } = renderWithTheme(
-      <BookIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BookIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.native.test.tsx.snap
index 678c4e57641..945fbf816e5 100644
--- a/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BookIcon /> should render BookIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M21 2a1 1 0 0 0-1-1H6.5A3.5 3.5 0 0 0 3 4.5v15A3.5 3.5 0 0 0 6.5 23H20a1 1 0 0 0 1-1V2ZM5 4.5A1.5 1.5 0 0 1 6.5 3H19v13H6.5c-.537 0-1.045.12-1.5.337V4.5Zm0 15A1.5 1.5 0 0 0 6.5 21H19v-3H6.5A1.5 1.5 0 0 0 5 19.5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.web.test.tsx.snap
index f304d4191b6..a4d32058a82 100644
--- a/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<BookIcon /> should render BookIcon 1`] = `
       clip-rule="evenodd"
       d="M21 2a1 1 0 0 0-1-1H6.5A3.5 3.5 0 0 0 3 4.5v15A3.5 3.5 0 0 0 6.5 23H20a1 1 0 0 0 1-1V2ZM5 4.5A1.5 1.5 0 0 1 6.5 3H19v13H6.5c-.537 0-1.045.12-1.5.337V4.5Zm0 15A1.5 1.5 0 0 0 6.5 21H19v-3H6.5A1.5 1.5 0 0 0 5 19.5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BookmarkIcon/BookmarkIcon.native.test.tsx b/packages/blade/src/components/Icons/BookmarkIcon/BookmarkIcon.native.test.tsx
index 5e71223fe93..44c45599bf9 100644
--- a/packages/blade/src/components/Icons/BookmarkIcon/BookmarkIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BookmarkIcon/BookmarkIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BookmarkIcon />', () => {
   it('should render BookmarkIcon', () => {
     const renderTree = renderWithTheme(
-      <BookmarkIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BookmarkIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BookmarkIcon/BookmarkIcon.web.test.tsx b/packages/blade/src/components/Icons/BookmarkIcon/BookmarkIcon.web.test.tsx
index 9363ff909c1..8a351f66e9d 100644
--- a/packages/blade/src/components/Icons/BookmarkIcon/BookmarkIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BookmarkIcon/BookmarkIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BookmarkIcon />', () => {
   it('should render BookmarkIcon', () => {
     const { container } = renderWithTheme(
-      <BookmarkIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BookmarkIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.native.test.tsx.snap
index 86794bd16ad..14e954350e1 100644
--- a/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BookmarkIcon /> should render BookmarkIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7 4C6.44772 4 6 4.44772 6 5V19.0568L11.4188 15.1863C11.7665 14.9379 12.2335 14.9379 12.5812 15.1863L18 19.0568V5C18 4.44772 17.5523 4 17 4H7ZM4 5C4 3.34315 5.34315 2 7 2H17C18.6569 2 20 3.34315 20 5V21C20 21.3746 19.7907 21.7178 19.4576 21.8892C19.1245 22.0606 18.7236 22.0315 18.4188 21.8137L12 17.2289L5.58124 21.8137C5.27642 22.0315 4.87549 22.0606 4.54242 21.8892C4.20935 21.7178 4 21.3746 4 21V5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.web.test.tsx.snap
index 8294a446239..283f7f03ec9 100644
--- a/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<BookmarkIcon /> should render BookmarkIcon 1`] = `
       clip-rule="evenodd"
       d="M7 4C6.44772 4 6 4.44772 6 5V19.0568L11.4188 15.1863C11.7665 14.9379 12.2335 14.9379 12.5812 15.1863L18 19.0568V5C18 4.44772 17.5523 4 17 4H7ZM4 5C4 3.34315 5.34315 2 7 2H17C18.6569 2 20 3.34315 20 5V21C20 21.3746 19.7907 21.7178 19.4576 21.8892C19.1245 22.0606 18.7236 22.0315 18.4188 21.8137L12 17.2289L5.58124 21.8137C5.27642 22.0315 4.87549 22.0606 4.54242 21.8892C4.20935 21.7178 4 21.3746 4 21V5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BoxIcon/BoxIcon.native.test.tsx b/packages/blade/src/components/Icons/BoxIcon/BoxIcon.native.test.tsx
index 62ab5d0765b..b959584bcd7 100644
--- a/packages/blade/src/components/Icons/BoxIcon/BoxIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BoxIcon/BoxIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BoxIcon />', () => {
   it('should render BoxIcon', () => {
     const renderTree = renderWithTheme(
-      <BoxIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BoxIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BoxIcon/BoxIcon.web.test.tsx b/packages/blade/src/components/Icons/BoxIcon/BoxIcon.web.test.tsx
index d515aee0699..dc6a099ef13 100644
--- a/packages/blade/src/components/Icons/BoxIcon/BoxIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BoxIcon/BoxIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BoxIcon />', () => {
   it('should render BoxIcon', () => {
     const { container } = renderWithTheme(
-      <BoxIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BoxIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.native.test.tsx.snap
index e1c89771dc0..5b792b53574 100644
--- a/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BoxIcon /> should render BoxIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M10.665 0.554375C11.5059 0.136497 12.494 0.136497 13.335 0.554375L13.3372 0.555476L21.335 4.55438L21.3364 4.55506C22.3551 5.06191 22.9994 6.10147 23 7.23938V16.7699C22.9994 17.9079 22.3549 18.9482 21.336 19.4549L21.335 19.4554L13.3375 23.4542C12.4924 23.8771 11.4975 23.8771 10.6525 23.4542L2.65277 19.4543L2.65001 19.4529C1.63264 18.9403 0.993506 17.8958 0.999988 16.7568V7.23992C0.999978 5.76032 1.97162 4.88819 2.55877 4.60249L10.665 0.554375ZM11.555 2.34544L4.23655 6.00015L12 9.88187L19.7589 6.0024L12.445 2.34544L12.4441 2.34499C12.1642 2.20627 11.8348 2.20666 11.555 2.34544ZM2.99999 16.7669V7.61794L11 11.6179V21.3919L3.54914 17.6665C3.21012 17.4952 2.99734 17.1467 2.99999 16.7669ZM13 21.3869L20.4428 17.6655L20.445 17.6644C20.7848 17.4955 20.9998 17.1488 21 16.7694V7.61794L13 11.6179V21.3869Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.web.test.tsx.snap
index 01ead82fcd5..b10fdc7dec1 100644
--- a/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<BoxIcon /> should render BoxIcon 1`] = `
       clip-rule="evenodd"
       d="M10.665 0.554375C11.5059 0.136497 12.494 0.136497 13.335 0.554375L13.3372 0.555476L21.335 4.55438L21.3364 4.55506C22.3551 5.06191 22.9994 6.10147 23 7.23938V16.7699C22.9994 17.9079 22.3549 18.9482 21.336 19.4549L21.335 19.4554L13.3375 23.4542C12.4924 23.8771 11.4975 23.8771 10.6525 23.4542L2.65277 19.4543L2.65001 19.4529C1.63264 18.9403 0.993506 17.8958 0.999988 16.7568V7.23992C0.999978 5.76032 1.97162 4.88819 2.55877 4.60249L10.665 0.554375ZM11.555 2.34544L4.23655 6.00015L12 9.88187L19.7589 6.0024L12.445 2.34544L12.4441 2.34499C12.1642 2.20627 11.8348 2.20666 11.555 2.34544ZM2.99999 16.7669V7.61794L11 11.6179V21.3919L3.54914 17.6665C3.21012 17.4952 2.99734 17.1467 2.99999 16.7669ZM13 21.3869L20.4428 17.6655L20.445 17.6644C20.7848 17.4955 20.9998 17.1488 21 16.7694V7.61794L13 11.6179V21.3869Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BriefcaseIcon/BriefcaseIcon.native.test.tsx b/packages/blade/src/components/Icons/BriefcaseIcon/BriefcaseIcon.native.test.tsx
index e29c05cd1f8..2862014f543 100644
--- a/packages/blade/src/components/Icons/BriefcaseIcon/BriefcaseIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BriefcaseIcon/BriefcaseIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BriefcaseIcon />', () => {
   it('should render BriefcaseIcon', () => {
     const renderTree = renderWithTheme(
-      <BriefcaseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BriefcaseIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BriefcaseIcon/BriefcaseIcon.web.test.tsx b/packages/blade/src/components/Icons/BriefcaseIcon/BriefcaseIcon.web.test.tsx
index 449bb59f637..609b9d5b2f5 100644
--- a/packages/blade/src/components/Icons/BriefcaseIcon/BriefcaseIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BriefcaseIcon/BriefcaseIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BriefcaseIcon />', () => {
   it('should render BriefcaseIcon', () => {
     const { container } = renderWithTheme(
-      <BriefcaseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BriefcaseIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.native.test.tsx.snap
index a0fbdc2450a..33c267d0889 100644
--- a/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BriefcaseIcon /> should render BriefcaseIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M10 2C8.34315 2 7 3.34315 7 5V6H4C2.34315 6 1 7.34315 1 9V19C1 20.6569 2.34315 22 4 22H8H16H20C21.6569 22 23 20.6569 23 19V9C23 7.34315 21.6569 6 20 6H17V5C17 3.34315 15.6569 2 14 2H10ZM15 6V5C15 4.44772 14.5523 4 14 4H10C9.44772 4 9 4.44772 9 5V6H15ZM9 8H15V20H9V8ZM7 8H4C3.44772 8 3 8.44772 3 9V19C3 19.5523 3.44772 20 4 20H7V8ZM17 20V8H20C20.5523 8 21 8.44772 21 9V19C21 19.5523 20.5523 20 20 20H17Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.web.test.tsx.snap
index 0ad8854fd5e..f3dda080e2e 100644
--- a/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<BriefcaseIcon /> should render BriefcaseIcon 1`] = `
       clip-rule="evenodd"
       d="M10 2C8.34315 2 7 3.34315 7 5V6H4C2.34315 6 1 7.34315 1 9V19C1 20.6569 2.34315 22 4 22H8H16H20C21.6569 22 23 20.6569 23 19V9C23 7.34315 21.6569 6 20 6H17V5C17 3.34315 15.6569 2 14 2H10ZM15 6V5C15 4.44772 14.5523 4 14 4H10C9.44772 4 9 4.44772 9 5V6H15ZM9 8H15V20H9V8ZM7 8H4C3.44772 8 3 8.44772 3 9V19C3 19.5523 3.44772 20 4 20H7V8ZM17 20V8H20C20.5523 8 21 8.44772 21 9V19C21 19.5523 20.5523 20 20 20H17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/BulkPayoutsIcon/BulkPayoutsIcon.native.test.tsx b/packages/blade/src/components/Icons/BulkPayoutsIcon/BulkPayoutsIcon.native.test.tsx
index 310b823dbc4..9f6ab42ffa0 100644
--- a/packages/blade/src/components/Icons/BulkPayoutsIcon/BulkPayoutsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/BulkPayoutsIcon/BulkPayoutsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<BulkPayoutsIcon />', () => {
   it('should render BulkPayoutsIcon', () => {
     const renderTree = renderWithTheme(
-      <BulkPayoutsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BulkPayoutsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BulkPayoutsIcon/BulkPayoutsIcon.web.test.tsx b/packages/blade/src/components/Icons/BulkPayoutsIcon/BulkPayoutsIcon.web.test.tsx
index 65388f703f6..f4eeba8bb44 100644
--- a/packages/blade/src/components/Icons/BulkPayoutsIcon/BulkPayoutsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/BulkPayoutsIcon/BulkPayoutsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<BulkPayoutsIcon />', () => {
   it('should render BulkPayoutsIcon', () => {
     const { container } = renderWithTheme(
-      <BulkPayoutsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <BulkPayoutsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.native.test.tsx.snap
index ad28ce738b3..15d744ed2fd 100644
--- a/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<BulkPayoutsIcon /> should render BulkPayoutsIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.6001 2C10.9374 2 10.4001 2.53726 10.4001 3.19999C10.4001 3.86273 10.9374 4.39999 11.6001 4.39999H19.6001V12.4C19.6001 13.0627 20.1373 13.5999 20.8 13.5999C21.4628 13.5999 22 13.0627 22 12.4V3.19999C22 2.53726 21.4628 2 20.8 2H11.6001ZM5.60043 7.60069C5.60043 6.93795 6.13768 6.40069 6.80042 6.40069H16.4004C17.0631 6.40069 17.6004 6.93795 17.6004 7.60069V17.2006C17.6004 17.8634 17.0631 18.4006 16.4004 18.4006C15.7376 18.4006 15.2004 17.8634 15.2004 17.2006V10.4977L4.04852 21.6495C3.57989 22.1182 2.8201 22.1182 2.35147 21.6495C1.88284 21.1809 1.88284 20.4211 2.35147 19.9525L13.5033 8.80068H6.80042C6.13768 8.80068 5.60043 8.26343 5.60043 7.60069Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.web.test.tsx.snap
index 4044e602f44..82799ee56df 100644
--- a/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<BulkPayoutsIcon /> should render BulkPayoutsIcon 1`] = `
       clip-rule="evenodd"
       d="M11.6001 2C10.9374 2 10.4001 2.53726 10.4001 3.19999C10.4001 3.86273 10.9374 4.39999 11.6001 4.39999H19.6001V12.4C19.6001 13.0627 20.1373 13.5999 20.8 13.5999C21.4628 13.5999 22 13.0627 22 12.4V3.19999C22 2.53726 21.4628 2 20.8 2H11.6001ZM5.60043 7.60069C5.60043 6.93795 6.13768 6.40069 6.80042 6.40069H16.4004C17.0631 6.40069 17.6004 6.93795 17.6004 7.60069V17.2006C17.6004 17.8634 17.0631 18.4006 16.4004 18.4006C15.7376 18.4006 15.2004 17.8634 15.2004 17.2006V10.4977L4.04852 21.6495C3.57989 22.1182 2.8201 22.1182 2.35147 21.6495C1.88284 21.1809 1.88284 20.4211 2.35147 19.9525L13.5033 8.80068H6.80042C6.13768 8.80068 5.60043 8.26343 5.60043 7.60069Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CalendarIcon/CalendarIcon.native.test.tsx b/packages/blade/src/components/Icons/CalendarIcon/CalendarIcon.native.test.tsx
index 52201364537..45eda9e077a 100644
--- a/packages/blade/src/components/Icons/CalendarIcon/CalendarIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CalendarIcon/CalendarIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CalendarIcon />', () => {
   it('should render CalendarIcon', () => {
     const renderTree = renderWithTheme(
-      <CalendarIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CalendarIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CalendarIcon/CalendarIcon.web.test.tsx b/packages/blade/src/components/Icons/CalendarIcon/CalendarIcon.web.test.tsx
index 0baa8251662..53eb87d7334 100644
--- a/packages/blade/src/components/Icons/CalendarIcon/CalendarIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CalendarIcon/CalendarIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CalendarIcon />', () => {
   it('should render CalendarIcon', () => {
     const { container } = renderWithTheme(
-      <CalendarIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CalendarIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.native.test.tsx.snap
index 1a4692d6c63..ae10ff6150c 100644
--- a/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5 5C4.44772 5 4 5.44772 4 6V20C4 20.5523 4.44772 21 5 21H19C19.5523 21 20 20.5523 20 20V6C20 5.44772 19.5523 5 19 5H5ZM2 6C2 4.34315 3.34315 3 5 3H19C20.6569 3 22 4.34315 22 6V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V6Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M16 1C16.5523 1 17 1.44772 17 2V6C17 6.55228 16.5523 7 16 7C15.4477 7 15 6.55228 15 6V2C15 1.44772 15.4477 1 16 1Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 1C8.55228 1 9 1.44772 9 2V6C9 6.55228 8.55228 7 8 7C7.44772 7 7 6.55228 7 6V2C7 1.44772 7.44772 1 8 1Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -88,7 +88,7 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 10C2 9.44771 2.44772 9 3 9H21C21.5523 9 22 9.44771 22 10C22 10.5523 21.5523 11 21 11H3C2.44772 11 2 10.5523 2 10Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.web.test.tsx.snap
index cae0579377e..f933f57e589 100644
--- a/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.web.test.tsx.snap
@@ -15,28 +15,28 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
       clip-rule="evenodd"
       d="M5 5C4.44772 5 4 5.44772 4 6V20C4 20.5523 4.44772 21 5 21H19C19.5523 21 20 20.5523 20 20V6C20 5.44772 19.5523 5 19 5H5ZM2 6C2 4.34315 3.34315 3 5 3H19C20.6569 3 22 4.34315 22 6V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M16 1C16.5523 1 17 1.44772 17 2V6C17 6.55228 16.5523 7 16 7C15.4477 7 15 6.55228 15 6V2C15 1.44772 15.4477 1 16 1Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M8 1C8.55228 1 9 1.44772 9 2V6C9 6.55228 8.55228 7 8 7C7.44772 7 7 6.55228 7 6V2C7 1.44772 7.44772 1 8 1Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M2 10C2 9.44771 2.44772 9 3 9H21C21.5523 9 22 9.44771 22 10C22 10.5523 21.5523 11 21 11H3C2.44772 11 2 10.5523 2 10Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CameraIcon/CameraIcon.native.test.tsx b/packages/blade/src/components/Icons/CameraIcon/CameraIcon.native.test.tsx
index e28f3514437..5daf49a26f9 100644
--- a/packages/blade/src/components/Icons/CameraIcon/CameraIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CameraIcon/CameraIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CameraIcon />', () => {
   it('should render CameraIcon', () => {
     const renderTree = renderWithTheme(
-      <CameraIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CameraIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CameraIcon/CameraIcon.web.test.tsx b/packages/blade/src/components/Icons/CameraIcon/CameraIcon.web.test.tsx
index 440d76c7486..f5b7af7b1a3 100644
--- a/packages/blade/src/components/Icons/CameraIcon/CameraIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CameraIcon/CameraIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CameraIcon />', () => {
   it('should render CameraIcon', () => {
     const { container } = renderWithTheme(
-      <CameraIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CameraIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.native.test.tsx.snap
index b5bace34aa3..aa036be73c5 100644
--- a/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CameraIcon /> should render CameraIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 8C9.23858 8 7 10.2386 7 13C7 15.7614 9.23858 18 12 18C14.7614 18 17 15.7614 17 13C17 10.2386 14.7614 8 12 8ZM9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16C10.3431 16 9 14.6569 9 13Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<CameraIcon /> should render CameraIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 2C8.66565 2 8.35342 2.1671 8.16795 2.4453L6.46482 5H3C1.34315 5 0 6.34315 0 8V19C0 20.6569 1.34315 22 3 22H21C22.6569 22 24 20.6569 24 19V8C24 6.34315 22.6569 5 21 5H17.5352L15.8321 2.4453C15.6466 2.1671 15.3344 2 15 2H9ZM7.83205 6.5547L9.53518 4H14.4648L16.1679 6.5547C16.3534 6.8329 16.6656 7 17 7H21C21.5523 7 22 7.44772 22 8V19C22 19.5523 21.5523 20 21 20H3C2.44772 20 2 19.5523 2 19V8C2 7.44772 2.44772 7 3 7H7C7.33435 7 7.64658 6.8329 7.83205 6.5547Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.web.test.tsx.snap
index 4baa454681e..d4a155b5632 100644
--- a/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<CameraIcon /> should render CameraIcon 1`] = `
       clip-rule="evenodd"
       d="M12 8C9.23858 8 7 10.2386 7 13C7 15.7614 9.23858 18 12 18C14.7614 18 17 15.7614 17 13C17 10.2386 14.7614 8 12 8ZM9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16C10.3431 16 9 14.6569 9 13Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M9 2C8.66565 2 8.35342 2.1671 8.16795 2.4453L6.46482 5H3C1.34315 5 0 6.34315 0 8V19C0 20.6569 1.34315 22 3 22H21C22.6569 22 24 20.6569 24 19V8C24 6.34315 22.6569 5 21 5H17.5352L15.8321 2.4453C15.6466 2.1671 15.3344 2 15 2H9ZM7.83205 6.5547L9.53518 4H14.4648L16.1679 6.5547C16.3534 6.8329 16.6656 7 17 7H21C21.5523 7 22 7.44772 22 8V19C22 19.5523 21.5523 20 21 20H3C2.44772 20 2 19.5523 2 19V8C2 7.44772 2.44772 7 3 7H7C7.33435 7 7.64658 6.8329 7.83205 6.5547Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CameraOffIcon/CameraOffIcon.native.test.tsx b/packages/blade/src/components/Icons/CameraOffIcon/CameraOffIcon.native.test.tsx
index 1501872d584..4852c6c71cb 100644
--- a/packages/blade/src/components/Icons/CameraOffIcon/CameraOffIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CameraOffIcon/CameraOffIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CameraOffIcon />', () => {
   it('should render CameraOffIcon', () => {
     const renderTree = renderWithTheme(
-      <CameraOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CameraOffIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CameraOffIcon/CameraOffIcon.web.test.tsx b/packages/blade/src/components/Icons/CameraOffIcon/CameraOffIcon.web.test.tsx
index cd04df9979d..28caead8e9c 100644
--- a/packages/blade/src/components/Icons/CameraOffIcon/CameraOffIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CameraOffIcon/CameraOffIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CameraOffIcon />', () => {
   it('should render CameraOffIcon', () => {
     const { container } = renderWithTheme(
-      <CameraOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CameraOffIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.native.test.tsx.snap
index 951b061e5cb..aa0762dda99 100644
--- a/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<CameraOffIcon /> should render CameraOffIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5H3C1.34315 5 0 6.34315 0 8V19C0 20.6569 1.34315 22 3 22H20.5858L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L16.0013 14.587C15.9926 14.578 15.9836 14.5691 15.9745 14.5603L10.4397 9.02547C10.4309 9.01636 10.422 9.00745 10.4129 8.99873L1.70711 0.292893ZM8.26209 9.6763L5.58579 7H3C2.44772 7 2 7.44772 2 8V19C2 19.5523 2.44772 20 3 20H18.5858L15.3237 16.7379C14.1638 17.7818 12.5593 18.2406 10.9854 17.9215C9.01649 17.5223 7.47771 15.9835 7.07854 14.0146C6.75944 12.4407 7.21818 10.8362 8.26209 9.6763ZM13.9061 15.3204L9.67964 11.0939C9.10241 11.7825 8.8544 12.7084 9.03866 13.6172C9.27816 14.7986 10.2014 15.7218 11.3828 15.9613C12.2916 16.1456 13.2175 15.8976 13.9061 15.3204ZM9 2C8.44772 2 8 2.44772 8 3C8 3.55228 8.44772 4 9 4H14.4648L16.1679 6.5547C16.3534 6.8329 16.6656 7 17 7H21C21.5523 7 22 7.44772 22 8V17.34C22 17.8923 22.4477 18.34 23 18.34C23.5523 18.34 24 17.8923 24 17.34V8C24 6.34315 22.6569 5 21 5H17.5352L15.8321 2.4453C15.6466 2.1671 15.3344 2 15 2H9Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<CameraOffIcon /> should render CameraOffIcon 1`] = `
           name="clip0_59_165"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.web.test.tsx.snap
index 84be3d1fe6f..e0021dfe798 100644
--- a/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<CameraOffIcon /> should render CameraOffIcon 1`] = `
         clip-rule="evenodd"
         d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5H3C1.34315 5 0 6.34315 0 8V19C0 20.6569 1.34315 22 3 22H20.5858L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L16.0013 14.587C15.9926 14.578 15.9836 14.5691 15.9745 14.5603L10.4397 9.02547C10.4309 9.01636 10.422 9.00745 10.4129 8.99873L1.70711 0.292893ZM8.26209 9.6763L5.58579 7H3C2.44772 7 2 7.44772 2 8V19C2 19.5523 2.44772 20 3 20H18.5858L15.3237 16.7379C14.1638 17.7818 12.5593 18.2406 10.9854 17.9215C9.01649 17.5223 7.47771 15.9835 7.07854 14.0146C6.75944 12.4407 7.21818 10.8362 8.26209 9.6763ZM13.9061 15.3204L9.67964 11.0939C9.10241 11.7825 8.8544 12.7084 9.03866 13.6172C9.27816 14.7986 10.2014 15.7218 11.3828 15.9613C12.2916 16.1456 13.2175 15.8976 13.9061 15.3204ZM9 2C8.44772 2 8 2.44772 8 3C8 3.55228 8.44772 4 9 4H14.4648L16.1679 6.5547C16.3534 6.8329 16.6656 7 17 7H21C21.5523 7 22 7.44772 22 8V17.34C22 17.8923 22.4477 18.34 23 18.34C23.5523 18.34 24 17.8923 24 17.34V8C24 6.34315 22.6569 5 21 5H17.5352L15.8321 2.4453C15.6466 2.1671 15.3344 2 15 2H9Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<CameraOffIcon /> should render CameraOffIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/CastIcon/CastIcon.native.test.tsx b/packages/blade/src/components/Icons/CastIcon/CastIcon.native.test.tsx
index b98cb0a36c7..4b4bcd1da12 100644
--- a/packages/blade/src/components/Icons/CastIcon/CastIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CastIcon/CastIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CastIcon />', () => {
   it('should render CastIcon', () => {
     const renderTree = renderWithTheme(
-      <CastIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CastIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CastIcon/CastIcon.web.test.tsx b/packages/blade/src/components/Icons/CastIcon/CastIcon.web.test.tsx
index 5a28154f82f..792ce46a365 100644
--- a/packages/blade/src/components/Icons/CastIcon/CastIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CastIcon/CastIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CastIcon />', () => {
   it('should render CastIcon', () => {
     const { container } = renderWithTheme(
-      <CastIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CastIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.native.test.tsx.snap
index 93dd6a58b54..554230c9a59 100644
--- a/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CastIcon /> should render CastIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3.99995 5C3.44767 5 2.99995 5.44772 2.99995 6V8C2.99995 8.55228 2.55224 9 1.99995 9C1.44767 9 0.999953 8.55228 0.999953 8V6C0.999953 4.34315 2.3431 3 3.99995 3H20C21.6568 3 23 4.34315 23 6V18C23 19.6569 21.6568 21 20 21H14C13.4477 21 13 20.5523 13 20C13 19.4477 13.4477 19 14 19H20C20.5522 19 21 18.5523 21 18V6C21 5.44772 20.5522 5 20 5H3.99995ZM1.00608 11.9395C1.06713 11.3906 1.56159 10.9951 2.11049 11.0561C6.75811 11.573 10.4269 15.2418 10.9438 19.8895C11.0049 20.4384 10.6094 20.9328 10.0605 20.9939C9.51159 21.0549 9.01713 20.6594 8.95608 20.1105C8.54255 16.3924 5.60751 13.4574 1.88941 13.0439C1.34051 12.9828 0.945032 12.4884 1.00608 11.9395ZM1.02012 15.9002C1.13049 15.359 1.65864 15.0098 2.19978 15.1202C4.55693 15.6009 6.39906 17.443 6.87978 19.8002C6.99015 20.3413 6.64093 20.8695 6.09978 20.9798C5.55864 21.0902 5.03049 20.741 4.92012 20.1998C4.59964 18.6284 3.37155 17.4003 1.80012 17.0798C1.25898 16.9695 0.909759 16.4413 1.02012 15.9002Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.web.test.tsx.snap
index f671e2c2bd8..92b80019c51 100644
--- a/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<CastIcon /> should render CastIcon 1`] = `
       clip-rule="evenodd"
       d="M3.99995 5C3.44767 5 2.99995 5.44772 2.99995 6V8C2.99995 8.55228 2.55224 9 1.99995 9C1.44767 9 0.999953 8.55228 0.999953 8V6C0.999953 4.34315 2.3431 3 3.99995 3H20C21.6568 3 23 4.34315 23 6V18C23 19.6569 21.6568 21 20 21H14C13.4477 21 13 20.5523 13 20C13 19.4477 13.4477 19 14 19H20C20.5522 19 21 18.5523 21 18V6C21 5.44772 20.5522 5 20 5H3.99995ZM1.00608 11.9395C1.06713 11.3906 1.56159 10.9951 2.11049 11.0561C6.75811 11.573 10.4269 15.2418 10.9438 19.8895C11.0049 20.4384 10.6094 20.9328 10.0605 20.9939C9.51159 21.0549 9.01713 20.6594 8.95608 20.1105C8.54255 16.3924 5.60751 13.4574 1.88941 13.0439C1.34051 12.9828 0.945032 12.4884 1.00608 11.9395ZM1.02012 15.9002C1.13049 15.359 1.65864 15.0098 2.19978 15.1202C4.55693 15.6009 6.39906 17.443 6.87978 19.8002C6.99015 20.3413 6.64093 20.8695 6.09978 20.9798C5.55864 21.0902 5.03049 20.741 4.92012 20.1998C4.59964 18.6284 3.37155 17.4003 1.80012 17.0798C1.25898 16.9695 0.909759 16.4413 1.02012 15.9002Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CheckCircleIcon/CheckCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/CheckCircleIcon/CheckCircleIcon.native.test.tsx
index 7d5b1a879d8..90a77e878e0 100644
--- a/packages/blade/src/components/Icons/CheckCircleIcon/CheckCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CheckCircleIcon/CheckCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CheckCircleIcon />', () => {
   it('should render CheckCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <CheckCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CheckCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CheckCircleIcon/CheckCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/CheckCircleIcon/CheckCircleIcon.web.test.tsx
index f6899564888..551bc0115db 100644
--- a/packages/blade/src/components/Icons/CheckCircleIcon/CheckCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CheckCircleIcon/CheckCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CheckCircleIcon />', () => {
   it('should render CheckCircleIcon', () => {
     const { container } = renderWithTheme(
-      <CheckCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CheckCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.native.test.tsx.snap
index 2ce015e508d..3f74c8be5bf 100644
--- a/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<CheckCircleIcon /> should render CheckCircleIcon 1`] = `
       >
         <RNSVGPath
           d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<CheckCircleIcon /> should render CheckCircleIcon 1`] = `
         />
         <RNSVGPath
           d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
diff --git a/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.web.test.tsx.snap
index 993a612b544..9b65d8e5a50 100644
--- a/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.web.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`<CheckCircleIcon /> should render CheckCircleIcon 1`] = `
       <path
         d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
diff --git a/packages/blade/src/components/Icons/CheckIcon/CheckIcon.native.test.tsx b/packages/blade/src/components/Icons/CheckIcon/CheckIcon.native.test.tsx
index 5579f436497..96b369b5c0e 100644
--- a/packages/blade/src/components/Icons/CheckIcon/CheckIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CheckIcon/CheckIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CheckIcon />', () => {
   it('should render CheckIcon', () => {
     const renderTree = renderWithTheme(
-      <CheckIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CheckIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CheckIcon/CheckIcon.web.test.tsx b/packages/blade/src/components/Icons/CheckIcon/CheckIcon.web.test.tsx
index 67d12b61f22..0fcd10f8e25 100644
--- a/packages/blade/src/components/Icons/CheckIcon/CheckIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CheckIcon/CheckIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CheckIcon />', () => {
   it('should render CheckIcon', () => {
     const { container } = renderWithTheme(
-      <CheckIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CheckIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.native.test.tsx.snap
index 4775337d594..5bf06e55f93 100644
--- a/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CheckIcon /> should render CheckIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.web.test.tsx.snap
index 2cc30cbc5d8..72c05716bde 100644
--- a/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<CheckIcon /> should render CheckIcon 1`] = `
       clip-rule="evenodd"
       d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CheckSquareIcon/CheckSquareIcon.native.test.tsx b/packages/blade/src/components/Icons/CheckSquareIcon/CheckSquareIcon.native.test.tsx
index 75475a43565..d14789b26a9 100644
--- a/packages/blade/src/components/Icons/CheckSquareIcon/CheckSquareIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CheckSquareIcon/CheckSquareIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CheckSquareIcon />', () => {
   it('should render CheckSquareIcon', () => {
     const renderTree = renderWithTheme(
-      <CheckSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CheckSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CheckSquareIcon/CheckSquareIcon.web.test.tsx b/packages/blade/src/components/Icons/CheckSquareIcon/CheckSquareIcon.web.test.tsx
index fd676038601..145687893b1 100644
--- a/packages/blade/src/components/Icons/CheckSquareIcon/CheckSquareIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CheckSquareIcon/CheckSquareIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CheckSquareIcon />', () => {
   it('should render CheckSquareIcon', () => {
     const { container } = renderWithTheme(
-      <CheckSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CheckSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.native.test.tsx.snap
index 47780a52e62..bd97193e50c 100644
--- a/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CheckSquareIcon /> should render CheckSquareIcon 1`] = `
     >
       <RNSVGPath
         d="M3 5C3 4.44772 3.44772 4 4 4H15C15.5523 4 16 3.55228 16 3C16 2.44772 15.5523 2 15 2H4C2.34315 2 1 3.34315 1 5V19C1 20.6569 2.34315 22 4 22H18C19.6569 22 21 20.6569 21 19V12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V19C19 19.5523 18.5523 20 18 20H4C3.44772 20 3 19.5523 3 19V5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<CheckSquareIcon /> should render CheckSquareIcon 1`] = `
       />
       <RNSVGPath
         d="M11.7071 14.7071L22.7071 3.70711C23.0976 3.31658 23.0976 2.68342 22.7071 2.29289C22.3166 1.90237 21.6834 1.90237 21.2929 2.29289L11 12.5858L8.70711 10.2929C8.31658 9.90237 7.68342 9.90237 7.29289 10.2929C6.90237 10.6834 6.90237 11.3166 7.29289 11.7071L10.2929 14.7071C10.6834 15.0976 11.3166 15.0976 11.7071 14.7071Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.web.test.tsx.snap
index 964f14692b2..dfa61937e6a 100644
--- a/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<CheckSquareIcon /> should render CheckSquareIcon 1`] = `
     <path
       d="M3 5C3 4.44772 3.44772 4 4 4H15C15.5523 4 16 3.55228 16 3C16 2.44772 15.5523 2 15 2H4C2.34315 2 1 3.34315 1 5V19C1 20.6569 2.34315 22 4 22H18C19.6569 22 21 20.6569 21 19V12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V19C19 19.5523 18.5523 20 18 20H4C3.44772 20 3 19.5523 3 19V5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M11.7071 14.7071L22.7071 3.70711C23.0976 3.31658 23.0976 2.68342 22.7071 2.29289C22.3166 1.90237 21.6834 1.90237 21.2929 2.29289L11 12.5858L8.70711 10.2929C8.31658 9.90237 7.68342 9.90237 7.29289 10.2929C6.90237 10.6834 6.90237 11.3166 7.29289 11.7071L10.2929 14.7071C10.6834 15.0976 11.3166 15.0976 11.7071 14.7071Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ChevronDownIcon/ChevronDownIcon.native.test.tsx b/packages/blade/src/components/Icons/ChevronDownIcon/ChevronDownIcon.native.test.tsx
index 6395e620297..43938a858df 100644
--- a/packages/blade/src/components/Icons/ChevronDownIcon/ChevronDownIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronDownIcon/ChevronDownIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ChevronDownIcon />', () => {
   it('should render ChevronDownIcon', () => {
     const renderTree = renderWithTheme(
-      <ChevronDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronDownIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronDownIcon/ChevronDownIcon.web.test.tsx b/packages/blade/src/components/Icons/ChevronDownIcon/ChevronDownIcon.web.test.tsx
index 3f1d24dbdad..a919347c031 100644
--- a/packages/blade/src/components/Icons/ChevronDownIcon/ChevronDownIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronDownIcon/ChevronDownIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ChevronDownIcon />', () => {
   it('should render ChevronDownIcon', () => {
     const { container } = renderWithTheme(
-      <ChevronDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronDownIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.native.test.tsx.snap
index 7b2b6442402..663c3ed01be 100644
--- a/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ChevronDownIcon /> should render ChevronDownIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.web.test.tsx.snap
index e7b7fc7d61b..24bead46d25 100644
--- a/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ChevronDownIcon /> should render ChevronDownIcon 1`] = `
       clip-rule="evenodd"
       d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ChevronLeftIcon/ChevronLeftIcon.native.test.tsx b/packages/blade/src/components/Icons/ChevronLeftIcon/ChevronLeftIcon.native.test.tsx
index ef290bdfb7f..3c5f42fff2a 100644
--- a/packages/blade/src/components/Icons/ChevronLeftIcon/ChevronLeftIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronLeftIcon/ChevronLeftIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ChevronLeftIcon />', () => {
   it('should render ChevronLeftIcon', () => {
     const renderTree = renderWithTheme(
-      <ChevronLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronLeftIcon/ChevronLeftIcon.web.test.tsx b/packages/blade/src/components/Icons/ChevronLeftIcon/ChevronLeftIcon.web.test.tsx
index 6b9cf80da8d..096cb28d4cc 100644
--- a/packages/blade/src/components/Icons/ChevronLeftIcon/ChevronLeftIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronLeftIcon/ChevronLeftIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ChevronLeftIcon />', () => {
   it('should render ChevronLeftIcon', () => {
     const { container } = renderWithTheme(
-      <ChevronLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.native.test.tsx.snap
index ea100cd7910..9d79d1dee9e 100644
--- a/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ChevronLeftIcon /> should render ChevronLeftIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.web.test.tsx.snap
index 0c998ce8c0a..016955fd489 100644
--- a/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ChevronLeftIcon /> should render ChevronLeftIcon 1`] = `
       clip-rule="evenodd"
       d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ChevronRightIcon/ChevronRightIcon.native.test.tsx b/packages/blade/src/components/Icons/ChevronRightIcon/ChevronRightIcon.native.test.tsx
index 497568e0f66..893434d8fec 100644
--- a/packages/blade/src/components/Icons/ChevronRightIcon/ChevronRightIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronRightIcon/ChevronRightIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ChevronRightIcon />', () => {
   it('should render ChevronRightIcon', () => {
     const renderTree = renderWithTheme(
-      <ChevronRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronRightIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronRightIcon/ChevronRightIcon.web.test.tsx b/packages/blade/src/components/Icons/ChevronRightIcon/ChevronRightIcon.web.test.tsx
index 42de94bb6b9..49b92895928 100644
--- a/packages/blade/src/components/Icons/ChevronRightIcon/ChevronRightIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronRightIcon/ChevronRightIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ChevronRightIcon />', () => {
   it('should render ChevronRightIcon', () => {
     const { container } = renderWithTheme(
-      <ChevronRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronRightIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.native.test.tsx.snap
index 41d4b311f99..6f2fb22c409 100644
--- a/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ChevronRightIcon /> should render ChevronRightIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.web.test.tsx.snap
index bcb8747bc82..120510d8218 100644
--- a/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ChevronRightIcon /> should render ChevronRightIcon 1`] = `
       clip-rule="evenodd"
       d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ChevronUpIcon/ChevronUpIcon.native.test.tsx b/packages/blade/src/components/Icons/ChevronUpIcon/ChevronUpIcon.native.test.tsx
index 1986ad16e12..92956ef071f 100644
--- a/packages/blade/src/components/Icons/ChevronUpIcon/ChevronUpIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronUpIcon/ChevronUpIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ChevronUpIcon />', () => {
   it('should render ChevronUpIcon', () => {
     const renderTree = renderWithTheme(
-      <ChevronUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronUpIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronUpIcon/ChevronUpIcon.web.test.tsx b/packages/blade/src/components/Icons/ChevronUpIcon/ChevronUpIcon.web.test.tsx
index 6959fc98764..4312a3dbde0 100644
--- a/packages/blade/src/components/Icons/ChevronUpIcon/ChevronUpIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronUpIcon/ChevronUpIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ChevronUpIcon />', () => {
   it('should render ChevronUpIcon', () => {
     const { container } = renderWithTheme(
-      <ChevronUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronUpIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.native.test.tsx.snap
index 3e6918bdba4..8a183fd8187 100644
--- a/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ChevronUpIcon /> should render ChevronUpIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.web.test.tsx.snap
index f46534c4efe..d7165b5aef4 100644
--- a/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ChevronUpIcon /> should render ChevronUpIcon 1`] = `
       clip-rule="evenodd"
       d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ChevronsDownIcon/ChevronsDownIcon.native.test.tsx b/packages/blade/src/components/Icons/ChevronsDownIcon/ChevronsDownIcon.native.test.tsx
index 5c5b6fff984..905b93b116b 100644
--- a/packages/blade/src/components/Icons/ChevronsDownIcon/ChevronsDownIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronsDownIcon/ChevronsDownIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ChevronsDownIcon />', () => {
   it('should render ChevronsDownIcon', () => {
     const renderTree = renderWithTheme(
-      <ChevronsDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronsDownIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronsDownIcon/ChevronsDownIcon.web.test.tsx b/packages/blade/src/components/Icons/ChevronsDownIcon/ChevronsDownIcon.web.test.tsx
index 4a3799cb6b5..894192e4527 100644
--- a/packages/blade/src/components/Icons/ChevronsDownIcon/ChevronsDownIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronsDownIcon/ChevronsDownIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ChevronsDownIcon />', () => {
   it('should render ChevronsDownIcon', () => {
     const { container } = renderWithTheme(
-      <ChevronsDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronsDownIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.native.test.tsx.snap
index 177be455c5d..d4caaa97cb2 100644
--- a/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ChevronsDownIcon /> should render ChevronsDownIcon 1`] = `
     >
       <RNSVGPath
         d="M7.70711 5.29289C7.31658 4.90237 6.68342 4.90237 6.29289 5.29289C5.90237 5.68342 5.90237 6.31658 6.29289 6.70711L11.2929 11.7071C11.6834 12.0976 12.3166 12.0976 12.7071 11.7071L17.7071 6.70711C18.0976 6.31658 18.0976 5.68342 17.7071 5.29289C17.3166 4.90237 16.6834 4.90237 16.2929 5.29289L12 9.58579L7.70711 5.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<ChevronsDownIcon /> should render ChevronsDownIcon 1`] = `
       />
       <RNSVGPath
         d="M7.70711 12.2929C7.31658 11.9024 6.68342 11.9024 6.29289 12.2929C5.90237 12.6834 5.90237 13.3166 6.29289 13.7071L11.2929 18.7071C11.6834 19.0976 12.3166 19.0976 12.7071 18.7071L17.7071 13.7071C18.0976 13.3166 18.0976 12.6834 17.7071 12.2929C17.3166 11.9024 16.6834 11.9024 16.2929 12.2929L12 16.5858L7.70711 12.2929Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.web.test.tsx.snap
index 5638e09a600..8ecf51cac12 100644
--- a/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<ChevronsDownIcon /> should render ChevronsDownIcon 1`] = `
     <path
       d="M7.70711 5.29289C7.31658 4.90237 6.68342 4.90237 6.29289 5.29289C5.90237 5.68342 5.90237 6.31658 6.29289 6.70711L11.2929 11.7071C11.6834 12.0976 12.3166 12.0976 12.7071 11.7071L17.7071 6.70711C18.0976 6.31658 18.0976 5.68342 17.7071 5.29289C17.3166 4.90237 16.6834 4.90237 16.2929 5.29289L12 9.58579L7.70711 5.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M7.70711 12.2929C7.31658 11.9024 6.68342 11.9024 6.29289 12.2929C5.90237 12.6834 5.90237 13.3166 6.29289 13.7071L11.2929 18.7071C11.6834 19.0976 12.3166 19.0976 12.7071 18.7071L17.7071 13.7071C18.0976 13.3166 18.0976 12.6834 17.7071 12.2929C17.3166 11.9024 16.6834 11.9024 16.2929 12.2929L12 16.5858L7.70711 12.2929Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ChevronsLeftIcon/ChevronsLeftIcon.native.test.tsx b/packages/blade/src/components/Icons/ChevronsLeftIcon/ChevronsLeftIcon.native.test.tsx
index fda45b5662e..be1444e1bd9 100644
--- a/packages/blade/src/components/Icons/ChevronsLeftIcon/ChevronsLeftIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronsLeftIcon/ChevronsLeftIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ChevronsLeftIcon />', () => {
   it('should render ChevronsLeftIcon', () => {
     const renderTree = renderWithTheme(
-      <ChevronsLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronsLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronsLeftIcon/ChevronsLeftIcon.web.test.tsx b/packages/blade/src/components/Icons/ChevronsLeftIcon/ChevronsLeftIcon.web.test.tsx
index ec4485f9e0f..0e6ca8aa52b 100644
--- a/packages/blade/src/components/Icons/ChevronsLeftIcon/ChevronsLeftIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronsLeftIcon/ChevronsLeftIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ChevronsLeftIcon />', () => {
   it('should render ChevronsLeftIcon', () => {
     const { container } = renderWithTheme(
-      <ChevronsLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronsLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.native.test.tsx.snap
index ada19c4fba6..f5da003490b 100644
--- a/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ChevronsLeftIcon /> should render ChevronsLeftIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.7071 7.70711C12.0976 7.31658 12.0976 6.68342 11.7071 6.29289C11.3166 5.90237 10.6834 5.90237 10.2929 6.29289L5.29289 11.2929C4.90237 11.6834 4.90237 12.3166 5.29289 12.7071L10.2929 17.7071C10.6834 18.0976 11.3166 18.0976 11.7071 17.7071C12.0976 17.3166 12.0976 16.6834 11.7071 16.2929L7.41421 12L11.7071 7.70711ZM18.7071 7.70711C19.0976 7.31658 19.0976 6.68342 18.7071 6.29289C18.3166 5.90237 17.6834 5.90237 17.2929 6.29289L12.2929 11.2929C11.9024 11.6834 11.9024 12.3166 12.2929 12.7071L17.2929 17.7071C17.6834 18.0976 18.3166 18.0976 18.7071 17.7071C19.0976 17.3166 19.0976 16.6834 18.7071 16.2929L14.4142 12L18.7071 7.70711Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.web.test.tsx.snap
index 40b339d4a9e..a7dee07f2bc 100644
--- a/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ChevronsLeftIcon /> should render ChevronsLeftIcon 1`] = `
       clip-rule="evenodd"
       d="M11.7071 7.70711C12.0976 7.31658 12.0976 6.68342 11.7071 6.29289C11.3166 5.90237 10.6834 5.90237 10.2929 6.29289L5.29289 11.2929C4.90237 11.6834 4.90237 12.3166 5.29289 12.7071L10.2929 17.7071C10.6834 18.0976 11.3166 18.0976 11.7071 17.7071C12.0976 17.3166 12.0976 16.6834 11.7071 16.2929L7.41421 12L11.7071 7.70711ZM18.7071 7.70711C19.0976 7.31658 19.0976 6.68342 18.7071 6.29289C18.3166 5.90237 17.6834 5.90237 17.2929 6.29289L12.2929 11.2929C11.9024 11.6834 11.9024 12.3166 12.2929 12.7071L17.2929 17.7071C17.6834 18.0976 18.3166 18.0976 18.7071 17.7071C19.0976 17.3166 19.0976 16.6834 18.7071 16.2929L14.4142 12L18.7071 7.70711Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ChevronsRightIcon/ChevronsRightIcon.native.test.tsx b/packages/blade/src/components/Icons/ChevronsRightIcon/ChevronsRightIcon.native.test.tsx
index a7bf13c8131..ad4a466be12 100644
--- a/packages/blade/src/components/Icons/ChevronsRightIcon/ChevronsRightIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronsRightIcon/ChevronsRightIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ChevronsRightIcon />', () => {
   it('should render ChevronsRightIcon', () => {
     const renderTree = renderWithTheme(
-      <ChevronsRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronsRightIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronsRightIcon/ChevronsRightIcon.web.test.tsx b/packages/blade/src/components/Icons/ChevronsRightIcon/ChevronsRightIcon.web.test.tsx
index 437620d7803..a971fb8abf6 100644
--- a/packages/blade/src/components/Icons/ChevronsRightIcon/ChevronsRightIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronsRightIcon/ChevronsRightIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ChevronsRightIcon />', () => {
   it('should render ChevronsRightIcon', () => {
     const { container } = renderWithTheme(
-      <ChevronsRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronsRightIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.native.test.tsx.snap
index 1383535db56..770c9f3f5e7 100644
--- a/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ChevronsRightIcon /> should render ChevronsRightIcon 1`] = `
     >
       <RNSVGPath
         d="M6.70711 6.29289C6.31658 5.90237 5.68342 5.90237 5.29289 6.29289C4.90237 6.68342 4.90237 7.31658 5.29289 7.70711L9.58579 12L5.29289 16.2929C4.90237 16.6834 4.90237 17.3166 5.29289 17.7071C5.68342 18.0976 6.31658 18.0976 6.70711 17.7071L11.7071 12.7071C12.0976 12.3166 12.0976 11.6834 11.7071 11.2929L6.70711 6.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<ChevronsRightIcon /> should render ChevronsRightIcon 1`] = `
       />
       <RNSVGPath
         d="M13.7071 6.29289C13.3166 5.90237 12.6834 5.90237 12.2929 6.29289C11.9024 6.68342 11.9024 7.31658 12.2929 7.70711L16.5858 12L12.2929 16.2929C11.9024 16.6834 11.9024 17.3166 12.2929 17.7071C12.6834 18.0976 13.3166 18.0976 13.7071 17.7071L18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L13.7071 6.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.web.test.tsx.snap
index 9e143298df8..eab5911e975 100644
--- a/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<ChevronsRightIcon /> should render ChevronsRightIcon 1`] = `
     <path
       d="M6.70711 6.29289C6.31658 5.90237 5.68342 5.90237 5.29289 6.29289C4.90237 6.68342 4.90237 7.31658 5.29289 7.70711L9.58579 12L5.29289 16.2929C4.90237 16.6834 4.90237 17.3166 5.29289 17.7071C5.68342 18.0976 6.31658 18.0976 6.70711 17.7071L11.7071 12.7071C12.0976 12.3166 12.0976 11.6834 11.7071 11.2929L6.70711 6.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M13.7071 6.29289C13.3166 5.90237 12.6834 5.90237 12.2929 6.29289C11.9024 6.68342 11.9024 7.31658 12.2929 7.70711L16.5858 12L12.2929 16.2929C11.9024 16.6834 11.9024 17.3166 12.2929 17.7071C12.6834 18.0976 13.3166 18.0976 13.7071 17.7071L18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L13.7071 6.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ChevronsUpIcon/ChevronsUpIcon.native.test.tsx b/packages/blade/src/components/Icons/ChevronsUpIcon/ChevronsUpIcon.native.test.tsx
index 80aaad53f61..c073ec52680 100644
--- a/packages/blade/src/components/Icons/ChevronsUpIcon/ChevronsUpIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronsUpIcon/ChevronsUpIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ChevronsUpIcon />', () => {
   it('should render ChevronsUpIcon', () => {
     const renderTree = renderWithTheme(
-      <ChevronsUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronsUpIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronsUpIcon/ChevronsUpIcon.web.test.tsx b/packages/blade/src/components/Icons/ChevronsUpIcon/ChevronsUpIcon.web.test.tsx
index f7c8d534fef..d7428272f5b 100644
--- a/packages/blade/src/components/Icons/ChevronsUpIcon/ChevronsUpIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ChevronsUpIcon/ChevronsUpIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ChevronsUpIcon />', () => {
   it('should render ChevronsUpIcon', () => {
     const { container } = renderWithTheme(
-      <ChevronsUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChevronsUpIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.native.test.tsx.snap
index 7bbd6dd3c05..5fafc608455 100644
--- a/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ChevronsUpIcon /> should render ChevronsUpIcon 1`] = `
     >
       <RNSVGPath
         d="M12.7071 5.29289C12.3166 4.90237 11.6834 4.90237 11.2929 5.29289L6.29289 10.2929C5.90237 10.6834 5.90237 11.3166 6.29289 11.7071C6.68342 12.0976 7.31658 12.0976 7.70711 11.7071L12 7.41421L16.2929 11.7071C16.6834 12.0976 17.3166 12.0976 17.7071 11.7071C18.0976 11.3166 18.0976 10.6834 17.7071 10.2929L12.7071 5.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<ChevronsUpIcon /> should render ChevronsUpIcon 1`] = `
       />
       <RNSVGPath
         d="M17.7071 17.2929L12.7071 12.2929C12.3166 11.9024 11.6834 11.9024 11.2929 12.2929L6.29289 17.2929C5.90237 17.6834 5.90237 18.3166 6.29289 18.7071C6.68342 19.0976 7.31658 19.0976 7.70711 18.7071L12 14.4142L16.2929 18.7071C16.6834 19.0976 17.3166 19.0976 17.7071 18.7071C18.0976 18.3166 18.0976 17.6834 17.7071 17.2929Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.web.test.tsx.snap
index f269876ad53..7fef631f708 100644
--- a/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<ChevronsUpIcon /> should render ChevronsUpIcon 1`] = `
     <path
       d="M12.7071 5.29289C12.3166 4.90237 11.6834 4.90237 11.2929 5.29289L6.29289 10.2929C5.90237 10.6834 5.90237 11.3166 6.29289 11.7071C6.68342 12.0976 7.31658 12.0976 7.70711 11.7071L12 7.41421L16.2929 11.7071C16.6834 12.0976 17.3166 12.0976 17.7071 11.7071C18.0976 11.3166 18.0976 10.6834 17.7071 10.2929L12.7071 5.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M17.7071 17.2929L12.7071 12.2929C12.3166 11.9024 11.6834 11.9024 11.2929 12.2929L6.29289 17.2929C5.90237 17.6834 5.90237 18.3166 6.29289 18.7071C6.68342 19.0976 7.31658 19.0976 7.70711 18.7071L12 14.4142L16.2929 18.7071C16.6834 19.0976 17.3166 19.0976 17.7071 18.7071C18.0976 18.3166 18.0976 17.6834 17.7071 17.2929Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ChromeIcon/ChromeIcon.native.test.tsx b/packages/blade/src/components/Icons/ChromeIcon/ChromeIcon.native.test.tsx
index a90fa176aa9..08b1c719ff7 100644
--- a/packages/blade/src/components/Icons/ChromeIcon/ChromeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ChromeIcon/ChromeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ChromeIcon />', () => {
   it('should render ChromeIcon', () => {
     const renderTree = renderWithTheme(
-      <ChromeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChromeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChromeIcon/ChromeIcon.web.test.tsx b/packages/blade/src/components/Icons/ChromeIcon/ChromeIcon.web.test.tsx
index 8a95901ac5e..10014a1cfe1 100644
--- a/packages/blade/src/components/Icons/ChromeIcon/ChromeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ChromeIcon/ChromeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ChromeIcon />', () => {
   it('should render ChromeIcon', () => {
     const { container } = renderWithTheme(
-      <ChromeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ChromeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.native.test.tsx.snap
index e023fbaa3fc..c161cfdc3a9 100644
--- a/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ChromeIcon /> should render ChromeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 9.58672 1.77714 7.35494 3.09482 5.54129C3.12632 5.48923 3.16276 5.43979 3.20392 5.39371C5.21106 2.72551 8.40402 1 12 1C16.4881 1 20.3484 3.68785 22.059 7.54165C22.0787 7.57978 22.096 7.61934 22.1108 7.66014C22.683 8.99165 23 10.4588 23 12C23 18.0751 18.0751 23 12 23C11.6073 23 11.2193 22.9794 10.8372 22.9393C10.7918 22.9374 10.7463 22.9323 10.7011 22.9241C5.23811 22.2815 1 17.6357 1 12ZM12.5876 20.9811C17.2843 20.6785 21 16.7732 21 12C21 10.9481 20.8195 9.93834 20.4879 9H16.0004C16.6281 9.83566 17 10.8744 17 12C17 12.9831 16.7162 13.9 16.2262 14.6732L12.5876 20.9811ZM12.5954 16.9649L10.3544 20.8499C6.16969 20.0767 3 16.4085 3 12C3 10.5702 3.3334 9.21832 3.92671 8.01779L7.56725 14.3154C8.40246 15.9111 10.0741 17 12 17C12.2015 17 12.4001 16.9881 12.5954 16.9649ZM14.6363 13.4329C14.6214 13.4546 14.6072 13.4771 14.5938 13.5003L14.5195 13.6293C13.9849 14.4542 13.0562 15 12 15C10.918 15 9.96981 14.4272 9.44208 13.5683C9.43095 13.5451 9.41884 13.5222 9.40574 13.4995L9.32645 13.3623C9.11772 12.9535 9 12.4905 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 12.519 14.8682 13.0071 14.6363 13.4329ZM5.15842 6.15228L7.40178 10.033C8.16573 8.24947 9.93695 7 12 7H19.4845C17.8699 4.58803 15.1204 3 12 3C9.26175 3 6.80911 4.22287 5.15842 6.15228Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.web.test.tsx.snap
index 44425577d37..a80483db1ae 100644
--- a/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ChromeIcon /> should render ChromeIcon 1`] = `
       clip-rule="evenodd"
       d="M1 12C1 9.58672 1.77714 7.35494 3.09482 5.54129C3.12632 5.48923 3.16276 5.43979 3.20392 5.39371C5.21106 2.72551 8.40402 1 12 1C16.4881 1 20.3484 3.68785 22.059 7.54165C22.0787 7.57978 22.096 7.61934 22.1108 7.66014C22.683 8.99165 23 10.4588 23 12C23 18.0751 18.0751 23 12 23C11.6073 23 11.2193 22.9794 10.8372 22.9393C10.7918 22.9374 10.7463 22.9323 10.7011 22.9241C5.23811 22.2815 1 17.6357 1 12ZM12.5876 20.9811C17.2843 20.6785 21 16.7732 21 12C21 10.9481 20.8195 9.93834 20.4879 9H16.0004C16.6281 9.83566 17 10.8744 17 12C17 12.9831 16.7162 13.9 16.2262 14.6732L12.5876 20.9811ZM12.5954 16.9649L10.3544 20.8499C6.16969 20.0767 3 16.4085 3 12C3 10.5702 3.3334 9.21832 3.92671 8.01779L7.56725 14.3154C8.40246 15.9111 10.0741 17 12 17C12.2015 17 12.4001 16.9881 12.5954 16.9649ZM14.6363 13.4329C14.6214 13.4546 14.6072 13.4771 14.5938 13.5003L14.5195 13.6293C13.9849 14.4542 13.0562 15 12 15C10.918 15 9.96981 14.4272 9.44208 13.5683C9.43095 13.5451 9.41884 13.5222 9.40574 13.4995L9.32645 13.3623C9.11772 12.9535 9 12.4905 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 12.519 14.8682 13.0071 14.6363 13.4329ZM5.15842 6.15228L7.40178 10.033C8.16573 8.24947 9.93695 7 12 7H19.4845C17.8699 4.58803 15.1204 3 12 3C9.26175 3 6.80911 4.22287 5.15842 6.15228Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CircleIcon/CircleIcon.native.test.tsx b/packages/blade/src/components/Icons/CircleIcon/CircleIcon.native.test.tsx
index 506240ba459..772c0850fa6 100644
--- a/packages/blade/src/components/Icons/CircleIcon/CircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CircleIcon/CircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CircleIcon />', () => {
   it('should render CircleIcon', () => {
     const renderTree = renderWithTheme(
-      <CircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CircleIcon/CircleIcon.web.test.tsx b/packages/blade/src/components/Icons/CircleIcon/CircleIcon.web.test.tsx
index a16f33e7ae6..e5d3a9d1964 100644
--- a/packages/blade/src/components/Icons/CircleIcon/CircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CircleIcon/CircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CircleIcon />', () => {
   it('should render CircleIcon', () => {
     const { container } = renderWithTheme(
-      <CircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.native.test.tsx.snap
index bab01824dd5..1aeaf0b5914 100644
--- a/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CircleIcon /> should render CircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.web.test.tsx.snap
index e83ae674eb5..7ba7a84632c 100644
--- a/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<CircleIcon /> should render CircleIcon 1`] = `
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ClipboardIcon/ClipboardIcon.native.test.tsx b/packages/blade/src/components/Icons/ClipboardIcon/ClipboardIcon.native.test.tsx
index e74c9c7be27..f529d741ae8 100644
--- a/packages/blade/src/components/Icons/ClipboardIcon/ClipboardIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ClipboardIcon/ClipboardIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ClipboardIcon />', () => {
   it('should render ClipboardIcon', () => {
     const renderTree = renderWithTheme(
-      <ClipboardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ClipboardIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ClipboardIcon/ClipboardIcon.web.test.tsx b/packages/blade/src/components/Icons/ClipboardIcon/ClipboardIcon.web.test.tsx
index 5d40fddd4c9..cc667c96a57 100644
--- a/packages/blade/src/components/Icons/ClipboardIcon/ClipboardIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ClipboardIcon/ClipboardIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ClipboardIcon />', () => {
   it('should render ClipboardIcon', () => {
     const { container } = renderWithTheme(
-      <ClipboardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ClipboardIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.native.test.tsx.snap
index 902e0df028d..8fcc1b57dea 100644
--- a/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ClipboardIcon /> should render ClipboardIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 1C7.89543 1 7 1.89543 7 3H6C4.34315 3 3 4.34315 3 6V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V6C21 4.34315 19.6569 3 18 3H17C17 1.89543 16.1046 1 15 1H9ZM17 5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5H6C5.44772 5 5 5.44772 5 6V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V6C19 5.44772 18.5523 5 18 5H17ZM9 4V5H15V4V3H9V4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.web.test.tsx.snap
index 4ff5fd49853..f2bc37a714c 100644
--- a/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ClipboardIcon /> should render ClipboardIcon 1`] = `
       clip-rule="evenodd"
       d="M9 1C7.89543 1 7 1.89543 7 3H6C4.34315 3 3 4.34315 3 6V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V6C21 4.34315 19.6569 3 18 3H17C17 1.89543 16.1046 1 15 1H9ZM17 5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5H6C5.44772 5 5 5.44772 5 6V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V6C19 5.44772 18.5523 5 18 5H17ZM9 4V5H15V4V3H9V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ClockIcon/ClockIcon.native.test.tsx b/packages/blade/src/components/Icons/ClockIcon/ClockIcon.native.test.tsx
index d5a2ea979a5..768085509ee 100644
--- a/packages/blade/src/components/Icons/ClockIcon/ClockIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ClockIcon/ClockIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ClockIcon />', () => {
   it('should render ClockIcon', () => {
     const renderTree = renderWithTheme(
-      <ClockIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ClockIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ClockIcon/ClockIcon.web.test.tsx b/packages/blade/src/components/Icons/ClockIcon/ClockIcon.web.test.tsx
index ad401780475..5a3ee18dabd 100644
--- a/packages/blade/src/components/Icons/ClockIcon/ClockIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ClockIcon/ClockIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ClockIcon />', () => {
   it('should render ClockIcon', () => {
     const { container } = renderWithTheme(
-      <ClockIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ClockIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.native.test.tsx.snap
index 3bc3c48805f..3418c5d0a3e 100644
--- a/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ClockIcon /> should render ClockIcon 1`] = `
     >
       <RNSVGPath
         d="M13 6a1 1 0 1 0-2 0v6a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V6Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<ClockIcon /> should render ClockIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1ZM3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.web.test.tsx.snap
index 7dd71ca1309..6290e1783a5 100644
--- a/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<ClockIcon /> should render ClockIcon 1`] = `
     <path
       d="M13 6a1 1 0 1 0-2 0v6a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1ZM3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CloseIcon/CloseIcon.native.test.tsx b/packages/blade/src/components/Icons/CloseIcon/CloseIcon.native.test.tsx
index a549fe8736a..f0bc3f4cbdf 100644
--- a/packages/blade/src/components/Icons/CloseIcon/CloseIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CloseIcon/CloseIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CloseIcon />', () => {
   it('should render CloseIcon', () => {
     const renderTree = renderWithTheme(
-      <CloseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloseIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloseIcon/CloseIcon.web.test.tsx b/packages/blade/src/components/Icons/CloseIcon/CloseIcon.web.test.tsx
index b7a13d0ba64..0ba7c9c76d9 100644
--- a/packages/blade/src/components/Icons/CloseIcon/CloseIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CloseIcon/CloseIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CloseIcon />', () => {
   it('should render CloseIcon', () => {
     const { container } = renderWithTheme(
-      <CloseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloseIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.native.test.tsx.snap
index 0de5d1f7429..991a4a4cd69 100644
--- a/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CloseIcon /> should render CloseIcon 1`] = `
     >
       <RNSVGPath
         d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.web.test.tsx.snap
index 1fb96a80934..a7d87834b61 100644
--- a/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CloseIcon /> should render CloseIcon 1`] = `
     <path
       d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CloudDrizzleIcon/CloudDrizzleIcon.native.test.tsx b/packages/blade/src/components/Icons/CloudDrizzleIcon/CloudDrizzleIcon.native.test.tsx
index ab13b9b606b..07d779493e2 100644
--- a/packages/blade/src/components/Icons/CloudDrizzleIcon/CloudDrizzleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CloudDrizzleIcon/CloudDrizzleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CloudDrizzleIcon />', () => {
   it('should render CloudDrizzleIcon', () => {
     const renderTree = renderWithTheme(
-      <CloudDrizzleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudDrizzleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudDrizzleIcon/CloudDrizzleIcon.web.test.tsx b/packages/blade/src/components/Icons/CloudDrizzleIcon/CloudDrizzleIcon.web.test.tsx
index 3da520ccf76..2fb1cc8c530 100644
--- a/packages/blade/src/components/Icons/CloudDrizzleIcon/CloudDrizzleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CloudDrizzleIcon/CloudDrizzleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CloudDrizzleIcon />', () => {
   it('should render CloudDrizzleIcon', () => {
     const { container } = renderWithTheme(
-      <CloudDrizzleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudDrizzleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.native.test.tsx.snap
index b77b3d71cb1..6dfe7d7365e 100644
--- a/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
       >
         <RNSVGPath
           d="M9.50019 0.0145815C5.59012 -0.205596 1.9865 2.12799 0.587786 5.78596C-0.810924 9.44392 0.316386 13.5865 3.37582 16.0313C3.80727 16.376 4.43653 16.3058 4.7813 15.8743C5.12607 15.4429 5.0558 14.8136 4.62435 14.4688C2.24479 12.5673 1.36799 9.34535 2.45588 6.50026C3.54376 3.65518 6.34658 1.84017 9.38774 2.01142C12.4289 2.18267 15.0102 4.30086 15.7718 7.25009C15.8859 7.69159 16.2841 8.00006 16.7401 8.00006H17.9993C19.8914 8.00247 21.5231 9.33036 21.9098 11.1826C22.2965 13.035 21.3323 14.9049 19.5989 15.6641C19.093 15.8856 18.8625 16.4753 19.0841 16.9812C19.3056 17.4871 19.8954 17.7176 20.4013 17.4961C23.0013 16.3573 24.4476 13.5524 23.8676 10.7739C23.2875 7.99532 20.8397 6.0034 18.0013 6.00006H17.4796C16.2801 2.60323 13.1473 0.219954 9.50019 0.0145815Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
         />
         <RNSVGPath
           d="M8 12.0001C8.55229 12.0001 9 12.4478 9 13.0001V15.0001C9 15.5523 8.55229 16.0001 8 16.0001C7.44772 16.0001 7 15.5523 7 15.0001V13.0001C7 12.4478 7.44772 12.0001 8 12.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -72,7 +72,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
         />
         <RNSVGPath
           d="M8 18.0001C8.55229 18.0001 9 18.4478 9 19.0001V21.0001C9 21.5523 8.55229 22.0001 8 22.0001C7.44772 22.0001 7 21.5523 7 21.0001V19.0001C7 18.4478 7.44772 18.0001 8 18.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -81,7 +81,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
         />
         <RNSVGPath
           d="M17 19.0001C17 18.4478 16.5523 18.0001 16 18.0001C15.4477 18.0001 15 18.4478 15 19.0001V21.0001C15 21.5523 15.4477 22.0001 16 22.0001C16.5523 22.0001 17 21.5523 17 21.0001V19.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -90,7 +90,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
         />
         <RNSVGPath
           d="M16 12.0001C16.5523 12.0001 17 12.4478 17 13.0001V15.0001C17 15.5523 16.5523 16.0001 16 16.0001C15.4477 16.0001 15 15.5523 15 15.0001V13.0001C15 12.4478 15.4477 12.0001 16 12.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -99,7 +99,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
         />
         <RNSVGPath
           d="M13 21.0001C13 20.4478 12.5523 20.0001 12 20.0001C11.4477 20.0001 11 20.4478 11 21.0001V23.0001C11 23.5523 11.4477 24.0001 12 24.0001C12.5523 24.0001 13 23.5523 13 23.0001V21.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -108,7 +108,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
         />
         <RNSVGPath
           d="M12 14.0001C12.5523 14.0001 13 14.4478 13 15.0001V17.0001C13 17.5523 12.5523 18.0001 12 18.0001C11.4477 18.0001 11 17.5523 11 17.0001V15.0001C11 14.4478 11.4477 14.0001 12 14.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -121,7 +121,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
           name="clip0_60_395"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.web.test.tsx.snap
index f671ffd6a62..f832345d286 100644
--- a/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.web.test.tsx.snap
@@ -18,37 +18,37 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
       <path
         d="M9.50019 0.0145815C5.59012 -0.205596 1.9865 2.12799 0.587786 5.78596C-0.810924 9.44392 0.316386 13.5865 3.37582 16.0313C3.80727 16.376 4.43653 16.3058 4.7813 15.8743C5.12607 15.4429 5.0558 14.8136 4.62435 14.4688C2.24479 12.5673 1.36799 9.34535 2.45588 6.50026C3.54376 3.65518 6.34658 1.84017 9.38774 2.01142C12.4289 2.18267 15.0102 4.30086 15.7718 7.25009C15.8859 7.69159 16.2841 8.00006 16.7401 8.00006H17.9993C19.8914 8.00247 21.5231 9.33036 21.9098 11.1826C22.2965 13.035 21.3323 14.9049 19.5989 15.6641C19.093 15.8856 18.8625 16.4753 19.0841 16.9812C19.3056 17.4871 19.8954 17.7176 20.4013 17.4961C23.0013 16.3573 24.4476 13.5524 23.8676 10.7739C23.2875 7.99532 20.8397 6.0034 18.0013 6.00006H17.4796C16.2801 2.60323 13.1473 0.219954 9.50019 0.0145815Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M8 12.0001C8.55229 12.0001 9 12.4478 9 13.0001V15.0001C9 15.5523 8.55229 16.0001 8 16.0001C7.44772 16.0001 7 15.5523 7 15.0001V13.0001C7 12.4478 7.44772 12.0001 8 12.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M8 18.0001C8.55229 18.0001 9 18.4478 9 19.0001V21.0001C9 21.5523 8.55229 22.0001 8 22.0001C7.44772 22.0001 7 21.5523 7 21.0001V19.0001C7 18.4478 7.44772 18.0001 8 18.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M17 19.0001C17 18.4478 16.5523 18.0001 16 18.0001C15.4477 18.0001 15 18.4478 15 19.0001V21.0001C15 21.5523 15.4477 22.0001 16 22.0001C16.5523 22.0001 17 21.5523 17 21.0001V19.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M16 12.0001C16.5523 12.0001 17 12.4478 17 13.0001V15.0001C17 15.5523 16.5523 16.0001 16 16.0001C15.4477 16.0001 15 15.5523 15 15.0001V13.0001C15 12.4478 15.4477 12.0001 16 12.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M13 21.0001C13 20.4478 12.5523 20.0001 12 20.0001C11.4477 20.0001 11 20.4478 11 21.0001V23.0001C11 23.5523 11.4477 24.0001 12 24.0001C12.5523 24.0001 13 23.5523 13 23.0001V21.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M12 14.0001C12.5523 14.0001 13 14.4478 13 15.0001V17.0001C13 17.5523 12.5523 18.0001 12 18.0001C11.4477 18.0001 11 17.5523 11 17.0001V15.0001C11 14.4478 11.4477 14.0001 12 14.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -60,7 +60,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/CloudIcon/CloudIcon.native.test.tsx b/packages/blade/src/components/Icons/CloudIcon/CloudIcon.native.test.tsx
index 41a8fd2c9df..b472559d890 100644
--- a/packages/blade/src/components/Icons/CloudIcon/CloudIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CloudIcon/CloudIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CloudIcon />', () => {
   it('should render CloudIcon', () => {
     const renderTree = renderWithTheme(
-      <CloudIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudIcon/CloudIcon.web.test.tsx b/packages/blade/src/components/Icons/CloudIcon/CloudIcon.web.test.tsx
index 9d7319b3d34..102734b00ee 100644
--- a/packages/blade/src/components/Icons/CloudIcon/CloudIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CloudIcon/CloudIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CloudIcon />', () => {
   it('should render CloudIcon', () => {
     const { container } = renderWithTheme(
-      <CloudIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.native.test.tsx.snap
index e8c58cca4bd..55984766002 100644
--- a/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<CloudIcon /> should render CloudIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M17.49 9.03011C16.0571 4.92061 11.8447 2.38572 7.48287 3.12864C2.87457 3.91353 -0.365082 8.09555 0.0254645 12.7528C0.117768 14.1386 0.66873 16.1707 2.04111 17.8807C3.44928 19.6352 5.68719 21.0009 8.99998 21.0009H18C21.3137 21.0009 24 18.3146 24 15.0009C24 12.793 22.9167 11.2454 21.45 10.2919C20.2557 9.51543 18.8182 9.13309 17.49 9.03011ZM15.7717 10.2509C14.8621 6.72803 11.4054 4.48935 7.81868 5.10024C4.23196 5.71114 1.71122 8.96791 2.01911 12.5932L2.02058 12.6128C2.08934 13.6678 2.52767 15.2916 3.60089 16.6288C4.64159 17.9255 6.31278 19.0009 8.99998 19.0009H18C20.2091 19.0009 22 17.21 22 15.0009C22 13.5538 21.3332 12.6014 20.3599 11.9687C19.3434 11.3078 17.9824 11.0009 16.74 11.0009C16.284 11.0009 15.8857 10.6924 15.7717 10.2509Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<CloudIcon /> should render CloudIcon 1`] = `
           name="clip0_60_394"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.web.test.tsx.snap
index 0133561b40c..3d41782608d 100644
--- a/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<CloudIcon /> should render CloudIcon 1`] = `
         clip-rule="evenodd"
         d="M17.49 9.03011C16.0571 4.92061 11.8447 2.38572 7.48287 3.12864C2.87457 3.91353 -0.365082 8.09555 0.0254645 12.7528C0.117768 14.1386 0.66873 16.1707 2.04111 17.8807C3.44928 19.6352 5.68719 21.0009 8.99998 21.0009H18C21.3137 21.0009 24 18.3146 24 15.0009C24 12.793 22.9167 11.2454 21.45 10.2919C20.2557 9.51543 18.8182 9.13309 17.49 9.03011ZM15.7717 10.2509C14.8621 6.72803 11.4054 4.48935 7.81868 5.10024C4.23196 5.71114 1.71122 8.96791 2.01911 12.5932L2.02058 12.6128C2.08934 13.6678 2.52767 15.2916 3.60089 16.6288C4.64159 17.9255 6.31278 19.0009 8.99998 19.0009H18C20.2091 19.0009 22 17.21 22 15.0009C22 13.5538 21.3332 12.6014 20.3599 11.9687C19.3434 11.3078 17.9824 11.0009 16.74 11.0009C16.284 11.0009 15.8857 10.6924 15.7717 10.2509Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<CloudIcon /> should render CloudIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/CloudLightningIcon/CloudLightningIcon.native.test.tsx b/packages/blade/src/components/Icons/CloudLightningIcon/CloudLightningIcon.native.test.tsx
index ae3681e9c15..73256462b15 100644
--- a/packages/blade/src/components/Icons/CloudLightningIcon/CloudLightningIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CloudLightningIcon/CloudLightningIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CloudLightningIcon />', () => {
   it('should render CloudLightningIcon', () => {
     const renderTree = renderWithTheme(
-      <CloudLightningIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudLightningIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudLightningIcon/CloudLightningIcon.web.test.tsx b/packages/blade/src/components/Icons/CloudLightningIcon/CloudLightningIcon.web.test.tsx
index abd5c76a4e5..64968f45589 100644
--- a/packages/blade/src/components/Icons/CloudLightningIcon/CloudLightningIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CloudLightningIcon/CloudLightningIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CloudLightningIcon />', () => {
   it('should render CloudLightningIcon', () => {
     const { container } = renderWithTheme(
-      <CloudLightningIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudLightningIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.native.test.tsx.snap
index eb18f3871e7..019cd6c214e 100644
--- a/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
       >
         <RNSVGPath
           d="M0.587786 5.78596C1.9865 2.12799 5.59012 -0.205596 9.50019 0.0145815C13.1473 0.219954 16.2801 2.60323 17.4796 6.00006H18.0013C20.8397 6.0034 23.2875 7.99532 23.8676 10.7739C24.4476 13.5524 23.0013 16.3573 20.4013 17.4961C19.8954 17.7176 19.3056 17.4871 19.0841 16.9812C18.8625 16.4753 19.093 15.8856 19.5989 15.6641C21.3323 14.9049 22.2965 13.035 21.9098 11.1826C21.5231 9.33036 19.8914 8.00247 17.9993 8.00006H16.7401C16.2841 8.00006 15.8859 7.69159 15.7718 7.25009C15.0102 4.30086 12.4289 2.18267 9.38774 2.01142C6.34658 1.84017 3.54376 3.65518 2.45588 6.50026C1.36799 9.34535 2.24479 12.5673 4.62435 14.4688C5.0558 14.8136 5.12607 15.4429 4.7813 15.8743C4.43653 16.3058 3.80727 16.376 3.37582 16.0313C0.316386 13.5865 -0.810924 9.44392 0.587786 5.78596Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
         />
         <RNSVGPath
           d="M13.8321 11.5547C14.1384 11.0952 14.0142 10.4743 13.5547 10.168C13.0952 9.86164 12.4743 9.98582 12.168 10.4453L8.16795 16.4453C7.96338 16.7522 7.94431 17.1467 8.11833 17.4719C8.29235 17.7971 8.63121 18 9 18H13.1315L10.168 22.4453C9.8616 22.9049 9.98577 23.5257 10.4453 23.8321C10.9048 24.1384 11.5257 24.0143 11.8321 23.5547L15.8321 17.5547C16.0366 17.2479 16.0557 16.8533 15.8817 16.5282C15.7077 16.203 15.3688 16 15 16H10.8685L13.8321 11.5547Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -76,7 +76,7 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
           name="clip0_60_391"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.web.test.tsx.snap
index 76ebd8d4a2e..fdd43b277bc 100644
--- a/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.web.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
       <path
         d="M0.587786 5.78596C1.9865 2.12799 5.59012 -0.205596 9.50019 0.0145815C13.1473 0.219954 16.2801 2.60323 17.4796 6.00006H18.0013C20.8397 6.0034 23.2875 7.99532 23.8676 10.7739C24.4476 13.5524 23.0013 16.3573 20.4013 17.4961C19.8954 17.7176 19.3056 17.4871 19.0841 16.9812C18.8625 16.4753 19.093 15.8856 19.5989 15.6641C21.3323 14.9049 22.2965 13.035 21.9098 11.1826C21.5231 9.33036 19.8914 8.00247 17.9993 8.00006H16.7401C16.2841 8.00006 15.8859 7.69159 15.7718 7.25009C15.0102 4.30086 12.4289 2.18267 9.38774 2.01142C6.34658 1.84017 3.54376 3.65518 2.45588 6.50026C1.36799 9.34535 2.24479 12.5673 4.62435 14.4688C5.0558 14.8136 5.12607 15.4429 4.7813 15.8743C4.43653 16.3058 3.80727 16.376 3.37582 16.0313C0.316386 13.5865 -0.810924 9.44392 0.587786 5.78596Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M13.8321 11.5547C14.1384 11.0952 14.0142 10.4743 13.5547 10.168C13.0952 9.86164 12.4743 9.98582 12.168 10.4453L8.16795 16.4453C7.96338 16.7522 7.94431 17.1467 8.11833 17.4719C8.29235 17.7971 8.63121 18 9 18H13.1315L10.168 22.4453C9.8616 22.9049 9.98577 23.5257 10.4453 23.8321C10.9048 24.1384 11.5257 24.0143 11.8321 23.5547L15.8321 17.5547C16.0366 17.2479 16.0557 16.8533 15.8817 16.5282C15.7077 16.203 15.3688 16 15 16H10.8685L13.8321 11.5547Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -35,7 +35,7 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/CloudOffIcon/CloudOffIcon.native.test.tsx b/packages/blade/src/components/Icons/CloudOffIcon/CloudOffIcon.native.test.tsx
index d66ef88ba0a..77666e1ba21 100644
--- a/packages/blade/src/components/Icons/CloudOffIcon/CloudOffIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CloudOffIcon/CloudOffIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CloudOffIcon />', () => {
   it('should render CloudOffIcon', () => {
     const renderTree = renderWithTheme(
-      <CloudOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudOffIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudOffIcon/CloudOffIcon.web.test.tsx b/packages/blade/src/components/Icons/CloudOffIcon/CloudOffIcon.web.test.tsx
index c7855ce87de..2149f3bd3e5 100644
--- a/packages/blade/src/components/Icons/CloudOffIcon/CloudOffIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CloudOffIcon/CloudOffIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CloudOffIcon />', () => {
   it('should render CloudOffIcon', () => {
     const { container } = renderWithTheme(
-      <CloudOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudOffIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.native.test.tsx.snap
index a1a0ec02f4f..b5bf41d25a1 100644
--- a/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<CloudOffIcon /> should render CloudOffIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M1.70717 0.292893C1.31664 -0.0976311 0.683479 -0.0976311 0.292954 0.292893C-0.0975701 0.683417 -0.0975701 1.31658 0.292954 1.70711L3.42436 4.83851C0.559704 7.03184 -0.639719 10.7779 0.304853 14.32C1.36866 18.3093 5.01019 21.0628 9.13769 21H19.5858L22.293 23.7071C22.6835 24.0976 23.3166 24.0976 23.7072 23.7071C24.0977 23.3166 24.0977 22.6834 23.7072 22.2929L20.713 19.2988C20.7092 19.2948 20.7053 19.2909 20.7014 19.2871L5.72258 4.3083C5.71228 4.29754 5.70178 4.28703 5.69107 4.2768L1.70717 0.292893ZM4.85502 6.26918C2.50677 7.92678 1.46739 10.9174 2.23732 13.8047C3.06528 16.9095 5.90082 19.0519 9.11375 19.0001L9.1218 19H17.5858L4.85502 6.26918ZM8.82364 3.91201C8.87224 3.36187 9.35761 2.95528 9.90775 3.00388C13.4586 3.31753 16.4632 5.69089 17.617 9.01355C19.5976 9.09144 21.7249 9.55646 23.1357 11.6834C24.2488 13.3614 24.4459 15.4859 23.6606 17.34C23.4452 17.8486 22.8583 18.0862 22.3498 17.8708C21.8412 17.6554 21.6036 17.0686 21.8189 16.56C22.3425 15.3239 22.2111 13.9076 21.469 12.7889C20.4819 11.3008 18.9488 11 16.8698 11H16.092L15.9005 10.2461C15.1685 7.36328 12.6946 5.25783 9.73177 4.99612C9.18163 4.94753 8.77505 4.46215 8.82364 3.91201Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<CloudOffIcon /> should render CloudOffIcon 1`] = `
           name="clip0_60_392"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.web.test.tsx.snap
index c831cbaefb6..3a88704ce34 100644
--- a/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<CloudOffIcon /> should render CloudOffIcon 1`] = `
         clip-rule="evenodd"
         d="M1.70717 0.292893C1.31664 -0.0976311 0.683479 -0.0976311 0.292954 0.292893C-0.0975701 0.683417 -0.0975701 1.31658 0.292954 1.70711L3.42436 4.83851C0.559704 7.03184 -0.639719 10.7779 0.304853 14.32C1.36866 18.3093 5.01019 21.0628 9.13769 21H19.5858L22.293 23.7071C22.6835 24.0976 23.3166 24.0976 23.7072 23.7071C24.0977 23.3166 24.0977 22.6834 23.7072 22.2929L20.713 19.2988C20.7092 19.2948 20.7053 19.2909 20.7014 19.2871L5.72258 4.3083C5.71228 4.29754 5.70178 4.28703 5.69107 4.2768L1.70717 0.292893ZM4.85502 6.26918C2.50677 7.92678 1.46739 10.9174 2.23732 13.8047C3.06528 16.9095 5.90082 19.0519 9.11375 19.0001L9.1218 19H17.5858L4.85502 6.26918ZM8.82364 3.91201C8.87224 3.36187 9.35761 2.95528 9.90775 3.00388C13.4586 3.31753 16.4632 5.69089 17.617 9.01355C19.5976 9.09144 21.7249 9.55646 23.1357 11.6834C24.2488 13.3614 24.4459 15.4859 23.6606 17.34C23.4452 17.8486 22.8583 18.0862 22.3498 17.8708C21.8412 17.6554 21.6036 17.0686 21.8189 16.56C22.3425 15.3239 22.2111 13.9076 21.469 12.7889C20.4819 11.3008 18.9488 11 16.8698 11H16.092L15.9005 10.2461C15.1685 7.36328 12.6946 5.25783 9.73177 4.99612C9.18163 4.94753 8.77505 4.46215 8.82364 3.91201Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<CloudOffIcon /> should render CloudOffIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/CloudRainIcon/CloudRainIcon.native.test.tsx b/packages/blade/src/components/Icons/CloudRainIcon/CloudRainIcon.native.test.tsx
index ebb0aacdfea..4dede92dcf6 100644
--- a/packages/blade/src/components/Icons/CloudRainIcon/CloudRainIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CloudRainIcon/CloudRainIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CloudRainIcon />', () => {
   it('should render CloudRainIcon', () => {
     const renderTree = renderWithTheme(
-      <CloudRainIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudRainIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudRainIcon/CloudRainIcon.web.test.tsx b/packages/blade/src/components/Icons/CloudRainIcon/CloudRainIcon.web.test.tsx
index ae07566c954..4b831d47343 100644
--- a/packages/blade/src/components/Icons/CloudRainIcon/CloudRainIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CloudRainIcon/CloudRainIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CloudRainIcon />', () => {
   it('should render CloudRainIcon', () => {
     const { container } = renderWithTheme(
-      <CloudRainIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudRainIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.native.test.tsx.snap
index 5726f305b23..aaa54d9ed81 100644
--- a/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
       >
         <RNSVGPath
           d="M9.50019 0.0145815C5.59012 -0.205596 1.9865 2.12799 0.587786 5.78596C-0.810924 9.44392 0.316386 13.5865 3.37582 16.0313C3.80727 16.376 4.43653 16.3058 4.7813 15.8743C5.12607 15.4429 5.0558 14.8136 4.62435 14.4688C2.24479 12.5673 1.36799 9.34535 2.45588 6.50026C3.54376 3.65518 6.34658 1.84017 9.38774 2.01142C12.4289 2.18267 15.0102 4.30086 15.7718 7.25009C15.8859 7.69159 16.2841 8.00006 16.7401 8.00006H17.9993C19.8914 8.00247 21.5231 9.33036 21.9098 11.1826C22.2965 13.035 21.3323 14.9049 19.5989 15.6641C19.093 15.8856 18.8625 16.4753 19.0841 16.9812C19.3056 17.4871 19.8954 17.7176 20.4013 17.4961C23.0013 16.3573 24.4476 13.5524 23.8676 10.7739C23.2875 7.99532 20.8397 6.0034 18.0013 6.00006H17.4796C16.2801 2.60323 13.1473 0.219954 9.50019 0.0145815Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
         />
         <RNSVGPath
           d="M9.00006 13.0001C9.00006 12.4478 8.55235 12.0001 8.00006 12.0001C7.44778 12.0001 7.00006 12.4478 7.00006 13.0001V21.0001C7.00006 21.5523 7.44778 22.0001 8.00006 22.0001C8.55235 22.0001 9.00006 21.5523 9.00006 21.0001V13.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -72,7 +72,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
         />
         <RNSVGPath
           d="M17.0001 13.0001C17.0001 12.4478 16.5523 12.0001 16.0001 12.0001C15.4478 12.0001 15.0001 12.4478 15.0001 13.0001V21.0001C15.0001 21.5523 15.4478 22.0001 16.0001 22.0001C16.5523 22.0001 17.0001 21.5523 17.0001 21.0001V13.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -81,7 +81,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
         />
         <RNSVGPath
           d="M12.0001 14.0001C12.5523 14.0001 13.0001 14.4478 13.0001 15.0001V23.0001C13.0001 23.5523 12.5523 24.0001 12.0001 24.0001C11.4478 24.0001 11.0001 23.5523 11.0001 23.0001V15.0001C11.0001 14.4478 11.4478 14.0001 12.0001 14.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -94,7 +94,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
           name="clip0_60_387"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.web.test.tsx.snap
index 7d544a35141..3b0cfc6f56f 100644
--- a/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.web.test.tsx.snap
@@ -18,22 +18,22 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
       <path
         d="M9.50019 0.0145815C5.59012 -0.205596 1.9865 2.12799 0.587786 5.78596C-0.810924 9.44392 0.316386 13.5865 3.37582 16.0313C3.80727 16.376 4.43653 16.3058 4.7813 15.8743C5.12607 15.4429 5.0558 14.8136 4.62435 14.4688C2.24479 12.5673 1.36799 9.34535 2.45588 6.50026C3.54376 3.65518 6.34658 1.84017 9.38774 2.01142C12.4289 2.18267 15.0102 4.30086 15.7718 7.25009C15.8859 7.69159 16.2841 8.00006 16.7401 8.00006H17.9993C19.8914 8.00247 21.5231 9.33036 21.9098 11.1826C22.2965 13.035 21.3323 14.9049 19.5989 15.6641C19.093 15.8856 18.8625 16.4753 19.0841 16.9812C19.3056 17.4871 19.8954 17.7176 20.4013 17.4961C23.0013 16.3573 24.4476 13.5524 23.8676 10.7739C23.2875 7.99532 20.8397 6.0034 18.0013 6.00006H17.4796C16.2801 2.60323 13.1473 0.219954 9.50019 0.0145815Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M9.00006 13.0001C9.00006 12.4478 8.55235 12.0001 8.00006 12.0001C7.44778 12.0001 7.00006 12.4478 7.00006 13.0001V21.0001C7.00006 21.5523 7.44778 22.0001 8.00006 22.0001C8.55235 22.0001 9.00006 21.5523 9.00006 21.0001V13.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M17.0001 13.0001C17.0001 12.4478 16.5523 12.0001 16.0001 12.0001C15.4478 12.0001 15.0001 12.4478 15.0001 13.0001V21.0001C15.0001 21.5523 15.4478 22.0001 16.0001 22.0001C16.5523 22.0001 17.0001 21.5523 17.0001 21.0001V13.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M12.0001 14.0001C12.5523 14.0001 13.0001 14.4478 13.0001 15.0001V23.0001C13.0001 23.5523 12.5523 24.0001 12.0001 24.0001C11.4478 24.0001 11.0001 23.5523 11.0001 23.0001V15.0001C11.0001 14.4478 11.4478 14.0001 12.0001 14.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -45,7 +45,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/CloudSnowIcon/CloudSnowIcon.native.test.tsx b/packages/blade/src/components/Icons/CloudSnowIcon/CloudSnowIcon.native.test.tsx
index 1a8a5406108..da84a79b120 100644
--- a/packages/blade/src/components/Icons/CloudSnowIcon/CloudSnowIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CloudSnowIcon/CloudSnowIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CloudSnowIcon />', () => {
   it('should render CloudSnowIcon', () => {
     const renderTree = renderWithTheme(
-      <CloudSnowIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudSnowIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudSnowIcon/CloudSnowIcon.web.test.tsx b/packages/blade/src/components/Icons/CloudSnowIcon/CloudSnowIcon.web.test.tsx
index 9036498e06e..f64c1da537a 100644
--- a/packages/blade/src/components/Icons/CloudSnowIcon/CloudSnowIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CloudSnowIcon/CloudSnowIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CloudSnowIcon />', () => {
   it('should render CloudSnowIcon', () => {
     const { container } = renderWithTheme(
-      <CloudSnowIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CloudSnowIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.native.test.tsx.snap
index 7172169fb3b..c7a690dc2b0 100644
--- a/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
       >
         <RNSVGPath
           d="M8.08235 1.04655C9.50123 0.902065 10.9341 1.09686 12.2629 1.61487C13.5918 2.13288 14.7784 2.95928 15.7252 4.02595C16.498 4.89662 17.0928 5.90703 17.4793 6.99996H18.0012C19.3783 7.00158 20.713 7.47691 21.7812 8.34616C22.8494 9.21541 23.586 10.4257 23.8675 11.7738C24.1489 13.1219 23.958 14.5258 23.3268 15.7498C22.6957 16.9738 21.6626 17.9435 20.4011 18.496C19.8953 18.7175 19.3055 18.487 19.084 17.9811C18.8624 17.4752 19.0929 16.8855 19.5988 16.664C20.4398 16.2956 21.1285 15.6492 21.5493 14.8332C21.97 14.0172 22.0973 13.0812 21.9097 12.1825C21.722 11.2838 21.231 10.4769 20.5188 9.89742C19.8068 9.31801 18.9172 9.00113 17.9992 8.99996H16.74C16.284 8.99996 15.8857 8.69149 15.7717 8.24999C15.4944 7.17595 14.9657 6.1832 14.2294 5.35357C13.493 4.52394 12.5701 3.88119 11.5365 3.47829C10.503 3.07539 9.38853 2.92388 8.28496 3.03626C7.18139 3.14863 6.12032 3.52167 5.18922 4.12462C4.25812 4.72757 3.48364 5.54317 2.92963 6.50419C2.37561 7.46521 2.05792 8.54414 2.00275 9.65205C1.94757 10.76 2.15648 11.8651 2.61226 12.8764C3.06805 13.8877 3.75765 14.7763 4.62424 15.4687C5.05569 15.8135 5.12596 16.4428 4.78119 16.8742C4.43642 17.3057 3.80716 17.3759 3.37571 17.0312C2.26153 16.1408 1.3749 14.9985 0.788889 13.6982C0.202881 12.3979 -0.0657213 10.977 0.00522189 9.55257C0.0761651 8.12812 0.484622 6.74092 1.19693 5.50532C1.90923 4.26972 2.90498 3.22109 4.10212 2.44586C5.29925 1.67064 6.66347 1.19103 8.08235 1.04655Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
         />
         <RNSVGPath
           d="M7 16C7 15.4477 7.44772 15 8 15H8.01C8.56228 15 9.01 15.4477 9.01 16C9.01 16.5522 8.56228 17 8.01 17H8C7.44772 17 7 16.5522 7 16Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -72,7 +72,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
         />
         <RNSVGPath
           d="M8 19C7.44772 19 7 19.4477 7 20C7 20.5522 7.44772 21 8 21H8.01C8.56228 21 9.01 20.5522 9.01 20C9.01 19.4477 8.56228 19 8.01 19H8Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -81,7 +81,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
         />
         <RNSVGPath
           d="M11 18C11 17.4477 11.4477 17 12 17H12.01C12.5623 17 13.01 17.4477 13.01 18C13.01 18.5522 12.5623 19 12.01 19H12C11.4477 19 11 18.5522 11 18Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -90,7 +90,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
         />
         <RNSVGPath
           d="M12 21C11.4477 21 11 21.4477 11 22C11 22.5522 11.4477 23 12 23H12.01C12.5623 23 13.01 22.5522 13.01 22C13.01 21.4477 12.5623 21 12.01 21H12Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -99,7 +99,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
         />
         <RNSVGPath
           d="M15 16C15 15.4477 15.4477 15 16 15H16.01C16.5623 15 17.01 15.4477 17.01 16C17.01 16.5522 16.5623 17 16.01 17H16C15.4477 17 15 16.5522 15 16Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -108,7 +108,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
         />
         <RNSVGPath
           d="M16 19C15.4477 19 15 19.4477 15 20C15 20.5522 15.4477 21 16 21H16.01C16.5623 21 17.01 20.5522 17.01 20C17.01 19.4477 16.5623 19 16.01 19H16Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -121,7 +121,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
           name="clip0_60_393"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.web.test.tsx.snap
index e117e0b50bb..924c251e86f 100644
--- a/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.web.test.tsx.snap
@@ -18,37 +18,37 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
       <path
         d="M8.08235 1.04655C9.50123 0.902065 10.9341 1.09686 12.2629 1.61487C13.5918 2.13288 14.7784 2.95928 15.7252 4.02595C16.498 4.89662 17.0928 5.90703 17.4793 6.99996H18.0012C19.3783 7.00158 20.713 7.47691 21.7812 8.34616C22.8494 9.21541 23.586 10.4257 23.8675 11.7738C24.1489 13.1219 23.958 14.5258 23.3268 15.7498C22.6957 16.9738 21.6626 17.9435 20.4011 18.496C19.8953 18.7175 19.3055 18.487 19.084 17.9811C18.8624 17.4752 19.0929 16.8855 19.5988 16.664C20.4398 16.2956 21.1285 15.6492 21.5493 14.8332C21.97 14.0172 22.0973 13.0812 21.9097 12.1825C21.722 11.2838 21.231 10.4769 20.5188 9.89742C19.8068 9.31801 18.9172 9.00113 17.9992 8.99996H16.74C16.284 8.99996 15.8857 8.69149 15.7717 8.24999C15.4944 7.17595 14.9657 6.1832 14.2294 5.35357C13.493 4.52394 12.5701 3.88119 11.5365 3.47829C10.503 3.07539 9.38853 2.92388 8.28496 3.03626C7.18139 3.14863 6.12032 3.52167 5.18922 4.12462C4.25812 4.72757 3.48364 5.54317 2.92963 6.50419C2.37561 7.46521 2.05792 8.54414 2.00275 9.65205C1.94757 10.76 2.15648 11.8651 2.61226 12.8764C3.06805 13.8877 3.75765 14.7763 4.62424 15.4687C5.05569 15.8135 5.12596 16.4428 4.78119 16.8742C4.43642 17.3057 3.80716 17.3759 3.37571 17.0312C2.26153 16.1408 1.3749 14.9985 0.788889 13.6982C0.202881 12.3979 -0.0657213 10.977 0.00522189 9.55257C0.0761651 8.12812 0.484622 6.74092 1.19693 5.50532C1.90923 4.26972 2.90498 3.22109 4.10212 2.44586C5.29925 1.67064 6.66347 1.19103 8.08235 1.04655Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M7 16C7 15.4477 7.44772 15 8 15H8.01C8.56228 15 9.01 15.4477 9.01 16C9.01 16.5522 8.56228 17 8.01 17H8C7.44772 17 7 16.5522 7 16Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M8 19C7.44772 19 7 19.4477 7 20C7 20.5522 7.44772 21 8 21H8.01C8.56228 21 9.01 20.5522 9.01 20C9.01 19.4477 8.56228 19 8.01 19H8Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M11 18C11 17.4477 11.4477 17 12 17H12.01C12.5623 17 13.01 17.4477 13.01 18C13.01 18.5522 12.5623 19 12.01 19H12C11.4477 19 11 18.5522 11 18Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M12 21C11.4477 21 11 21.4477 11 22C11 22.5522 11.4477 23 12 23H12.01C12.5623 23 13.01 22.5522 13.01 22C13.01 21.4477 12.5623 21 12.01 21H12Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M15 16C15 15.4477 15.4477 15 16 15H16.01C16.5623 15 17.01 15.4477 17.01 16C17.01 16.5522 16.5623 17 16.01 17H16C15.4477 17 15 16.5522 15 16Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M16 19C15.4477 19 15 19.4477 15 20C15 20.5522 15.4477 21 16 21H16.01C16.5623 21 17.01 20.5522 17.01 20C17.01 19.4477 16.5623 19 16.01 19H16Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -60,7 +60,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/CodepenIcon/CodepenIcon.native.test.tsx b/packages/blade/src/components/Icons/CodepenIcon/CodepenIcon.native.test.tsx
index 286b47071fc..d5f1a35cde0 100644
--- a/packages/blade/src/components/Icons/CodepenIcon/CodepenIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CodepenIcon/CodepenIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CodepenIcon />', () => {
   it('should render CodepenIcon', () => {
     const renderTree = renderWithTheme(
-      <CodepenIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CodepenIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CodepenIcon/CodepenIcon.web.test.tsx b/packages/blade/src/components/Icons/CodepenIcon/CodepenIcon.web.test.tsx
index af458d57911..fd2b4a99700 100644
--- a/packages/blade/src/components/Icons/CodepenIcon/CodepenIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CodepenIcon/CodepenIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CodepenIcon />', () => {
   it('should render CodepenIcon', () => {
     const { container } = renderWithTheme(
-      <CodepenIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CodepenIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.native.test.tsx.snap
index 80c415d609f..0e3118ec6d0 100644
--- a/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CodepenIcon /> should render CodepenIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12.5572 1.1695C12.398 1.06246 12.2063 1 12 1C11.7937 1 11.602 1.06246 11.4428 1.1695L1.47281 7.64999C1.38089 7.70694 1.29702 7.77966 1.22551 7.86739C1.19674 7.90262 1.17046 7.93971 1.14683 7.97837C1.04567 8.14347 0.997988 8.3279 1 8.51022V15.4898C0.997964 15.6743 1.04683 15.861 1.15053 16.0276C1.17084 16.0604 1.19306 16.0919 1.21709 16.1222C1.29054 16.2148 1.37759 16.2911 1.47336 16.3504L11.4431 22.8307C11.5902 22.9295 11.765 22.9903 11.9534 22.9989C11.9689 22.9996 11.9845 23 12 23C12.0119 23 12.0237 22.9998 12.0356 22.9994C12.2281 22.9926 12.4069 22.9315 12.5569 22.8307L22.5257 16.351C22.6382 16.2816 22.7386 16.1886 22.8193 16.0735C22.9445 15.8945 23.003 15.6889 23 15.486V8.51402C23.003 8.31115 22.9445 8.10548 22.8193 7.92656L22.8137 7.91867C22.8069 7.90913 22.7999 7.89971 22.7927 7.89041C22.7172 7.79198 22.6265 7.7113 22.5262 7.64936L12.5572 1.1695ZM11 3.84269L3.78766 8.53071L7.00001 10.7794L11 7.97936V3.84269ZM13 7.97933V3.84269L20.2124 8.53073L17 10.7794L13 7.97933ZM5.25621 12L3 10.4207V13.5794L5.25621 12ZM18.7438 12L21 10.4207V13.5793L18.7438 12ZM12 9.72066L8.7438 12L12 14.2794L15.2562 12L12 9.72066ZM11 16.0207L7.00001 13.2207L3.78767 15.4693L11 20.1573V16.0207ZM20.2124 15.4693L17 13.2207L13 16.0207V20.1573L20.2124 15.4693Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.web.test.tsx.snap
index 8d1b611d278..08a6bf46b5e 100644
--- a/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<CodepenIcon /> should render CodepenIcon 1`] = `
       clip-rule="evenodd"
       d="M12.5572 1.1695C12.398 1.06246 12.2063 1 12 1C11.7937 1 11.602 1.06246 11.4428 1.1695L1.47281 7.64999C1.38089 7.70694 1.29702 7.77966 1.22551 7.86739C1.19674 7.90262 1.17046 7.93971 1.14683 7.97837C1.04567 8.14347 0.997988 8.3279 1 8.51022V15.4898C0.997964 15.6743 1.04683 15.861 1.15053 16.0276C1.17084 16.0604 1.19306 16.0919 1.21709 16.1222C1.29054 16.2148 1.37759 16.2911 1.47336 16.3504L11.4431 22.8307C11.5902 22.9295 11.765 22.9903 11.9534 22.9989C11.9689 22.9996 11.9845 23 12 23C12.0119 23 12.0237 22.9998 12.0356 22.9994C12.2281 22.9926 12.4069 22.9315 12.5569 22.8307L22.5257 16.351C22.6382 16.2816 22.7386 16.1886 22.8193 16.0735C22.9445 15.8945 23.003 15.6889 23 15.486V8.51402C23.003 8.31115 22.9445 8.10548 22.8193 7.92656L22.8137 7.91867C22.8069 7.90913 22.7999 7.89971 22.7927 7.89041C22.7172 7.79198 22.6265 7.7113 22.5262 7.64936L12.5572 1.1695ZM11 3.84269L3.78766 8.53071L7.00001 10.7794L11 7.97936V3.84269ZM13 7.97933V3.84269L20.2124 8.53073L17 10.7794L13 7.97933ZM5.25621 12L3 10.4207V13.5794L5.25621 12ZM18.7438 12L21 10.4207V13.5793L18.7438 12ZM12 9.72066L8.7438 12L12 14.2794L15.2562 12L12 9.72066ZM11 16.0207L7.00001 13.2207L3.78767 15.4693L11 20.1573V16.0207ZM20.2124 15.4693L17 13.2207L13 16.0207V20.1573L20.2124 15.4693Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CoinsIcon/CoinsIcon.native.test.tsx b/packages/blade/src/components/Icons/CoinsIcon/CoinsIcon.native.test.tsx
index 1bdbabe3c6d..d546563c7bb 100644
--- a/packages/blade/src/components/Icons/CoinsIcon/CoinsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CoinsIcon/CoinsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CoinsIcon />', () => {
   it('should render CoinsIcon', () => {
     const renderTree = renderWithTheme(
-      <CoinsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CoinsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CoinsIcon/CoinsIcon.web.test.tsx b/packages/blade/src/components/Icons/CoinsIcon/CoinsIcon.web.test.tsx
index dcf1cea7c24..1d024ebc2eb 100644
--- a/packages/blade/src/components/Icons/CoinsIcon/CoinsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CoinsIcon/CoinsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CoinsIcon />', () => {
   it('should render CoinsIcon', () => {
     const { container } = renderWithTheme(
-      <CoinsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CoinsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.native.test.tsx.snap
index 153978ddbab..4ae34c8c575 100644
--- a/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CoinsIcon /> should render CoinsIcon 1`] = `
     >
       <RNSVGPath
         d="M15 4C10.58 4 7 7.58 7 12C7 16.42 10.58 20 15 20C19.42 20 23 16.42 23 12C23 7.58 19.42 4 15 4ZM15 18C11.69 18 9 15.31 9 12C9 8.69 11.69 6 15 6C18.31 6 21 8.69 21 12C21 15.31 18.31 18 15 18ZM3 12C3 9.61 4.4 7.54 6.43 6.58C6.77 6.42 7 6.11 7 5.74V5.55C7 4.87 6.29 4.44 5.68 4.73C2.92 5.99 1 8.77 1 12C1 15.23 2.92 18.01 5.68 19.27C6.29 19.55 7 19.13 7 18.45V18.27C7 17.9 6.77 17.58 6.43 17.42C4.4 16.46 3 14.39 3 12Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.web.test.tsx.snap
index 83c116e4290..afbc9904c03 100644
--- a/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CoinsIcon /> should render CoinsIcon 1`] = `
     <path
       d="M15 4C10.58 4 7 7.58 7 12C7 16.42 10.58 20 15 20C19.42 20 23 16.42 23 12C23 7.58 19.42 4 15 4ZM15 18C11.69 18 9 15.31 9 12C9 8.69 11.69 6 15 6C18.31 6 21 8.69 21 12C21 15.31 18.31 18 15 18ZM3 12C3 9.61 4.4 7.54 6.43 6.58C6.77 6.42 7 6.11 7 5.74V5.55C7 4.87 6.29 4.44 5.68 4.73C2.92 5.99 1 8.77 1 12C1 15.23 2.92 18.01 5.68 19.27C6.29 19.55 7 19.13 7 18.45V18.27C7 17.9 6.77 17.58 6.43 17.42C4.4 16.46 3 14.39 3 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CommandIcon/CommandIcon.native.test.tsx b/packages/blade/src/components/Icons/CommandIcon/CommandIcon.native.test.tsx
index 19d7e7f3bda..70f2e35ed20 100644
--- a/packages/blade/src/components/Icons/CommandIcon/CommandIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CommandIcon/CommandIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CommandIcon />', () => {
   it('should render CommandIcon', () => {
     const renderTree = renderWithTheme(
-      <CommandIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CommandIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CommandIcon/CommandIcon.web.test.tsx b/packages/blade/src/components/Icons/CommandIcon/CommandIcon.web.test.tsx
index 2832937b1eb..d51ff3f50bc 100644
--- a/packages/blade/src/components/Icons/CommandIcon/CommandIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CommandIcon/CommandIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CommandIcon />', () => {
   it('should render CommandIcon', () => {
     const { container } = renderWithTheme(
-      <CommandIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CommandIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.native.test.tsx.snap
index ae33f89278b..6c8b91ce9f0 100644
--- a/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CommandIcon /> should render CommandIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 6C2 3.79086 3.79086 2 6 2C8.20914 2 10 3.79086 10 6V8H14V6C14 3.79086 15.7909 2 18 2C20.2091 2 22 3.79086 22 6C22 8.20914 20.2091 10 18 10H16V14H18C20.2091 14 22 15.7909 22 18C22 20.2091 20.2091 22 18 22C15.7909 22 14 20.2091 14 18V16H10V18C10 20.2091 8.20914 22 6 22C3.79086 22 2 20.2091 2 18C2 15.7909 3.79086 14 6 14H8V10H6C3.79086 10 2 8.20914 2 6ZM8 8V6C8 4.89543 7.10457 4 6 4C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8H8ZM10 10V14H14V10H10ZM8 16H6C4.89543 16 4 16.8954 4 18C4 19.1046 4.89543 20 6 20C7.10457 20 8 19.1046 8 18V16ZM16 16V18C16 19.1046 16.8954 20 18 20C19.1046 20 20 19.1046 20 18C20 16.8954 19.1046 16 18 16H16ZM16 8H18C19.1046 8 20 7.10457 20 6C20 4.89543 19.1046 4 18 4C16.8954 4 16 4.89543 16 6V8Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.web.test.tsx.snap
index f0219e8e238..ab3b5421bdf 100644
--- a/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<CommandIcon /> should render CommandIcon 1`] = `
       clip-rule="evenodd"
       d="M2 6C2 3.79086 3.79086 2 6 2C8.20914 2 10 3.79086 10 6V8H14V6C14 3.79086 15.7909 2 18 2C20.2091 2 22 3.79086 22 6C22 8.20914 20.2091 10 18 10H16V14H18C20.2091 14 22 15.7909 22 18C22 20.2091 20.2091 22 18 22C15.7909 22 14 20.2091 14 18V16H10V18C10 20.2091 8.20914 22 6 22C3.79086 22 2 20.2091 2 18C2 15.7909 3.79086 14 6 14H8V10H6C3.79086 10 2 8.20914 2 6ZM8 8V6C8 4.89543 7.10457 4 6 4C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8H8ZM10 10V14H14V10H10ZM8 16H6C4.89543 16 4 16.8954 4 18C4 19.1046 4.89543 20 6 20C7.10457 20 8 19.1046 8 18V16ZM16 16V18C16 19.1046 16.8954 20 18 20C19.1046 20 20 19.1046 20 18C20 16.8954 19.1046 16 18 16H16ZM16 8H18C19.1046 8 20 7.10457 20 6C20 4.89543 19.1046 4 18 4C16.8954 4 16 4.89543 16 6V8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CompassIcon/CompassIcon.native.test.tsx b/packages/blade/src/components/Icons/CompassIcon/CompassIcon.native.test.tsx
index 90e4e69ed01..61d5117d0e5 100644
--- a/packages/blade/src/components/Icons/CompassIcon/CompassIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CompassIcon/CompassIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CompassIcon />', () => {
   it('should render CompassIcon', () => {
     const renderTree = renderWithTheme(
-      <CompassIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CompassIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CompassIcon/CompassIcon.web.test.tsx b/packages/blade/src/components/Icons/CompassIcon/CompassIcon.web.test.tsx
index 9dabda60e84..6b34900b855 100644
--- a/packages/blade/src/components/Icons/CompassIcon/CompassIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CompassIcon/CompassIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CompassIcon />', () => {
   it('should render CompassIcon', () => {
     const { container } = renderWithTheme(
-      <CompassIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CompassIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.native.test.tsx.snap
index 4020a665702..f000ddb35ae 100644
--- a/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CompassIcon /> should render CompassIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M17.1887 8.0762C17.3085 7.71687 17.215 7.3207 16.9471 7.05287C16.6793 6.78504 16.2831 6.69151 15.9238 6.81129L9.56381 8.93129C9.2652 9.03083 9.03089 9.26514 8.93135 9.56375L6.81135 15.9237C6.69158 16.2831 6.7851 16.6792 7.05293 16.9471C7.32076 17.2149 7.71693 17.3084 8.07626 17.1887L14.4363 15.0687C14.7349 14.9691 14.9692 14.7348 15.0687 14.4362L17.1887 8.0762ZM9.34118 14.6588L10.6706 10.6705L14.6589 9.34111L13.3295 13.3294L9.34118 14.6588Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<CompassIcon /> should render CompassIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.web.test.tsx.snap
index bc1d82df310..358ddcac7df 100644
--- a/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<CompassIcon /> should render CompassIcon 1`] = `
       clip-rule="evenodd"
       d="M17.1887 8.0762C17.3085 7.71687 17.215 7.3207 16.9471 7.05287C16.6793 6.78504 16.2831 6.69151 15.9238 6.81129L9.56381 8.93129C9.2652 9.03083 9.03089 9.26514 8.93135 9.56375L6.81135 15.9237C6.69158 16.2831 6.7851 16.6792 7.05293 16.9471C7.32076 17.2149 7.71693 17.3084 8.07626 17.1887L14.4363 15.0687C14.7349 14.9691 14.9692 14.7348 15.0687 14.4362L17.1887 8.0762ZM9.34118 14.6588L10.6706 10.6705L14.6589 9.34111L13.3295 13.3294L9.34118 14.6588Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CopyIcon/CopyIcon.native.test.tsx b/packages/blade/src/components/Icons/CopyIcon/CopyIcon.native.test.tsx
index 4596fbff972..7926c5651e9 100644
--- a/packages/blade/src/components/Icons/CopyIcon/CopyIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CopyIcon/CopyIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CopyIcon />', () => {
   it('should render CopyIcon', () => {
     const renderTree = renderWithTheme(
-      <CopyIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CopyIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CopyIcon/CopyIcon.web.test.tsx b/packages/blade/src/components/Icons/CopyIcon/CopyIcon.web.test.tsx
index 3df40f2a255..613618754a0 100644
--- a/packages/blade/src/components/Icons/CopyIcon/CopyIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CopyIcon/CopyIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CopyIcon />', () => {
   it('should render CopyIcon', () => {
     const { container } = renderWithTheme(
-      <CopyIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CopyIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.native.test.tsx.snap
index 7e73beb6e23..2693081d74f 100644
--- a/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CopyIcon /> should render CopyIcon 1`] = `
     >
       <RNSVGPath
         d="M3 4C3 3.44772 3.44772 3 4 3H13C13.5523 3 14 3.44772 14 4V5C14 5.55228 14.4477 6 15 6C15.5523 6 16 5.55228 16 5V4C16 2.34315 14.6569 1 13 1H4C2.34315 1 1 2.34315 1 4V13C1 14.6569 2.34315 16 4 16H5C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14H4C3.44772 14 3 13.5523 3 13V4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<CopyIcon /> should render CopyIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11 8C9.34315 8 8 9.34315 8 11V20C8 21.6569 9.34315 23 11 23H20C21.6569 23 23 21.6569 23 20V11C23 9.34315 21.6569 8 20 8H11ZM10 11C10 10.4477 10.4477 10 11 10H20C20.5523 10 21 10.4477 21 11V20C21 20.5523 20.5523 21 20 21H11C10.4477 21 10 20.5523 10 20V11Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.web.test.tsx.snap
index dacaa4915fa..be88c496fcf 100644
--- a/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<CopyIcon /> should render CopyIcon 1`] = `
     <path
       d="M3 4C3 3.44772 3.44772 3 4 3H13C13.5523 3 14 3.44772 14 4V5C14 5.55228 14.4477 6 15 6C15.5523 6 16 5.55228 16 5V4C16 2.34315 14.6569 1 13 1H4C2.34315 1 1 2.34315 1 4V13C1 14.6569 2.34315 16 4 16H5C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14H4C3.44772 14 3 13.5523 3 13V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M11 8C9.34315 8 8 9.34315 8 11V20C8 21.6569 9.34315 23 11 23H20C21.6569 23 23 21.6569 23 20V11C23 9.34315 21.6569 8 20 8H11ZM10 11C10 10.4477 10.4477 10 11 10H20C20.5523 10 21 10.4477 21 11V20C21 20.5523 20.5523 21 20 21H11C10.4477 21 10 20.5523 10 20V11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CornerDownLeftIcon/CornerDownLeftIcon.native.test.tsx b/packages/blade/src/components/Icons/CornerDownLeftIcon/CornerDownLeftIcon.native.test.tsx
index d87959c4993..c5259c116b6 100644
--- a/packages/blade/src/components/Icons/CornerDownLeftIcon/CornerDownLeftIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CornerDownLeftIcon/CornerDownLeftIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CornerDownLeftIcon />', () => {
   it('should render CornerDownLeftIcon', () => {
     const renderTree = renderWithTheme(
-      <CornerDownLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerDownLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerDownLeftIcon/CornerDownLeftIcon.web.test.tsx b/packages/blade/src/components/Icons/CornerDownLeftIcon/CornerDownLeftIcon.web.test.tsx
index 62ad80ef78f..049151d8160 100644
--- a/packages/blade/src/components/Icons/CornerDownLeftIcon/CornerDownLeftIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CornerDownLeftIcon/CornerDownLeftIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CornerDownLeftIcon />', () => {
   it('should render CornerDownLeftIcon', () => {
     const { container } = renderWithTheme(
-      <CornerDownLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerDownLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.native.test.tsx.snap
index 409c4002b0f..80b0f738100 100644
--- a/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CornerDownLeftIcon /> should render CornerDownLeftIcon 1`] = `
     >
       <RNSVGPath
         d="M21 4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V11C19 12.6569 17.6569 14 16 14H6.41421L9.70711 10.7071C10.0976 10.3166 10.0976 9.68342 9.70711 9.29289C9.31658 8.90237 8.68342 8.90237 8.29289 9.29289L3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071C10.0976 20.3166 10.0976 19.6834 9.70711 19.2929L6.41421 16H16C18.7614 16 21 13.7614 21 11V4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.web.test.tsx.snap
index 9d3e7cdb6c7..50e5c898c9a 100644
--- a/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CornerDownLeftIcon /> should render CornerDownLeftIcon 1`] = `
     <path
       d="M21 4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V11C19 12.6569 17.6569 14 16 14H6.41421L9.70711 10.7071C10.0976 10.3166 10.0976 9.68342 9.70711 9.29289C9.31658 8.90237 8.68342 8.90237 8.29289 9.29289L3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071C10.0976 20.3166 10.0976 19.6834 9.70711 19.2929L6.41421 16H16C18.7614 16 21 13.7614 21 11V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CornerDownRightIcon/CornerDownRightIcon.native.test.tsx b/packages/blade/src/components/Icons/CornerDownRightIcon/CornerDownRightIcon.native.test.tsx
index 5c61a6bdf73..0855108788c 100644
--- a/packages/blade/src/components/Icons/CornerDownRightIcon/CornerDownRightIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CornerDownRightIcon/CornerDownRightIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CornerDownRightIcon />', () => {
   it('should render CornerDownRightIcon', () => {
     const renderTree = renderWithTheme(
-      <CornerDownRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerDownRightIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerDownRightIcon/CornerDownRightIcon.web.test.tsx b/packages/blade/src/components/Icons/CornerDownRightIcon/CornerDownRightIcon.web.test.tsx
index 5a8e5697bdf..f36dc0d6d9e 100644
--- a/packages/blade/src/components/Icons/CornerDownRightIcon/CornerDownRightIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CornerDownRightIcon/CornerDownRightIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CornerDownRightIcon />', () => {
   it('should render CornerDownRightIcon', () => {
     const { container } = renderWithTheme(
-      <CornerDownRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerDownRightIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.native.test.tsx.snap
index fe8bd3c288a..14fb740a3e2 100644
--- a/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CornerDownRightIcon /> should render CornerDownRightIcon 1`] = `
     >
       <RNSVGPath
         d="M5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4V11C3 13.7614 5.23858 16 8 16H17.5858L14.2929 19.2929C13.9024 19.6834 13.9024 20.3166 14.2929 20.7071C14.6834 21.0976 15.3166 21.0976 15.7071 20.7071L20.7071 15.7071C21.0976 15.3166 21.0976 14.6834 20.7071 14.2929L15.7071 9.29289C15.3166 8.90237 14.6834 8.90237 14.2929 9.29289C13.9024 9.68342 13.9024 10.3166 14.2929 10.7071L17.5858 14H8C6.34315 14 5 12.6569 5 11V4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.web.test.tsx.snap
index f088174ecd1..1aea002b7ac 100644
--- a/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CornerDownRightIcon /> should render CornerDownRightIcon 1`] = `
     <path
       d="M5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4V11C3 13.7614 5.23858 16 8 16H17.5858L14.2929 19.2929C13.9024 19.6834 13.9024 20.3166 14.2929 20.7071C14.6834 21.0976 15.3166 21.0976 15.7071 20.7071L20.7071 15.7071C21.0976 15.3166 21.0976 14.6834 20.7071 14.2929L15.7071 9.29289C15.3166 8.90237 14.6834 8.90237 14.2929 9.29289C13.9024 9.68342 13.9024 10.3166 14.2929 10.7071L17.5858 14H8C6.34315 14 5 12.6569 5 11V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CornerLeftDownIcon/CornerLeftDownIcon.native.test.tsx b/packages/blade/src/components/Icons/CornerLeftDownIcon/CornerLeftDownIcon.native.test.tsx
index 9eab992ca05..c9cfeefe249 100644
--- a/packages/blade/src/components/Icons/CornerLeftDownIcon/CornerLeftDownIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CornerLeftDownIcon/CornerLeftDownIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CornerLeftDownIcon />', () => {
   it('should render CornerLeftDownIcon', () => {
     const renderTree = renderWithTheme(
-      <CornerLeftDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerLeftDownIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerLeftDownIcon/CornerLeftDownIcon.web.test.tsx b/packages/blade/src/components/Icons/CornerLeftDownIcon/CornerLeftDownIcon.web.test.tsx
index 2669391f698..454089b78bc 100644
--- a/packages/blade/src/components/Icons/CornerLeftDownIcon/CornerLeftDownIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CornerLeftDownIcon/CornerLeftDownIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CornerLeftDownIcon />', () => {
   it('should render CornerLeftDownIcon', () => {
     const { container } = renderWithTheme(
-      <CornerLeftDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerLeftDownIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.native.test.tsx.snap
index 9c53856a3f8..cfb4cca4714 100644
--- a/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CornerLeftDownIcon /> should render CornerLeftDownIcon 1`] = `
     >
       <RNSVGPath
         d="M13 3C10.2386 3 8 5.23858 8 8V17.5858L4.70711 14.2929C4.31658 13.9024 3.68342 13.9024 3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071L14.7071 15.7071C15.0976 15.3166 15.0976 14.6834 14.7071 14.2929C14.3166 13.9024 13.6834 13.9024 13.2929 14.2929L10 17.5858V8C10 6.34315 11.3431 5 13 5H20C20.5523 5 21 4.55228 21 4C21 3.44772 20.5523 3 20 3H13Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.web.test.tsx.snap
index da28120b5e9..5be536df0d4 100644
--- a/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CornerLeftDownIcon /> should render CornerLeftDownIcon 1`] = `
     <path
       d="M13 3C10.2386 3 8 5.23858 8 8V17.5858L4.70711 14.2929C4.31658 13.9024 3.68342 13.9024 3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071L14.7071 15.7071C15.0976 15.3166 15.0976 14.6834 14.7071 14.2929C14.3166 13.9024 13.6834 13.9024 13.2929 14.2929L10 17.5858V8C10 6.34315 11.3431 5 13 5H20C20.5523 5 21 4.55228 21 4C21 3.44772 20.5523 3 20 3H13Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CornerLeftUpIcon/CornerLeftUpIcon.native.test.tsx b/packages/blade/src/components/Icons/CornerLeftUpIcon/CornerLeftUpIcon.native.test.tsx
index 128b5177441..899bb685f5e 100644
--- a/packages/blade/src/components/Icons/CornerLeftUpIcon/CornerLeftUpIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CornerLeftUpIcon/CornerLeftUpIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CornerLeftUpIcon />', () => {
   it('should render CornerLeftUpIcon', () => {
     const renderTree = renderWithTheme(
-      <CornerLeftUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerLeftUpIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerLeftUpIcon/CornerLeftUpIcon.web.test.tsx b/packages/blade/src/components/Icons/CornerLeftUpIcon/CornerLeftUpIcon.web.test.tsx
index 3dd8c42cd7d..9cdc7279b55 100644
--- a/packages/blade/src/components/Icons/CornerLeftUpIcon/CornerLeftUpIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CornerLeftUpIcon/CornerLeftUpIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CornerLeftUpIcon />', () => {
   it('should render CornerLeftUpIcon', () => {
     const { container } = renderWithTheme(
-      <CornerLeftUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerLeftUpIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.native.test.tsx.snap
index e3ee8f26782..583818b1715 100644
--- a/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CornerLeftUpIcon /> should render CornerLeftUpIcon 1`] = `
     >
       <RNSVGPath
         d="M9.70711 3.29289C9.31658 2.90237 8.68342 2.90237 8.29289 3.29289L3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711C3.68342 10.0976 4.31658 10.0976 4.70711 9.70711L8 6.41421V16C8 18.7614 10.2386 21 13 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H13C11.3431 19 10 17.6569 10 16V6.41421L13.2929 9.70711C13.6834 10.0976 14.3166 10.0976 14.7071 9.70711C15.0976 9.31658 15.0976 8.68342 14.7071 8.29289L9.70711 3.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.web.test.tsx.snap
index 7c363f2b7fc..268683fa5af 100644
--- a/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CornerLeftUpIcon /> should render CornerLeftUpIcon 1`] = `
     <path
       d="M9.70711 3.29289C9.31658 2.90237 8.68342 2.90237 8.29289 3.29289L3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711C3.68342 10.0976 4.31658 10.0976 4.70711 9.70711L8 6.41421V16C8 18.7614 10.2386 21 13 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H13C11.3431 19 10 17.6569 10 16V6.41421L13.2929 9.70711C13.6834 10.0976 14.3166 10.0976 14.7071 9.70711C15.0976 9.31658 15.0976 8.68342 14.7071 8.29289L9.70711 3.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CornerRightDownIcon/CornerRightDownIcon.native.test.tsx b/packages/blade/src/components/Icons/CornerRightDownIcon/CornerRightDownIcon.native.test.tsx
index edf154e48a7..c5329384ae6 100644
--- a/packages/blade/src/components/Icons/CornerRightDownIcon/CornerRightDownIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CornerRightDownIcon/CornerRightDownIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CornerRightDownIcon />', () => {
   it('should render CornerRightDownIcon', () => {
     const renderTree = renderWithTheme(
-      <CornerRightDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerRightDownIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerRightDownIcon/CornerRightDownIcon.web.test.tsx b/packages/blade/src/components/Icons/CornerRightDownIcon/CornerRightDownIcon.web.test.tsx
index 73e363a38bd..6555230a4b9 100644
--- a/packages/blade/src/components/Icons/CornerRightDownIcon/CornerRightDownIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CornerRightDownIcon/CornerRightDownIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CornerRightDownIcon />', () => {
   it('should render CornerRightDownIcon', () => {
     const { container } = renderWithTheme(
-      <CornerRightDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerRightDownIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.native.test.tsx.snap
index b1b8f89a2ce..3bd2bde9927 100644
--- a/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CornerRightDownIcon /> should render CornerRightDownIcon 1`] = `
     >
       <RNSVGPath
         d="M4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5H11C12.6569 5 14 6.34315 14 8V17.5858L10.7071 14.2929C10.3166 13.9024 9.68342 13.9024 9.29289 14.2929C8.90237 14.6834 8.90237 15.3166 9.29289 15.7071L14.2929 20.7071C14.6834 21.0976 15.3166 21.0976 15.7071 20.7071L20.7071 15.7071C21.0976 15.3166 21.0976 14.6834 20.7071 14.2929C20.3166 13.9024 19.6834 13.9024 19.2929 14.2929L16 17.5858V8C16 5.23858 13.7614 3 11 3H4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.web.test.tsx.snap
index 554f7c34ff9..27ade1c939f 100644
--- a/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CornerRightDownIcon /> should render CornerRightDownIcon 1`] = `
     <path
       d="M4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5H11C12.6569 5 14 6.34315 14 8V17.5858L10.7071 14.2929C10.3166 13.9024 9.68342 13.9024 9.29289 14.2929C8.90237 14.6834 8.90237 15.3166 9.29289 15.7071L14.2929 20.7071C14.6834 21.0976 15.3166 21.0976 15.7071 20.7071L20.7071 15.7071C21.0976 15.3166 21.0976 14.6834 20.7071 14.2929C20.3166 13.9024 19.6834 13.9024 19.2929 14.2929L16 17.5858V8C16 5.23858 13.7614 3 11 3H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CornerRightUpIcon/CornerRightUpIcon.native.test.tsx b/packages/blade/src/components/Icons/CornerRightUpIcon/CornerRightUpIcon.native.test.tsx
index 96855153f23..b686ca1fabf 100644
--- a/packages/blade/src/components/Icons/CornerRightUpIcon/CornerRightUpIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CornerRightUpIcon/CornerRightUpIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CornerRightUpIcon />', () => {
   it('should render CornerRightUpIcon', () => {
     const renderTree = renderWithTheme(
-      <CornerRightUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerRightUpIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerRightUpIcon/CornerRightUpIcon.web.test.tsx b/packages/blade/src/components/Icons/CornerRightUpIcon/CornerRightUpIcon.web.test.tsx
index f58a3222f51..2a576418a28 100644
--- a/packages/blade/src/components/Icons/CornerRightUpIcon/CornerRightUpIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CornerRightUpIcon/CornerRightUpIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CornerRightUpIcon />', () => {
   it('should render CornerRightUpIcon', () => {
     const { container } = renderWithTheme(
-      <CornerRightUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerRightUpIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.native.test.tsx.snap
index 143d7f9fea2..ae69791b074 100644
--- a/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CornerRightUpIcon /> should render CornerRightUpIcon 1`] = `
     >
       <RNSVGPath
         d="M15.7071 3.29289C15.3166 2.90237 14.6834 2.90237 14.2929 3.29289L9.29289 8.29289C8.90237 8.68342 8.90237 9.31658 9.29289 9.70711C9.68342 10.0976 10.3166 10.0976 10.7071 9.70711L14 6.41421V16C14 17.6569 12.6569 19 11 19H4C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H11C13.7614 21 16 18.7614 16 16V6.41421L19.2929 9.70711C19.6834 10.0976 20.3166 10.0976 20.7071 9.70711C21.0976 9.31658 21.0976 8.68342 20.7071 8.29289L15.7071 3.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.web.test.tsx.snap
index febed6d398f..5b95d8b5bc7 100644
--- a/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CornerRightUpIcon /> should render CornerRightUpIcon 1`] = `
     <path
       d="M15.7071 3.29289C15.3166 2.90237 14.6834 2.90237 14.2929 3.29289L9.29289 8.29289C8.90237 8.68342 8.90237 9.31658 9.29289 9.70711C9.68342 10.0976 10.3166 10.0976 10.7071 9.70711L14 6.41421V16C14 17.6569 12.6569 19 11 19H4C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H11C13.7614 21 16 18.7614 16 16V6.41421L19.2929 9.70711C19.6834 10.0976 20.3166 10.0976 20.7071 9.70711C21.0976 9.31658 21.0976 8.68342 20.7071 8.29289L15.7071 3.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CornerUpLeftIcon/CornerUpLeftIcon.native.test.tsx b/packages/blade/src/components/Icons/CornerUpLeftIcon/CornerUpLeftIcon.native.test.tsx
index 9b3b111757f..2c395793f51 100644
--- a/packages/blade/src/components/Icons/CornerUpLeftIcon/CornerUpLeftIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CornerUpLeftIcon/CornerUpLeftIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CornerUpLeftIcon />', () => {
   it('should render CornerUpLeftIcon', () => {
     const renderTree = renderWithTheme(
-      <CornerUpLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerUpLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerUpLeftIcon/CornerUpLeftIcon.web.test.tsx b/packages/blade/src/components/Icons/CornerUpLeftIcon/CornerUpLeftIcon.web.test.tsx
index 08afa6c0d0e..391b238ccee 100644
--- a/packages/blade/src/components/Icons/CornerUpLeftIcon/CornerUpLeftIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CornerUpLeftIcon/CornerUpLeftIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CornerUpLeftIcon />', () => {
   it('should render CornerUpLeftIcon', () => {
     const { container } = renderWithTheme(
-      <CornerUpLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerUpLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.native.test.tsx.snap
index 7f1630c023c..9c761f04e41 100644
--- a/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CornerUpLeftIcon /> should render CornerUpLeftIcon 1`] = `
     >
       <RNSVGPath
         d="M9.70711 4.70711C10.0976 4.31658 10.0976 3.68342 9.70711 3.29289C9.31658 2.90237 8.68342 2.90237 8.29289 3.29289L3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711L8.29289 14.7071C8.68342 15.0976 9.31658 15.0976 9.70711 14.7071C10.0976 14.3166 10.0976 13.6834 9.70711 13.2929L6.41421 10H16C17.6569 10 19 11.3431 19 13V20C19 20.5523 19.4477 21 20 21C20.5523 21 21 20.5523 21 20V13C21 10.2386 18.7614 8 16 8H6.41421L9.70711 4.70711Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.web.test.tsx.snap
index f9473d5f168..68f19146486 100644
--- a/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CornerUpLeftIcon /> should render CornerUpLeftIcon 1`] = `
     <path
       d="M9.70711 4.70711C10.0976 4.31658 10.0976 3.68342 9.70711 3.29289C9.31658 2.90237 8.68342 2.90237 8.29289 3.29289L3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711L8.29289 14.7071C8.68342 15.0976 9.31658 15.0976 9.70711 14.7071C10.0976 14.3166 10.0976 13.6834 9.70711 13.2929L6.41421 10H16C17.6569 10 19 11.3431 19 13V20C19 20.5523 19.4477 21 20 21C20.5523 21 21 20.5523 21 20V13C21 10.2386 18.7614 8 16 8H6.41421L9.70711 4.70711Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CornerUpRightIcon/CornerUpRightIcon.native.test.tsx b/packages/blade/src/components/Icons/CornerUpRightIcon/CornerUpRightIcon.native.test.tsx
index 2bf842e6c01..dc43920e07e 100644
--- a/packages/blade/src/components/Icons/CornerUpRightIcon/CornerUpRightIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CornerUpRightIcon/CornerUpRightIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CornerUpRightIcon />', () => {
   it('should render CornerUpRightIcon', () => {
     const renderTree = renderWithTheme(
-      <CornerUpRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerUpRightIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerUpRightIcon/CornerUpRightIcon.web.test.tsx b/packages/blade/src/components/Icons/CornerUpRightIcon/CornerUpRightIcon.web.test.tsx
index 1b533d4cb8c..e9eb498921d 100644
--- a/packages/blade/src/components/Icons/CornerUpRightIcon/CornerUpRightIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CornerUpRightIcon/CornerUpRightIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CornerUpRightIcon />', () => {
   it('should render CornerUpRightIcon', () => {
     const { container } = renderWithTheme(
-      <CornerUpRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CornerUpRightIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.native.test.tsx.snap
index 2e90a62fab1..1a365d494d3 100644
--- a/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<CornerUpRightIcon /> should render CornerUpRightIcon 1`] = `
     >
       <RNSVGPath
         d="M15.7071 3.29289C15.3166 2.90237 14.6834 2.90237 14.2929 3.29289C13.9024 3.68342 13.9024 4.31658 14.2929 4.70711L17.5858 8H8C5.23858 8 3 10.2386 3 13V20C3 20.5523 3.44772 21 4 21C4.55228 21 5 20.5523 5 20V13C5 11.3431 6.34315 10 8 10H17.5858L14.2929 13.2929C13.9024 13.6834 13.9024 14.3166 14.2929 14.7071C14.6834 15.0976 15.3166 15.0976 15.7071 14.7071L20.7071 9.70711C21.0976 9.31658 21.0976 8.68342 20.7071 8.29289L15.7071 3.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.web.test.tsx.snap
index b89f1f832ce..adf0db9f540 100644
--- a/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<CornerUpRightIcon /> should render CornerUpRightIcon 1`] = `
     <path
       d="M15.7071 3.29289C15.3166 2.90237 14.6834 2.90237 14.2929 3.29289C13.9024 3.68342 13.9024 4.31658 14.2929 4.70711L17.5858 8H8C5.23858 8 3 10.2386 3 13V20C3 20.5523 3.44772 21 4 21C4.55228 21 5 20.5523 5 20V13C5 11.3431 6.34315 10 8 10H17.5858L14.2929 13.2929C13.9024 13.6834 13.9024 14.3166 14.2929 14.7071C14.6834 15.0976 15.3166 15.0976 15.7071 14.7071L20.7071 9.70711C21.0976 9.31658 21.0976 8.68342 20.7071 8.29289L15.7071 3.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/CpuIcon/CpuIcon.native.test.tsx b/packages/blade/src/components/Icons/CpuIcon/CpuIcon.native.test.tsx
index 42584e40160..ee20f12af6c 100644
--- a/packages/blade/src/components/Icons/CpuIcon/CpuIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CpuIcon/CpuIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CpuIcon />', () => {
   it('should render CpuIcon', () => {
     const renderTree = renderWithTheme(
-      <CpuIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CpuIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CpuIcon/CpuIcon.web.test.tsx b/packages/blade/src/components/Icons/CpuIcon/CpuIcon.web.test.tsx
index 2fe9806ab31..9cd60ebf27d 100644
--- a/packages/blade/src/components/Icons/CpuIcon/CpuIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CpuIcon/CpuIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CpuIcon />', () => {
   it('should render CpuIcon', () => {
     const { container } = renderWithTheme(
-      <CpuIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CpuIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.native.test.tsx.snap
index edb56f901b9..de6dd7a59fc 100644
--- a/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M9 8C8.44771 8 8 8.44771 8 9V15C8 15.5523 8.44771 16 9 16H15C15.5523 16 16 15.5523 16 15V9C16 8.44771 15.5523 8 15 8H9ZM10 14V10H14V14H10Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -67,7 +67,7 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M9 0C9.55229 0 10 0.447715 10 1V3H14V1C14 0.447715 14.4477 0 15 0C15.5523 0 16 0.447715 16 1V3H18C19.6569 3 21 4.34315 21 6V8H23C23.5523 8 24 8.44771 24 9C24 9.55229 23.5523 10 23 10H21V13H23C23.5523 13 24 13.4477 24 14C24 14.5523 23.5523 15 23 15H21V18C21 19.6569 19.6569 21 18 21H16V23C16 23.5523 15.5523 24 15 24C14.4477 24 14 23.5523 14 23V21H10V23C10 23.5523 9.55229 24 9 24C8.44771 24 8 23.5523 8 23V21H6C4.34315 21 3 19.6569 3 18V15H1C0.447715 15 0 14.5523 0 14C0 13.4477 0.447715 13 1 13H3V10H1C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8H3V6C3 4.34315 4.34315 3 6 3H8V1C8 0.447715 8.44771 0 9 0ZM5 18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V6C19 5.44772 18.5523 5 18 5H6C5.44772 5 5 5.44772 5 6V18Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -82,7 +82,7 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
           name="clip0_83_745"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.web.test.tsx.snap
index d04a127e6f3..d36646472d7 100644
--- a/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.web.test.tsx.snap
@@ -19,14 +19,14 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
         clip-rule="evenodd"
         d="M9 8C8.44771 8 8 8.44771 8 9V15C8 15.5523 8.44771 16 9 16H15C15.5523 16 16 15.5523 16 15V9C16 8.44771 15.5523 8 15 8H9ZM10 14V10H14V14H10Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M9 0C9.55229 0 10 0.447715 10 1V3H14V1C14 0.447715 14.4477 0 15 0C15.5523 0 16 0.447715 16 1V3H18C19.6569 3 21 4.34315 21 6V8H23C23.5523 8 24 8.44771 24 9C24 9.55229 23.5523 10 23 10H21V13H23C23.5523 13 24 13.4477 24 14C24 14.5523 23.5523 15 23 15H21V18C21 19.6569 19.6569 21 18 21H16V23C16 23.5523 15.5523 24 15 24C14.4477 24 14 23.5523 14 23V21H10V23C10 23.5523 9.55229 24 9 24C8.44771 24 8 23.5523 8 23V21H6C4.34315 21 3 19.6569 3 18V15H1C0.447715 15 0 14.5523 0 14C0 13.4477 0.447715 13 1 13H3V10H1C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8H3V6C3 4.34315 4.34315 3 6 3H8V1C8 0.447715 8.44771 0 9 0ZM5 18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V6C19 5.44772 18.5523 5 18 5H6C5.44772 5 5 5.44772 5 6V18Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -39,7 +39,7 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/CreditCardIcon/CreditCardIcon.native.test.tsx b/packages/blade/src/components/Icons/CreditCardIcon/CreditCardIcon.native.test.tsx
index a1caa193cec..d085008eb31 100644
--- a/packages/blade/src/components/Icons/CreditCardIcon/CreditCardIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CreditCardIcon/CreditCardIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CreditCardIcon />', () => {
   it('should render CreditCardIcon', () => {
     const renderTree = renderWithTheme(
-      <CreditCardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CreditCardIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CreditCardIcon/CreditCardIcon.web.test.tsx b/packages/blade/src/components/Icons/CreditCardIcon/CreditCardIcon.web.test.tsx
index 74553722532..ed060b8406c 100644
--- a/packages/blade/src/components/Icons/CreditCardIcon/CreditCardIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CreditCardIcon/CreditCardIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CreditCardIcon />', () => {
   it('should render CreditCardIcon', () => {
     const { container } = renderWithTheme(
-      <CreditCardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CreditCardIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.native.test.tsx.snap
index ba13214363d..22d87504967 100644
--- a/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CreditCardIcon /> should render CreditCardIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.web.test.tsx.snap
index 825f7ea1c36..232ea44e797 100644
--- a/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<CreditCardIcon /> should render CreditCardIcon 1`] = `
       clip-rule="evenodd"
       d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CropIcon/CropIcon.native.test.tsx b/packages/blade/src/components/Icons/CropIcon/CropIcon.native.test.tsx
index 3ee2d7498d4..05e18c7ff4e 100644
--- a/packages/blade/src/components/Icons/CropIcon/CropIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CropIcon/CropIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CropIcon />', () => {
   it('should render CropIcon', () => {
     const renderTree = renderWithTheme(
-      <CropIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CropIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CropIcon/CropIcon.web.test.tsx b/packages/blade/src/components/Icons/CropIcon/CropIcon.web.test.tsx
index d6bf44bfe40..284e8847f63 100644
--- a/packages/blade/src/components/Icons/CropIcon/CropIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CropIcon/CropIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CropIcon />', () => {
   it('should render CropIcon', () => {
     const { container } = renderWithTheme(
-      <CropIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CropIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.native.test.tsx.snap
index 967deab2c80..cfd2df68737 100644
--- a/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<CropIcon /> should render CropIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M7.12996 1.00867C7.13475 0.456403 6.69093 0.00482466 6.13867 3.83509e-05C5.5864 -0.0047479 5.13482 0.43907 5.13004 0.991334L5.09448 5.09449L0.991334 5.13004C0.43907 5.13482 -0.0047479 5.5864 3.83509e-05 6.13867C0.00482466 6.69093 0.456403 7.13475 1.00867 7.12996L5.07714 7.0947L5.00004 15.9913L5 16C5 17.6569 6.34315 19 8 19H17V23C17 23.5523 17.4477 24 18 24C18.5523 24 19 23.5523 19 23V19H23C23.5523 19 24 18.5523 24 18C24 17.4477 23.5523 17 23 17H19V8C19 6.34315 17.6569 5 16 5L7.0947 5.07716L7.12996 1.00867ZM7.07737 7.07737L7.00001 16.0036C7.00195 16.5542 7.44892 17 8 17H17V8C17 7.44892 16.5542 7.00195 16.0036 7.00001L7.07737 7.07737Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<CropIcon /> should render CropIcon 1`] = `
           name="clip0_60_192"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.web.test.tsx.snap
index 5ebb2407913..60e02544107 100644
--- a/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<CropIcon /> should render CropIcon 1`] = `
         clip-rule="evenodd"
         d="M7.12996 1.00867C7.13475 0.456403 6.69093 0.00482466 6.13867 3.83509e-05C5.5864 -0.0047479 5.13482 0.43907 5.13004 0.991334L5.09448 5.09449L0.991334 5.13004C0.43907 5.13482 -0.0047479 5.5864 3.83509e-05 6.13867C0.00482466 6.69093 0.456403 7.13475 1.00867 7.12996L5.07714 7.0947L5.00004 15.9913L5 16C5 17.6569 6.34315 19 8 19H17V23C17 23.5523 17.4477 24 18 24C18.5523 24 19 23.5523 19 23V19H23C23.5523 19 24 18.5523 24 18C24 17.4477 23.5523 17 23 17H19V8C19 6.34315 17.6569 5 16 5L7.0947 5.07716L7.12996 1.00867ZM7.07737 7.07737L7.00001 16.0036C7.00195 16.5542 7.44892 17 8 17H17V8C17 7.44892 16.5542 7.00195 16.0036 7.00001L7.07737 7.07737Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<CropIcon /> should render CropIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/CrosshairIcon/CrosshairIcon.native.test.tsx b/packages/blade/src/components/Icons/CrosshairIcon/CrosshairIcon.native.test.tsx
index 3a61f33e0a1..c8ded600b0a 100644
--- a/packages/blade/src/components/Icons/CrosshairIcon/CrosshairIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CrosshairIcon/CrosshairIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CrosshairIcon />', () => {
   it('should render CrosshairIcon', () => {
     const renderTree = renderWithTheme(
-      <CrosshairIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CrosshairIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CrosshairIcon/CrosshairIcon.web.test.tsx b/packages/blade/src/components/Icons/CrosshairIcon/CrosshairIcon.web.test.tsx
index 318a885a834..5caecf04c58 100644
--- a/packages/blade/src/components/Icons/CrosshairIcon/CrosshairIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CrosshairIcon/CrosshairIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CrosshairIcon />', () => {
   it('should render CrosshairIcon', () => {
     const { container } = renderWithTheme(
-      <CrosshairIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CrosshairIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.native.test.tsx.snap
index f963167368b..dad61928e2e 100644
--- a/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CrosshairIcon /> should render CrosshairIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM13 20.9451V18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18V20.9451C6.82838 20.4839 3.51608 17.1716 3.05493 13H6C6.55228 13 7 12.5523 7 12C7 11.4477 6.55228 11 6 11H3.05493C3.51608 6.82838 6.82838 3.51608 11 3.05493V6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6V3.05493C17.1716 3.51608 20.4839 6.82838 20.9451 11H18C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13H20.9451C20.4839 17.1716 17.1716 20.4839 13 20.9451Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.web.test.tsx.snap
index 7acc03cb666..689c3181e36 100644
--- a/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<CrosshairIcon /> should render CrosshairIcon 1`] = `
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM13 20.9451V18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18V20.9451C6.82838 20.4839 3.51608 17.1716 3.05493 13H6C6.55228 13 7 12.5523 7 12C7 11.4477 6.55228 11 6 11H3.05493C3.51608 6.82838 6.82838 3.51608 11 3.05493V6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6V3.05493C17.1716 3.51608 20.4839 6.82838 20.9451 11H18C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13H20.9451C20.4839 17.1716 17.1716 20.4839 13 20.9451Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CustomersIcon/CustomersIcon.native.test.tsx b/packages/blade/src/components/Icons/CustomersIcon/CustomersIcon.native.test.tsx
index 505725d27fe..aa2857fb3d2 100644
--- a/packages/blade/src/components/Icons/CustomersIcon/CustomersIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CustomersIcon/CustomersIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CustomersIcon />', () => {
   it('should render CustomersIcon', () => {
     const renderTree = renderWithTheme(
-      <CustomersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CustomersIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CustomersIcon/CustomersIcon.web.test.tsx b/packages/blade/src/components/Icons/CustomersIcon/CustomersIcon.web.test.tsx
index 6511616bde6..57e5b695e18 100644
--- a/packages/blade/src/components/Icons/CustomersIcon/CustomersIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CustomersIcon/CustomersIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CustomersIcon />', () => {
   it('should render CustomersIcon', () => {
     const { container } = renderWithTheme(
-      <CustomersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CustomersIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.native.test.tsx.snap
index 1a16aafe4bc..f7e6ad234ed 100644
--- a/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<CustomersIcon /> should render CustomersIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M19.6255 8.21429C19.6255 9.99286 18.1745 11.4286 16.3636 11.4286C14.5527 11.4286 13.0909 9.99286 13.0909 8.21429C13.0909 6.43571 14.5527 5 16.3636 5C18.1745 5 19.6255 6.43571 19.6255 8.21429ZM10.8982 8.21429C10.8982 9.99286 9.44727 11.4286 7.63636 11.4286C5.82545 11.4286 4.36364 9.99286 4.36364 8.21429C4.36364 6.43571 5.82545 5 7.63636 5C9.44727 5 10.8982 6.43571 10.8982 8.21429ZM0 17.3214C0 14.825 5.09455 13.5714 7.63636 13.5714C10.1782 13.5714 15.2727 14.825 15.2727 17.3214V18C15.2727 19.1046 14.3773 20 13.2727 20H2C0.895431 20 0 19.1046 0 18V17.3214ZM15.3055 13.625C15.6873 13.5929 16.0473 13.5714 16.3636 13.5714C18.9055 13.5714 24 14.825 24 17.3214V18C24 19.1046 23.1046 20 22 20H17.4545V20H15.95C16.45 19.8333 17.45 19.2 17.45 18V17.1259C17.3805 15.6357 16.5184 14.4876 15.3055 13.625Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.web.test.tsx.snap
index b5a176c2589..10c75a105a2 100644
--- a/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<CustomersIcon /> should render CustomersIcon 1`] = `
       clip-rule="evenodd"
       d="M19.6255 8.21429C19.6255 9.99286 18.1745 11.4286 16.3636 11.4286C14.5527 11.4286 13.0909 9.99286 13.0909 8.21429C13.0909 6.43571 14.5527 5 16.3636 5C18.1745 5 19.6255 6.43571 19.6255 8.21429ZM10.8982 8.21429C10.8982 9.99286 9.44727 11.4286 7.63636 11.4286C5.82545 11.4286 4.36364 9.99286 4.36364 8.21429C4.36364 6.43571 5.82545 5 7.63636 5C9.44727 5 10.8982 6.43571 10.8982 8.21429ZM0 17.3214C0 14.825 5.09455 13.5714 7.63636 13.5714C10.1782 13.5714 15.2727 14.825 15.2727 17.3214V18C15.2727 19.1046 14.3773 20 13.2727 20H2C0.895431 20 0 19.1046 0 18V17.3214ZM15.3055 13.625C15.6873 13.5929 16.0473 13.5714 16.3636 13.5714C18.9055 13.5714 24 14.825 24 17.3214V18C24 19.1046 23.1046 20 22 20H17.4545V20H15.95C16.45 19.8333 17.45 19.2 17.45 18V17.1259C17.3805 15.6357 16.5184 14.4876 15.3055 13.625Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/CutIcon/CutIcon.native.test.tsx b/packages/blade/src/components/Icons/CutIcon/CutIcon.native.test.tsx
index e2ec5d2bc0d..57b1d0c87af 100644
--- a/packages/blade/src/components/Icons/CutIcon/CutIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/CutIcon/CutIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<CutIcon />', () => {
   it('should render CutIcon', () => {
     const renderTree = renderWithTheme(
-      <CutIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CutIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CutIcon/CutIcon.web.test.tsx b/packages/blade/src/components/Icons/CutIcon/CutIcon.web.test.tsx
index 1e557ec8626..87d51c57887 100644
--- a/packages/blade/src/components/Icons/CutIcon/CutIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/CutIcon/CutIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<CutIcon />', () => {
   it('should render CutIcon', () => {
     const { container } = renderWithTheme(
-      <CutIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <CutIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.native.test.tsx.snap
index 3f1761b51bc..201f9be18d7 100644
--- a/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.native.test.tsx.snap
@@ -65,7 +65,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -83,7 +83,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -98,7 +98,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -113,7 +113,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -128,7 +128,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -139,7 +139,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
           name="clip0_60_191"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.web.test.tsx.snap
index 3e42d04ef7b..20c2fd059cb 100644
--- a/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.web.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
         d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z"
         data-blade-component="svg-path"
         fill-rule="evenodd"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -30,7 +30,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
         d="M6 21C7.65685 21 9 19.6569 9 18C9 16.3431 7.65685 15 6 15C4.34315 15 3 16.3431 3 18C3 19.6569 4.34315 21 6 21Z"
         data-blade-component="svg-path"
         fill-rule="evenodd"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -38,7 +38,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
       <path
         d="M20 4L8.12 15.88"
         data-blade-component="svg-path"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -46,7 +46,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
       <path
         d="M14.47 14.48L20 20"
         data-blade-component="svg-path"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -54,7 +54,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
       <path
         d="M8.12 8.12L12 12"
         data-blade-component="svg-path"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -69,7 +69,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/DashboardIcon/DashboardIcon.native.test.tsx b/packages/blade/src/components/Icons/DashboardIcon/DashboardIcon.native.test.tsx
index 2434dd8ca0c..985fd4ce807 100644
--- a/packages/blade/src/components/Icons/DashboardIcon/DashboardIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/DashboardIcon/DashboardIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<DashboardIcon />', () => {
   it('should render DashboardIcon', () => {
     const renderTree = renderWithTheme(
-      <DashboardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DashboardIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DashboardIcon/DashboardIcon.web.test.tsx b/packages/blade/src/components/Icons/DashboardIcon/DashboardIcon.web.test.tsx
index d6754d10f9f..901de5d7ff7 100644
--- a/packages/blade/src/components/Icons/DashboardIcon/DashboardIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/DashboardIcon/DashboardIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<DashboardIcon />', () => {
   it('should render DashboardIcon', () => {
     const { container } = renderWithTheme(
-      <DashboardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DashboardIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.native.test.tsx.snap
index f46563ef792..d4ad6d4081b 100644
--- a/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<DashboardIcon /> should render DashboardIcon 1`] = `
     >
       <RNSVGPath
         d="M19.7778 2H4.22222C3 2 2 3 2 4.22222V19.7778C2 21 3 22 4.22222 22H19.7778C21 22 22 21 22 19.7778V4.22222C22 3 21 2 19.7778 2ZM8.66667 17.5556H6.44444V9.77778H8.66667V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM17.5556 17.5556H15.3333V13.1111H17.5556V17.5556Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.web.test.tsx.snap
index 6d176d09871..fbefb141378 100644
--- a/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<DashboardIcon /> should render DashboardIcon 1`] = `
     <path
       d="M19.7778 2H4.22222C3 2 2 3 2 4.22222V19.7778C2 21 3 22 4.22222 22H19.7778C21 22 22 21 22 19.7778V4.22222C22 3 21 2 19.7778 2ZM8.66667 17.5556H6.44444V9.77778H8.66667V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM17.5556 17.5556H15.3333V13.1111H17.5556V17.5556Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/DeleteIcon/DeleteIcon.native.test.tsx b/packages/blade/src/components/Icons/DeleteIcon/DeleteIcon.native.test.tsx
index a4f387b7387..2b1d2a6781a 100644
--- a/packages/blade/src/components/Icons/DeleteIcon/DeleteIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/DeleteIcon/DeleteIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<DeleteIcon />', () => {
   it('should render DeleteIcon', () => {
     const renderTree = renderWithTheme(
-      <DeleteIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DeleteIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DeleteIcon/DeleteIcon.web.test.tsx b/packages/blade/src/components/Icons/DeleteIcon/DeleteIcon.web.test.tsx
index 729754b2b1e..cbe8a610450 100644
--- a/packages/blade/src/components/Icons/DeleteIcon/DeleteIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/DeleteIcon/DeleteIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<DeleteIcon />', () => {
   it('should render DeleteIcon', () => {
     const { container } = renderWithTheme(
-      <DeleteIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DeleteIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.native.test.tsx.snap
index 0479481ac22..f195f75a6ff 100644
--- a/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<DeleteIcon /> should render DeleteIcon 1`] = `
     >
       <RNSVGPath
         d="M18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L16.4142 12L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L15 13.4142L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071C10.9024 15.3166 10.9024 14.6834 11.2929 14.2929L13.5858 12L11.2929 9.70711C10.9024 9.31658 10.9024 8.68342 11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L15 10.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<DeleteIcon /> should render DeleteIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7.24742 3.3415C7.43731 3.12448 7.71164 3 8 3H21C22.6569 3 24 4.34315 24 6V18C24 19.6569 22.6569 21 21 21H8C7.71164 21 7.43731 20.8755 7.24742 20.6585L0.247423 12.6585C-0.0824744 12.2815 -0.0824744 11.7185 0.247423 11.3415L7.24742 3.3415ZM8.45377 5L2.32877 12L8.45377 19H21C21.5523 19 22 18.5523 22 18V6C22 5.44772 21.5523 5 21 5H8.45377Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.web.test.tsx.snap
index 5ca36ede1f3..c5544de33e8 100644
--- a/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<DeleteIcon /> should render DeleteIcon 1`] = `
     <path
       d="M18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L16.4142 12L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L15 13.4142L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071C10.9024 15.3166 10.9024 14.6834 11.2929 14.2929L13.5858 12L11.2929 9.70711C10.9024 9.31658 10.9024 8.68342 11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L15 10.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M7.24742 3.3415C7.43731 3.12448 7.71164 3 8 3H21C22.6569 3 24 4.34315 24 6V18C24 19.6569 22.6569 21 21 21H8C7.71164 21 7.43731 20.8755 7.24742 20.6585L0.247423 12.6585C-0.0824744 12.2815 -0.0824744 11.7185 0.247423 11.3415L7.24742 3.3415ZM8.45377 5L2.32877 12L8.45377 19H21C21.5523 19 22 18.5523 22 18V6C22 5.44772 21.5523 5 21 5H8.45377Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/DiscIcon/DiscIcon.native.test.tsx b/packages/blade/src/components/Icons/DiscIcon/DiscIcon.native.test.tsx
index 2f55e017378..ee512569ecc 100644
--- a/packages/blade/src/components/Icons/DiscIcon/DiscIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/DiscIcon/DiscIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<DiscIcon />', () => {
   it('should render DiscIcon', () => {
     const renderTree = renderWithTheme(
-      <DiscIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DiscIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DiscIcon/DiscIcon.web.test.tsx b/packages/blade/src/components/Icons/DiscIcon/DiscIcon.web.test.tsx
index f7f5bb59d76..71ffcb6945f 100644
--- a/packages/blade/src/components/Icons/DiscIcon/DiscIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/DiscIcon/DiscIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<DiscIcon />', () => {
   it('should render DiscIcon', () => {
     const { container } = renderWithTheme(
-      <DiscIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DiscIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.native.test.tsx.snap
index 726ec06a0e1..efa901876c6 100644
--- a/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<DiscIcon /> should render DiscIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<DiscIcon /> should render DiscIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.web.test.tsx.snap
index 03f868fd309..f57ff6a0662 100644
--- a/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<DiscIcon /> should render DiscIcon 1`] = `
       clip-rule="evenodd"
       d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/DollarIcon/DollarIcon.native.test.tsx b/packages/blade/src/components/Icons/DollarIcon/DollarIcon.native.test.tsx
index a70105d0fab..0d9d798aefc 100644
--- a/packages/blade/src/components/Icons/DollarIcon/DollarIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/DollarIcon/DollarIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<DollarIcon />', () => {
   it('should render DollarIcon', () => {
     const renderTree = renderWithTheme(
-      <DollarIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DollarIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DollarIcon/DollarIcon.web.test.tsx b/packages/blade/src/components/Icons/DollarIcon/DollarIcon.web.test.tsx
index 8ed18fb781a..e5e41c49b6b 100644
--- a/packages/blade/src/components/Icons/DollarIcon/DollarIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/DollarIcon/DollarIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<DollarIcon />', () => {
   it('should render DollarIcon', () => {
     const { container } = renderWithTheme(
-      <DollarIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DollarIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.native.test.tsx.snap
index a0c80e10c34..d1f77e71192 100644
--- a/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<DollarIcon /> should render DollarIcon 1`] = `
     >
       <RNSVGPath
         d="M11.3963 21L11.4488 3H12.6824L12.6299 21H11.3963ZM14.8609 8.58281C14.7909 7.91719 14.5022 7.40156 13.9948 7.03594C13.4873 6.66563 12.8486 6.48047 12.0787 6.48047C11.5276 6.48047 11.0507 6.57422 10.6483 6.76172C10.2458 6.94453 9.93307 7.19766 9.70997 7.52109C9.49125 7.83984 9.38189 8.20313 9.38189 8.61094C9.38189 8.95313 9.45626 9.24844 9.60499 9.49688C9.75809 9.74531 9.95713 9.95391 10.2021 10.1227C10.4514 10.2867 10.7183 10.425 11.0026 10.5375C11.287 10.6453 11.5604 10.7344 11.8228 10.8047L13.1352 11.1703C13.5639 11.2828 14.0035 11.4352 14.4541 11.6273C14.9046 11.8195 15.3224 12.0727 15.7073 12.3867C16.0923 12.7008 16.4029 13.0898 16.6391 13.5539C16.8797 14.018 17 14.5734 17 15.2203C17 16.0359 16.8032 16.7602 16.4094 17.393C16.0201 18.0258 15.4536 18.525 14.71 18.8906C13.9707 19.2563 13.0761 19.4391 12.0262 19.4391C11.0201 19.4391 10.1496 19.268 9.4147 18.9258C8.67979 18.5836 8.10455 18.0984 7.68898 17.4703C7.2734 16.8375 7.04374 16.0875 7 15.2203H9.03412C9.07349 15.7406 9.23097 16.1742 9.50656 16.5211C9.78653 16.8633 10.143 17.1188 10.5761 17.2875C11.0136 17.4516 11.4926 17.5336 12.0131 17.5336C12.5862 17.5336 13.0958 17.4375 13.542 17.2453C13.9926 17.0484 14.3469 16.7766 14.605 16.4297C14.8631 16.0781 14.9921 15.668 14.9921 15.1992C14.9921 14.7727 14.8784 14.4234 14.6509 14.1516C14.4278 13.8797 14.1238 13.6547 13.7388 13.4766C13.3583 13.2984 12.9274 13.1414 12.4462 13.0055L10.8583 12.5414C9.78215 12.2273 8.92913 11.7656 8.29921 11.1563C7.67367 10.5469 7.36089 9.74063 7.36089 8.7375C7.36089 7.90781 7.57087 7.18359 7.99081 6.56484C8.41076 5.94609 8.97944 5.46563 9.69685 5.12344C10.4143 4.77656 11.2235 4.60313 12.1247 4.60313C13.0346 4.60313 13.8373 4.77422 14.5328 5.11641C15.2327 5.45859 15.7839 5.92969 16.1864 6.52969C16.5888 7.125 16.7988 7.80938 16.8163 8.58281H14.8609Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.web.test.tsx.snap
index 3ebcdb9c227..240a3bf3123 100644
--- a/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<DollarIcon /> should render DollarIcon 1`] = `
     <path
       d="M11.3963 21L11.4488 3H12.6824L12.6299 21H11.3963ZM14.8609 8.58281C14.7909 7.91719 14.5022 7.40156 13.9948 7.03594C13.4873 6.66563 12.8486 6.48047 12.0787 6.48047C11.5276 6.48047 11.0507 6.57422 10.6483 6.76172C10.2458 6.94453 9.93307 7.19766 9.70997 7.52109C9.49125 7.83984 9.38189 8.20313 9.38189 8.61094C9.38189 8.95313 9.45626 9.24844 9.60499 9.49688C9.75809 9.74531 9.95713 9.95391 10.2021 10.1227C10.4514 10.2867 10.7183 10.425 11.0026 10.5375C11.287 10.6453 11.5604 10.7344 11.8228 10.8047L13.1352 11.1703C13.5639 11.2828 14.0035 11.4352 14.4541 11.6273C14.9046 11.8195 15.3224 12.0727 15.7073 12.3867C16.0923 12.7008 16.4029 13.0898 16.6391 13.5539C16.8797 14.018 17 14.5734 17 15.2203C17 16.0359 16.8032 16.7602 16.4094 17.393C16.0201 18.0258 15.4536 18.525 14.71 18.8906C13.9707 19.2563 13.0761 19.4391 12.0262 19.4391C11.0201 19.4391 10.1496 19.268 9.4147 18.9258C8.67979 18.5836 8.10455 18.0984 7.68898 17.4703C7.2734 16.8375 7.04374 16.0875 7 15.2203H9.03412C9.07349 15.7406 9.23097 16.1742 9.50656 16.5211C9.78653 16.8633 10.143 17.1188 10.5761 17.2875C11.0136 17.4516 11.4926 17.5336 12.0131 17.5336C12.5862 17.5336 13.0958 17.4375 13.542 17.2453C13.9926 17.0484 14.3469 16.7766 14.605 16.4297C14.8631 16.0781 14.9921 15.668 14.9921 15.1992C14.9921 14.7727 14.8784 14.4234 14.6509 14.1516C14.4278 13.8797 14.1238 13.6547 13.7388 13.4766C13.3583 13.2984 12.9274 13.1414 12.4462 13.0055L10.8583 12.5414C9.78215 12.2273 8.92913 11.7656 8.29921 11.1563C7.67367 10.5469 7.36089 9.74063 7.36089 8.7375C7.36089 7.90781 7.57087 7.18359 7.99081 6.56484C8.41076 5.94609 8.97944 5.46563 9.69685 5.12344C10.4143 4.77656 11.2235 4.60313 12.1247 4.60313C13.0346 4.60313 13.8373 4.77422 14.5328 5.11641C15.2327 5.45859 15.7839 5.92969 16.1864 6.52969C16.5888 7.125 16.7988 7.80938 16.8163 8.58281H14.8609Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/DollarsIcon/DollarsIcon.native.test.tsx b/packages/blade/src/components/Icons/DollarsIcon/DollarsIcon.native.test.tsx
index cba8727413e..d21c72fe0f1 100644
--- a/packages/blade/src/components/Icons/DollarsIcon/DollarsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/DollarsIcon/DollarsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<DollarsIcon />', () => {
   it('should render DollarsIcon', () => {
     const renderTree = renderWithTheme(
-      <DollarsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DollarsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DollarsIcon/DollarsIcon.web.test.tsx b/packages/blade/src/components/Icons/DollarsIcon/DollarsIcon.web.test.tsx
index 650974a3621..9d18f529940 100644
--- a/packages/blade/src/components/Icons/DollarsIcon/DollarsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/DollarsIcon/DollarsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<DollarsIcon />', () => {
   it('should render DollarsIcon', () => {
     const { container } = renderWithTheme(
-      <DollarsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DollarsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.native.test.tsx.snap
index b952c888f14..6d54177b413 100644
--- a/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<DollarsIcon /> should render DollarsIcon 1`] = `
     >
       <RNSVGPath
         d="M11.3963 21L11.4488 3H12.6824L12.6299 21H11.3963ZM14.8609 8.58281C14.7909 7.91719 14.5022 7.40156 13.9948 7.03594C13.4873 6.66563 12.8486 6.48047 12.0787 6.48047C11.5276 6.48047 11.0507 6.57422 10.6483 6.76172C10.2458 6.94453 9.93307 7.19766 9.70997 7.52109C9.49125 7.83984 9.38189 8.20313 9.38189 8.61094C9.38189 8.95313 9.45626 9.24844 9.60499 9.49688C9.75809 9.74531 9.95713 9.95391 10.2021 10.1227C10.4514 10.2867 10.7183 10.425 11.0026 10.5375C11.287 10.6453 11.5604 10.7344 11.8228 10.8047L13.1352 11.1703C13.5639 11.2828 14.0035 11.4352 14.4541 11.6273C14.9046 11.8195 15.3224 12.0727 15.7073 12.3867C16.0923 12.7008 16.4029 13.0898 16.6391 13.5539C16.8797 14.018 17 14.5734 17 15.2203C17 16.0359 16.8032 16.7602 16.4094 17.393C16.0201 18.0258 15.4536 18.525 14.71 18.8906C13.9707 19.2563 13.0761 19.4391 12.0262 19.4391C11.0201 19.4391 10.1496 19.268 9.4147 18.9258C8.67979 18.5836 8.10455 18.0984 7.68898 17.4703C7.2734 16.8375 7.04374 16.0875 7 15.2203H9.03412C9.07349 15.7406 9.23097 16.1742 9.50656 16.5211C9.78653 16.8633 10.143 17.1188 10.5761 17.2875C11.0136 17.4516 11.4926 17.5336 12.0131 17.5336C12.5862 17.5336 13.0958 17.4375 13.542 17.2453C13.9926 17.0484 14.3469 16.7766 14.605 16.4297C14.8631 16.0781 14.9921 15.668 14.9921 15.1992C14.9921 14.7727 14.8784 14.4234 14.6509 14.1516C14.4278 13.8797 14.1238 13.6547 13.7388 13.4766C13.3583 13.2984 12.9274 13.1414 12.4462 13.0055L10.8583 12.5414C9.78215 12.2273 8.92913 11.7656 8.29921 11.1563C7.67367 10.5469 7.36089 9.74063 7.36089 8.7375C7.36089 7.90781 7.57087 7.18359 7.99081 6.56484C8.41076 5.94609 8.97944 5.46563 9.69685 5.12344C10.4143 4.77656 11.2235 4.60313 12.1247 4.60313C13.0346 4.60313 13.8373 4.77422 14.5328 5.11641C15.2327 5.45859 15.7839 5.92969 16.1864 6.52969C16.5888 7.125 16.7988 7.80938 16.8163 8.58281H14.8609Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.web.test.tsx.snap
index e093d574a8b..71a3e0ae216 100644
--- a/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<DollarsIcon /> should render DollarsIcon 1`] = `
     <path
       d="M11.3963 21L11.4488 3H12.6824L12.6299 21H11.3963ZM14.8609 8.58281C14.7909 7.91719 14.5022 7.40156 13.9948 7.03594C13.4873 6.66563 12.8486 6.48047 12.0787 6.48047C11.5276 6.48047 11.0507 6.57422 10.6483 6.76172C10.2458 6.94453 9.93307 7.19766 9.70997 7.52109C9.49125 7.83984 9.38189 8.20313 9.38189 8.61094C9.38189 8.95313 9.45626 9.24844 9.60499 9.49688C9.75809 9.74531 9.95713 9.95391 10.2021 10.1227C10.4514 10.2867 10.7183 10.425 11.0026 10.5375C11.287 10.6453 11.5604 10.7344 11.8228 10.8047L13.1352 11.1703C13.5639 11.2828 14.0035 11.4352 14.4541 11.6273C14.9046 11.8195 15.3224 12.0727 15.7073 12.3867C16.0923 12.7008 16.4029 13.0898 16.6391 13.5539C16.8797 14.018 17 14.5734 17 15.2203C17 16.0359 16.8032 16.7602 16.4094 17.393C16.0201 18.0258 15.4536 18.525 14.71 18.8906C13.9707 19.2563 13.0761 19.4391 12.0262 19.4391C11.0201 19.4391 10.1496 19.268 9.4147 18.9258C8.67979 18.5836 8.10455 18.0984 7.68898 17.4703C7.2734 16.8375 7.04374 16.0875 7 15.2203H9.03412C9.07349 15.7406 9.23097 16.1742 9.50656 16.5211C9.78653 16.8633 10.143 17.1188 10.5761 17.2875C11.0136 17.4516 11.4926 17.5336 12.0131 17.5336C12.5862 17.5336 13.0958 17.4375 13.542 17.2453C13.9926 17.0484 14.3469 16.7766 14.605 16.4297C14.8631 16.0781 14.9921 15.668 14.9921 15.1992C14.9921 14.7727 14.8784 14.4234 14.6509 14.1516C14.4278 13.8797 14.1238 13.6547 13.7388 13.4766C13.3583 13.2984 12.9274 13.1414 12.4462 13.0055L10.8583 12.5414C9.78215 12.2273 8.92913 11.7656 8.29921 11.1563C7.67367 10.5469 7.36089 9.74063 7.36089 8.7375C7.36089 7.90781 7.57087 7.18359 7.99081 6.56484C8.41076 5.94609 8.97944 5.46563 9.69685 5.12344C10.4143 4.77656 11.2235 4.60313 12.1247 4.60313C13.0346 4.60313 13.8373 4.77422 14.5328 5.11641C15.2327 5.45859 15.7839 5.92969 16.1864 6.52969C16.5888 7.125 16.7988 7.80938 16.8163 8.58281H14.8609Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/DownloadCloudIcon/DownloadCloudIcon.native.test.tsx b/packages/blade/src/components/Icons/DownloadCloudIcon/DownloadCloudIcon.native.test.tsx
index 4ed642b94fe..c4c168cdac4 100644
--- a/packages/blade/src/components/Icons/DownloadCloudIcon/DownloadCloudIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/DownloadCloudIcon/DownloadCloudIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<DownloadCloudIcon />', () => {
   it('should render DownloadCloudIcon', () => {
     const renderTree = renderWithTheme(
-      <DownloadCloudIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DownloadCloudIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DownloadCloudIcon/DownloadCloudIcon.web.test.tsx b/packages/blade/src/components/Icons/DownloadCloudIcon/DownloadCloudIcon.web.test.tsx
index a058bf57e61..4d074809f5f 100644
--- a/packages/blade/src/components/Icons/DownloadCloudIcon/DownloadCloudIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/DownloadCloudIcon/DownloadCloudIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<DownloadCloudIcon />', () => {
   it('should render DownloadCloudIcon', () => {
     const { container } = renderWithTheme(
-      <DownloadCloudIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DownloadCloudIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.native.test.tsx.snap
index d49f5e83484..3c88589dd03 100644
--- a/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
       >
         <RNSVGPath
           d="M10.0209 3.04746C6.31707 2.62087 2.73368 4.52209 1.01031 7.82818C-0.713067 11.1343 -0.219588 15.1607 2.25118 17.9527C2.61719 18.3663 3.24917 18.4049 3.66277 18.0389C4.07636 17.6729 4.11494 17.0409 3.74894 16.6273C1.82723 14.4557 1.44341 11.3241 2.78382 8.75267C4.12422 6.18126 6.9113 4.70253 9.79204 5.03433C12.6728 5.36612 15.0507 7.43975 15.7714 10.2485C15.8849 10.6908 16.2835 11 16.7401 11L18.0008 11C19.7457 10.9986 21.2901 12.1285 21.8172 13.7919C22.3442 15.4552 21.7322 17.2683 20.3048 18.272C19.8531 18.5897 19.7444 19.2135 20.0621 19.6652C20.3797 20.117 21.0035 20.2257 21.4553 19.908C23.5962 18.4025 24.5143 15.6829 23.7238 13.1878C22.9333 10.693 20.6163 8.9983 17.9993 9L17.4807 9C16.3464 5.77429 13.4628 3.44389 10.0209 3.04746Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
         />
         <RNSVGPath
           d="M12 12C12.5523 12 13 12.4477 13 13V19.5858L15.2929 17.2929C15.6834 16.9024 16.3166 16.9024 16.7071 17.2929C17.0976 17.6834 17.0976 18.3166 16.7071 18.7071L12.7071 22.7071C12.3166 23.0976 11.6834 23.0976 11.2929 22.7071L7.29289 18.7071C6.90237 18.3166 6.90237 17.6834 7.29289 17.2929C7.68342 16.9024 8.31658 16.9024 8.70711 17.2929L11 19.5858V13C11 12.4477 11.4477 12 12 12Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -76,7 +76,7 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
           name="clip0_60_189"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.web.test.tsx.snap
index add5bd4f2a7..f943d98cc6a 100644
--- a/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.web.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
       <path
         d="M10.0209 3.04746C6.31707 2.62087 2.73368 4.52209 1.01031 7.82818C-0.713067 11.1343 -0.219588 15.1607 2.25118 17.9527C2.61719 18.3663 3.24917 18.4049 3.66277 18.0389C4.07636 17.6729 4.11494 17.0409 3.74894 16.6273C1.82723 14.4557 1.44341 11.3241 2.78382 8.75267C4.12422 6.18126 6.9113 4.70253 9.79204 5.03433C12.6728 5.36612 15.0507 7.43975 15.7714 10.2485C15.8849 10.6908 16.2835 11 16.7401 11L18.0008 11C19.7457 10.9986 21.2901 12.1285 21.8172 13.7919C22.3442 15.4552 21.7322 17.2683 20.3048 18.272C19.8531 18.5897 19.7444 19.2135 20.0621 19.6652C20.3797 20.117 21.0035 20.2257 21.4553 19.908C23.5962 18.4025 24.5143 15.6829 23.7238 13.1878C22.9333 10.693 20.6163 8.9983 17.9993 9L17.4807 9C16.3464 5.77429 13.4628 3.44389 10.0209 3.04746Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M12 12C12.5523 12 13 12.4477 13 13V19.5858L15.2929 17.2929C15.6834 16.9024 16.3166 16.9024 16.7071 17.2929C17.0976 17.6834 17.0976 18.3166 16.7071 18.7071L12.7071 22.7071C12.3166 23.0976 11.6834 23.0976 11.2929 22.7071L7.29289 18.7071C6.90237 18.3166 6.90237 17.6834 7.29289 17.2929C7.68342 16.9024 8.31658 16.9024 8.70711 17.2929L11 19.5858V13C11 12.4477 11.4477 12 12 12Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -35,7 +35,7 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/DownloadIcon/DownloadIcon.native.test.tsx b/packages/blade/src/components/Icons/DownloadIcon/DownloadIcon.native.test.tsx
index 6c8c1b67244..a56ad774cca 100644
--- a/packages/blade/src/components/Icons/DownloadIcon/DownloadIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/DownloadIcon/DownloadIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<DownloadIcon />', () => {
   it('should render DownloadIcon', () => {
     const renderTree = renderWithTheme(
-      <DownloadIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DownloadIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DownloadIcon/DownloadIcon.web.test.tsx b/packages/blade/src/components/Icons/DownloadIcon/DownloadIcon.web.test.tsx
index 58f1ac66e58..1fb99f74274 100644
--- a/packages/blade/src/components/Icons/DownloadIcon/DownloadIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/DownloadIcon/DownloadIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<DownloadIcon />', () => {
   it('should render DownloadIcon', () => {
     const { container } = renderWithTheme(
-      <DownloadIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DownloadIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.native.test.tsx.snap
index 1aeef8cbf39..53f5c19b43c 100644
--- a/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<DownloadIcon /> should render DownloadIcon 1`] = `
     >
       <RNSVGPath
         d="M13 2a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l4 4 .007.007a.996.996 0 0 0 .697.286h.006c.272 0 .518-.11.697-.286l.008-.008 4-3.999a1 1 0 0 0-1.415-1.414L13 13.586V2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<DownloadIcon /> should render DownloadIcon 1`] = `
       />
       <RNSVGPath
         d="M3 16a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-3a1 1 0 0 1 1-1Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.web.test.tsx.snap
index a7f15bc14b1..3ced145357c 100644
--- a/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<DownloadIcon /> should render DownloadIcon 1`] = `
     <path
       d="M13 2a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l4 4 .007.007a.996.996 0 0 0 .697.286h.006c.272 0 .518-.11.697-.286l.008-.008 4-3.999a1 1 0 0 0-1.415-1.414L13 13.586V2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M3 16a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-3a1 1 0 0 1 1-1Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/DropletIcon/DropletIcon.native.test.tsx b/packages/blade/src/components/Icons/DropletIcon/DropletIcon.native.test.tsx
index 5aa1a4a2b72..c9a8f6b0916 100644
--- a/packages/blade/src/components/Icons/DropletIcon/DropletIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/DropletIcon/DropletIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<DropletIcon />', () => {
   it('should render DropletIcon', () => {
     const renderTree = renderWithTheme(
-      <DropletIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DropletIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DropletIcon/DropletIcon.web.test.tsx b/packages/blade/src/components/Icons/DropletIcon/DropletIcon.web.test.tsx
index dc0cdea5307..788d956d4bb 100644
--- a/packages/blade/src/components/Icons/DropletIcon/DropletIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/DropletIcon/DropletIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<DropletIcon />', () => {
   it('should render DropletIcon', () => {
     const { container } = renderWithTheme(
-      <DropletIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <DropletIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.native.test.tsx.snap
index b5ac78493ba..c22fa2927b8 100644
--- a/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<DropletIcon /> should render DropletIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.9996 1.68994C12.265 1.68982 12.5195 1.79519 12.7071 1.98283L18.3669 7.6426C18.367 7.64268 18.3668 7.64253 18.3669 7.6426C20.9419 10.2161 21.7131 14.0877 20.3205 17.4514C18.9278 20.8152 15.6457 23.0086 12.005 23.0086C8.36433 23.0086 5.08223 20.8152 3.68954 17.4514C2.29697 14.0879 3.06782 10.2167 5.64255 7.6432C5.64275 7.643 5.64235 7.6434 5.64255 7.6432L11.2923 1.98346C11.4798 1.79565 11.7342 1.69006 11.9996 1.68994ZM12.0007 4.10478L7.0569 9.05728C5.05396 11.0589 4.45423 14.0701 5.53743 16.6864C6.62063 19.3027 9.17337 21.0086 12.005 21.0086C14.8367 21.0086 17.3894 19.3027 18.4726 16.6864C19.5558 14.0701 18.9561 11.0589 16.9531 9.05728L12.0007 4.10478Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.web.test.tsx.snap
index 12258fe7539..277b0ed2d02 100644
--- a/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<DropletIcon /> should render DropletIcon 1`] = `
       clip-rule="evenodd"
       d="M11.9996 1.68994C12.265 1.68982 12.5195 1.79519 12.7071 1.98283L18.3669 7.6426C18.367 7.64268 18.3668 7.64253 18.3669 7.6426C20.9419 10.2161 21.7131 14.0877 20.3205 17.4514C18.9278 20.8152 15.6457 23.0086 12.005 23.0086C8.36433 23.0086 5.08223 20.8152 3.68954 17.4514C2.29697 14.0879 3.06782 10.2167 5.64255 7.6432C5.64275 7.643 5.64235 7.6434 5.64255 7.6432L11.2923 1.98346C11.4798 1.79565 11.7342 1.69006 11.9996 1.68994ZM12.0007 4.10478L7.0569 9.05728C5.05396 11.0589 4.45423 14.0701 5.53743 16.6864C6.62063 19.3027 9.17337 21.0086 12.005 21.0086C14.8367 21.0086 17.3894 19.3027 18.4726 16.6864C19.5558 14.0701 18.9561 11.0589 16.9531 9.05728L12.0007 4.10478Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/EditComposeIcon/EditComposeIcon.native.test.tsx b/packages/blade/src/components/Icons/EditComposeIcon/EditComposeIcon.native.test.tsx
index 9b4e6db9bea..98e234b8487 100644
--- a/packages/blade/src/components/Icons/EditComposeIcon/EditComposeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/EditComposeIcon/EditComposeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<EditComposeIcon />', () => {
   it('should render EditComposeIcon', () => {
     const renderTree = renderWithTheme(
-      <EditComposeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EditComposeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EditComposeIcon/EditComposeIcon.web.test.tsx b/packages/blade/src/components/Icons/EditComposeIcon/EditComposeIcon.web.test.tsx
index a035ed8aefb..8e00fe613e0 100644
--- a/packages/blade/src/components/Icons/EditComposeIcon/EditComposeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/EditComposeIcon/EditComposeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<EditComposeIcon />', () => {
   it('should render EditComposeIcon', () => {
     const { container } = renderWithTheme(
-      <EditComposeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EditComposeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.native.test.tsx.snap
index 941fc5b4048..cf0aed3b79d 100644
--- a/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<EditComposeIcon /> should render EditComposeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M18.7071 1.29289C18.3166 0.902369 17.6834 0.902369 17.2929 1.29289L7.29289 11.2929C7.10536 11.4804 7 11.7348 7 12V16C7 16.5523 7.44772 17 8 17H12C12.2652 17 12.5196 16.8946 12.7071 16.7071L22.7071 6.70711C23.0976 6.31658 23.0976 5.68342 22.7071 5.29289L18.7071 1.29289ZM9 15V12.4142L18 3.41421L20.5858 6L11.5858 15H9Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<EditComposeIcon /> should render EditComposeIcon 1`] = `
       />
       <RNSVGPath
         d="M4 5C4 4.44772 4.44772 4 5 4H10.34C10.8923 4 11.34 3.55228 11.34 3C11.34 2.44772 10.8923 2 10.34 2H5C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V13.66C22 13.1077 21.5523 12.66 21 12.66C20.4477 12.66 20 13.1077 20 13.66V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.web.test.tsx.snap
index 33e27a51e55..c438318bcdf 100644
--- a/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<EditComposeIcon /> should render EditComposeIcon 1`] = `
       clip-rule="evenodd"
       d="M18.7071 1.29289C18.3166 0.902369 17.6834 0.902369 17.2929 1.29289L7.29289 11.2929C7.10536 11.4804 7 11.7348 7 12V16C7 16.5523 7.44772 17 8 17H12C12.2652 17 12.5196 16.8946 12.7071 16.7071L22.7071 6.70711C23.0976 6.31658 23.0976 5.68342 22.7071 5.29289L18.7071 1.29289ZM9 15V12.4142L18 3.41421L20.5858 6L11.5858 15H9Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M4 5C4 4.44772 4.44772 4 5 4H10.34C10.8923 4 11.34 3.55228 11.34 3C11.34 2.44772 10.8923 2 10.34 2H5C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V13.66C22 13.1077 21.5523 12.66 21 12.66C20.4477 12.66 20 13.1077 20 13.66V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/EditIcon/EditIcon.native.test.tsx b/packages/blade/src/components/Icons/EditIcon/EditIcon.native.test.tsx
index 47ec60ba0bd..6513d49d310 100644
--- a/packages/blade/src/components/Icons/EditIcon/EditIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/EditIcon/EditIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<EditIcon />', () => {
   it('should render EditIcon', () => {
     const renderTree = renderWithTheme(
-      <EditIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EditIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EditIcon/EditIcon.web.test.tsx b/packages/blade/src/components/Icons/EditIcon/EditIcon.web.test.tsx
index 6186d66c5b4..ed80b454b59 100644
--- a/packages/blade/src/components/Icons/EditIcon/EditIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/EditIcon/EditIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<EditIcon />', () => {
   it('should render EditIcon', () => {
     const { container } = renderWithTheme(
-      <EditIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EditIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.native.test.tsx.snap
index 3eed7acea95..42303b92449 100644
--- a/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<EditIcon /> should render EditIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M15.293 2.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-13 13A1 1 0 0 1 8 22H3a1 1 0 0 1-1-1v-5a1 1 0 0 1 .293-.707l13-13ZM4 16.414V20h3.586l12-12L16 4.414l-12 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.web.test.tsx.snap
index 5dbae94511a..6bd6b58c673 100644
--- a/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<EditIcon /> should render EditIcon 1`] = `
       clip-rule="evenodd"
       d="M15.293 2.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-13 13A1 1 0 0 1 8 22H3a1 1 0 0 1-1-1v-5a1 1 0 0 1 .293-.707l13-13ZM4 16.414V20h3.586l12-12L16 4.414l-12 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/EditInlineIcon/EditInlineIcon.native.test.tsx b/packages/blade/src/components/Icons/EditInlineIcon/EditInlineIcon.native.test.tsx
index 3226502ac61..1a7e7319361 100644
--- a/packages/blade/src/components/Icons/EditInlineIcon/EditInlineIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/EditInlineIcon/EditInlineIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<EditInlineIcon />', () => {
   it('should render EditInlineIcon', () => {
     const renderTree = renderWithTheme(
-      <EditInlineIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EditInlineIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EditInlineIcon/EditInlineIcon.web.test.tsx b/packages/blade/src/components/Icons/EditInlineIcon/EditInlineIcon.web.test.tsx
index 2d871948856..3e898d18eaa 100644
--- a/packages/blade/src/components/Icons/EditInlineIcon/EditInlineIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/EditInlineIcon/EditInlineIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<EditInlineIcon />', () => {
   it('should render EditInlineIcon', () => {
     const { container } = renderWithTheme(
-      <EditInlineIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EditInlineIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.native.test.tsx.snap
index dffdddce949..a931e8301e0 100644
--- a/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<EditInlineIcon /> should render EditInlineIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M14.7071 1.29289C14.3166 0.902369 13.6834 0.902369 13.2929 1.29289L2.29289 12.2929C2.10536 12.4804 2 12.7348 2 13V17C2 17.5523 2.44772 18 3 18H7C7.26522 18 7.51957 17.8946 7.70711 17.7071L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289L14.7071 1.29289ZM4 16V13.4142L14 3.41421L16.5858 6L6.58579 16H4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<EditInlineIcon /> should render EditInlineIcon 1`] = `
       />
       <RNSVGPath
         d="M3 21C2.44772 21 2 21.4477 2 22C2 22.5523 2.44772 23 3 23H21C21.5523 23 22 22.5523 22 22C22 21.4477 21.5523 21 21 21H3Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.web.test.tsx.snap
index 01e1c0511ab..efd5267cb74 100644
--- a/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<EditInlineIcon /> should render EditInlineIcon 1`] = `
       clip-rule="evenodd"
       d="M14.7071 1.29289C14.3166 0.902369 13.6834 0.902369 13.2929 1.29289L2.29289 12.2929C2.10536 12.4804 2 12.7348 2 13V17C2 17.5523 2.44772 18 3 18H7C7.26522 18 7.51957 17.8946 7.70711 17.7071L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289L14.7071 1.29289ZM4 16V13.4142L14 3.41421L16.5858 6L6.58579 16H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M3 21C2.44772 21 2 21.4477 2 22C2 22.5523 2.44772 23 3 23H21C21.5523 23 22 22.5523 22 22C22 21.4477 21.5523 21 21 21H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ExportIcon/ExportIcon.native.test.tsx b/packages/blade/src/components/Icons/ExportIcon/ExportIcon.native.test.tsx
index 3bda914a35c..7136665cb60 100644
--- a/packages/blade/src/components/Icons/ExportIcon/ExportIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ExportIcon/ExportIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ExportIcon />', () => {
   it('should render ExportIcon', () => {
     const renderTree = renderWithTheme(
-      <ExportIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ExportIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ExportIcon/ExportIcon.web.test.tsx b/packages/blade/src/components/Icons/ExportIcon/ExportIcon.web.test.tsx
index 53aeced6fc9..dbb3dde348b 100644
--- a/packages/blade/src/components/Icons/ExportIcon/ExportIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ExportIcon/ExportIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ExportIcon />', () => {
   it('should render ExportIcon', () => {
     const { container } = renderWithTheme(
-      <ExportIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ExportIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.native.test.tsx.snap
index 103ca7d321e..68c58797943 100644
--- a/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ExportIcon /> should render ExportIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M4 11C4.55228 11 5 11.4477 5 12V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V12C19 11.4477 19.4477 11 20 11C20.5523 11 21 11.4477 21 12V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V12C3 11.4477 3.44772 11 4 11Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<ExportIcon /> should render ExportIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289L16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711C16.3166 7.09763 15.6834 7.09763 15.2929 6.70711L12 3.41421L8.70711 6.70711C8.31658 7.09763 7.68342 7.09763 7.29289 6.70711C6.90237 6.31658 6.90237 5.68342 7.29289 5.29289L11.2929 1.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<ExportIcon /> should render ExportIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 1C12.5523 1 13 1.44772 13 2V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V2C11 1.44772 11.4477 1 12 1Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.web.test.tsx.snap
index 796c6031ef2..8e200857958 100644
--- a/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.web.test.tsx.snap
@@ -15,21 +15,21 @@ exports[`<ExportIcon /> should render ExportIcon 1`] = `
       clip-rule="evenodd"
       d="M4 11C4.55228 11 5 11.4477 5 12V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V12C19 11.4477 19.4477 11 20 11C20.5523 11 21 11.4477 21 12V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V12C3 11.4477 3.44772 11 4 11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289L16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711C16.3166 7.09763 15.6834 7.09763 15.2929 6.70711L12 3.41421L8.70711 6.70711C8.31658 7.09763 7.68342 7.09763 7.29289 6.70711C6.90237 6.31658 6.90237 5.68342 7.29289 5.29289L11.2929 1.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M12 1C12.5523 1 13 1.44772 13 2V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V2C11 1.44772 11.4477 1 12 1Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ExternalLinkIcon/ExternalLinkIcon.native.test.tsx b/packages/blade/src/components/Icons/ExternalLinkIcon/ExternalLinkIcon.native.test.tsx
index 662d91801f6..9d8009a53a4 100644
--- a/packages/blade/src/components/Icons/ExternalLinkIcon/ExternalLinkIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ExternalLinkIcon/ExternalLinkIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ExternalLinkIcon />', () => {
   it('should render ExternalLinkIcon', () => {
     const renderTree = renderWithTheme(
-      <ExternalLinkIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ExternalLinkIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ExternalLinkIcon/ExternalLinkIcon.web.test.tsx b/packages/blade/src/components/Icons/ExternalLinkIcon/ExternalLinkIcon.web.test.tsx
index 99c16907a7f..0c2047f27f0 100644
--- a/packages/blade/src/components/Icons/ExternalLinkIcon/ExternalLinkIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ExternalLinkIcon/ExternalLinkIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ExternalLinkIcon />', () => {
   it('should render ExternalLinkIcon', () => {
     const { container } = renderWithTheme(
-      <ExternalLinkIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ExternalLinkIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.native.test.tsx.snap
index aadf3de4f74..18c36aef3dd 100644
--- a/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ExternalLinkIcon /> should render ExternalLinkIcon 1`] = `
     >
       <RNSVGPath
         d="M14 3C14 2.44772 14.4477 2 15 2H21C21.5523 2 22 2.44772 22 3V9C22 9.55228 21.5523 10 21 10C20.4477 10 20 9.55228 20 9V5.41421L10.7071 14.7071C10.3166 15.0976 9.68342 15.0976 9.29289 14.7071C8.90237 14.3166 8.90237 13.6834 9.29289 13.2929L18.5858 4H15C14.4477 4 14 3.55228 14 3Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<ExternalLinkIcon /> should render ExternalLinkIcon 1`] = `
       />
       <RNSVGPath
         d="M5 7C4.44772 7 4 7.44772 4 8V19C4 19.5523 4.44772 20 5 20H16C16.5523 20 17 19.5523 17 19V13C17 12.4477 17.4477 12 18 12C18.5523 12 19 12.4477 19 13V19C19 20.6569 17.6569 22 16 22H5C3.34315 22 2 20.6569 2 19V8C2 6.34315 3.34315 5 5 5H11C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.web.test.tsx.snap
index 110347e1ea1..ebb6be295ab 100644
--- a/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<ExternalLinkIcon /> should render ExternalLinkIcon 1`] = `
     <path
       d="M14 3C14 2.44772 14.4477 2 15 2H21C21.5523 2 22 2.44772 22 3V9C22 9.55228 21.5523 10 21 10C20.4477 10 20 9.55228 20 9V5.41421L10.7071 14.7071C10.3166 15.0976 9.68342 15.0976 9.29289 14.7071C8.90237 14.3166 8.90237 13.6834 9.29289 13.2929L18.5858 4H15C14.4477 4 14 3.55228 14 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M5 7C4.44772 7 4 7.44772 4 8V19C4 19.5523 4.44772 20 5 20H16C16.5523 20 17 19.5523 17 19V13C17 12.4477 17.4477 12 18 12C18.5523 12 19 12.4477 19 13V19C19 20.6569 17.6569 22 16 22H5C3.34315 22 2 20.6569 2 19V8C2 6.34315 3.34315 5 5 5H11C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/EyeIcon/EyeIcon.native.test.tsx b/packages/blade/src/components/Icons/EyeIcon/EyeIcon.native.test.tsx
index 57382e2b83a..8844215c639 100644
--- a/packages/blade/src/components/Icons/EyeIcon/EyeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/EyeIcon/EyeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<EyeIcon />', () => {
   it('should render EyeIcon', () => {
     const renderTree = renderWithTheme(
-      <EyeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EyeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EyeIcon/EyeIcon.web.test.tsx b/packages/blade/src/components/Icons/EyeIcon/EyeIcon.web.test.tsx
index 52863cff042..13ccfe3e691 100644
--- a/packages/blade/src/components/Icons/EyeIcon/EyeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/EyeIcon/EyeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<EyeIcon />', () => {
   it('should render EyeIcon', () => {
     const { container } = renderWithTheme(
-      <EyeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EyeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.native.test.tsx.snap
index dab3f8c3636..f80dbce58e7 100644
--- a/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<EyeIcon /> should render EyeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<EyeIcon /> should render EyeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.web.test.tsx.snap
index b55aea1b334..cb1282a8361 100644
--- a/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<EyeIcon /> should render EyeIcon 1`] = `
       clip-rule="evenodd"
       d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/EyeOffIcon/EyeOffIcon.native.test.tsx b/packages/blade/src/components/Icons/EyeOffIcon/EyeOffIcon.native.test.tsx
index c421e42379f..1f2241e02b4 100644
--- a/packages/blade/src/components/Icons/EyeOffIcon/EyeOffIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/EyeOffIcon/EyeOffIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<EyeOffIcon />', () => {
   it('should render EyeOffIcon', () => {
     const renderTree = renderWithTheme(
-      <EyeOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EyeOffIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EyeOffIcon/EyeOffIcon.web.test.tsx b/packages/blade/src/components/Icons/EyeOffIcon/EyeOffIcon.web.test.tsx
index f66c3c5ac29..daac82bed5f 100644
--- a/packages/blade/src/components/Icons/EyeOffIcon/EyeOffIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/EyeOffIcon/EyeOffIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<EyeOffIcon />', () => {
   it('should render EyeOffIcon', () => {
     const { container } = renderWithTheme(
-      <EyeOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <EyeOffIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.native.test.tsx.snap
index d94d9bae023..fe425323688 100644
--- a/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<EyeOffIcon /> should render EyeOffIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L4.54852 5.96273C2.11768 8.23575 0.611157 10.5466 0.105573 11.5577C-0.0388552 11.8466 -0.0348927 12.1874 0.116212 12.4728C0.911795 13.9756 2.43155 16.1767 4.44905 17.9657C6.44912 19.7391 9.07199 21.2217 12.0463 21.0043C14.1054 20.965 16.1069 20.3524 17.8291 19.2433L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L1.70711 0.292893ZM16.3745 17.7888L14.0529 15.4671C13.137 16.0423 12.0118 16.2303 10.9354 15.9554C9.51816 15.5934 8.4115 14.4868 8.04956 13.0695C7.77466 11.9931 7.96267 10.8679 8.53787 9.95208L5.96358 7.3778C4.02162 9.18305 2.73293 11.0024 2.14239 12.0023C2.8992 13.3055 4.16865 15.044 5.77595 16.4692C7.59406 18.0814 9.71013 19.1781 11.9233 19.0079C11.9434 19.0063 11.9635 19.0054 11.9837 19.0051C13.5332 18.9797 15.0437 18.558 16.3745 17.7888ZM10.0291 11.4433C9.90866 11.8023 9.89029 12.1946 9.98736 12.5747C10.1683 13.2833 10.7217 13.8366 11.4303 14.0176C11.8104 14.1146 12.2026 14.0963 12.5616 13.9758L10.0291 11.4433ZM23.8777 11.5256C23.0808 10.0665 21.5613 7.9214 19.5476 6.15178C17.5484 4.3949 14.9387 2.90282 11.9828 3.00492C11.2049 3.00459 10.4296 3.09396 9.67209 3.27126C9.13434 3.39713 8.80045 3.93511 8.92632 4.47286C9.05219 5.0106 9.59016 5.3445 10.1279 5.21862C10.7408 5.07517 11.3682 5.00346 11.9977 5.00494C12.0107 5.00497 12.0238 5.00474 12.0369 5.00426C14.273 4.9217 16.4061 6.05356 18.2274 7.65411C19.8179 9.05181 21.0762 10.7264 21.8355 11.9857C21.6047 12.3498 21.3179 12.7884 21.0346 13.2066C20.8197 13.5237 20.6117 13.8221 20.4357 14.0622C20.2457 14.3213 20.1312 14.4595 20.0929 14.4978C19.7024 14.8884 19.7024 15.5215 20.0929 15.912C20.4834 16.3026 21.1166 16.3026 21.5071 15.912C21.6688 15.7504 21.8668 15.4927 22.0487 15.2446C22.2446 14.9774 22.4678 14.657 22.6904 14.3283C23.1344 13.6729 23.5951 12.9567 23.8575 12.5194C24.04 12.2152 24.0477 11.837 23.8777 11.5256Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
diff --git a/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.web.test.tsx.snap
index 2c9be21295d..98b3b7cc984 100644
--- a/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<EyeOffIcon /> should render EyeOffIcon 1`] = `
         clip-rule="evenodd"
         d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L4.54852 5.96273C2.11768 8.23575 0.611157 10.5466 0.105573 11.5577C-0.0388552 11.8466 -0.0348927 12.1874 0.116212 12.4728C0.911795 13.9756 2.43155 16.1767 4.44905 17.9657C6.44912 19.7391 9.07199 21.2217 12.0463 21.0043C14.1054 20.965 16.1069 20.3524 17.8291 19.2433L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L1.70711 0.292893ZM16.3745 17.7888L14.0529 15.4671C13.137 16.0423 12.0118 16.2303 10.9354 15.9554C9.51816 15.5934 8.4115 14.4868 8.04956 13.0695C7.77466 11.9931 7.96267 10.8679 8.53787 9.95208L5.96358 7.3778C4.02162 9.18305 2.73293 11.0024 2.14239 12.0023C2.8992 13.3055 4.16865 15.044 5.77595 16.4692C7.59406 18.0814 9.71013 19.1781 11.9233 19.0079C11.9434 19.0063 11.9635 19.0054 11.9837 19.0051C13.5332 18.9797 15.0437 18.558 16.3745 17.7888ZM10.0291 11.4433C9.90866 11.8023 9.89029 12.1946 9.98736 12.5747C10.1683 13.2833 10.7217 13.8366 11.4303 14.0176C11.8104 14.1146 12.2026 14.0963 12.5616 13.9758L10.0291 11.4433ZM23.8777 11.5256C23.0808 10.0665 21.5613 7.9214 19.5476 6.15178C17.5484 4.3949 14.9387 2.90282 11.9828 3.00492C11.2049 3.00459 10.4296 3.09396 9.67209 3.27126C9.13434 3.39713 8.80045 3.93511 8.92632 4.47286C9.05219 5.0106 9.59016 5.3445 10.1279 5.21862C10.7408 5.07517 11.3682 5.00346 11.9977 5.00494C12.0107 5.00497 12.0238 5.00474 12.0369 5.00426C14.273 4.9217 16.4061 6.05356 18.2274 7.65411C19.8179 9.05181 21.0762 10.7264 21.8355 11.9857C21.6047 12.3498 21.3179 12.7884 21.0346 13.2066C20.8197 13.5237 20.6117 13.8221 20.4357 14.0622C20.2457 14.3213 20.1312 14.4595 20.0929 14.4978C19.7024 14.8884 19.7024 15.5215 20.0929 15.912C20.4834 16.3026 21.1166 16.3026 21.5071 15.912C21.6688 15.7504 21.8668 15.4927 22.0487 15.2446C22.2446 14.9774 22.4678 14.657 22.6904 14.3283C23.1344 13.6729 23.5951 12.9567 23.8575 12.5194C24.04 12.2152 24.0477 11.837 23.8777 11.5256Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
diff --git a/packages/blade/src/components/Icons/FacebookIcon/FacebookIcon.native.test.tsx b/packages/blade/src/components/Icons/FacebookIcon/FacebookIcon.native.test.tsx
index 0fbf5c7b66d..c4879444aef 100644
--- a/packages/blade/src/components/Icons/FacebookIcon/FacebookIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FacebookIcon/FacebookIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FacebookIcon />', () => {
   it('should render FacebookIcon', () => {
     const renderTree = renderWithTheme(
-      <FacebookIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FacebookIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FacebookIcon/FacebookIcon.web.test.tsx b/packages/blade/src/components/Icons/FacebookIcon/FacebookIcon.web.test.tsx
index 6bd5d85607a..4057dcdc067 100644
--- a/packages/blade/src/components/Icons/FacebookIcon/FacebookIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FacebookIcon/FacebookIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FacebookIcon />', () => {
   it('should render FacebookIcon', () => {
     const { container } = renderWithTheme(
-      <FacebookIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FacebookIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.native.test.tsx.snap
index b70ae1f2ced..f40ed6823e9 100644
--- a/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FacebookIcon /> should render FacebookIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 7C8 3.68629 10.6863 1 14 1H17C17.5523 1 18 1.44772 18 2V6C18 6.55228 17.5523 7 17 7H14V9H17C17.3079 9 17.5987 9.14187 17.7882 9.38459C17.9777 9.6273 18.0448 9.94379 17.9701 10.2425L16.9701 14.2425C16.8589 14.6877 16.4589 15 16 15H14V22C14 22.5523 13.5523 23 13 23H9C8.44772 23 8 22.5523 8 22V15H6C5.44772 15 5 14.5523 5 14V10C5 9.44772 5.44772 9 6 9H8V7ZM14 3C11.7909 3 10 4.79086 10 7V10C10 10.5523 9.55228 11 9 11H7V13H9C9.55228 13 10 13.4477 10 14V21H12V14C12 13.4477 12.4477 13 13 13H15.2192L15.7192 11H13C12.4477 11 12 10.5523 12 10V7C12 5.89543 12.8954 5 14 5H16V3H14Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.web.test.tsx.snap
index 4f1e37d2763..42909b2b81d 100644
--- a/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FacebookIcon /> should render FacebookIcon 1`] = `
       clip-rule="evenodd"
       d="M8 7C8 3.68629 10.6863 1 14 1H17C17.5523 1 18 1.44772 18 2V6C18 6.55228 17.5523 7 17 7H14V9H17C17.3079 9 17.5987 9.14187 17.7882 9.38459C17.9777 9.6273 18.0448 9.94379 17.9701 10.2425L16.9701 14.2425C16.8589 14.6877 16.4589 15 16 15H14V22C14 22.5523 13.5523 23 13 23H9C8.44772 23 8 22.5523 8 22V15H6C5.44772 15 5 14.5523 5 14V10C5 9.44772 5.44772 9 6 9H8V7ZM14 3C11.7909 3 10 4.79086 10 7V10C10 10.5523 9.55228 11 9 11H7V13H9C9.55228 13 10 13.4477 10 14V21H12V14C12 13.4477 12.4477 13 13 13H15.2192L15.7192 11H13C12.4477 11 12 10.5523 12 10V7C12 5.89543 12.8954 5 14 5H16V3H14Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FastForwardIcon/FastForwardIcon.native.test.tsx b/packages/blade/src/components/Icons/FastForwardIcon/FastForwardIcon.native.test.tsx
index d291a261cd1..77fcc58c6e4 100644
--- a/packages/blade/src/components/Icons/FastForwardIcon/FastForwardIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FastForwardIcon/FastForwardIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FastForwardIcon />', () => {
   it('should render FastForwardIcon', () => {
     const renderTree = renderWithTheme(
-      <FastForwardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FastForwardIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FastForwardIcon/FastForwardIcon.web.test.tsx b/packages/blade/src/components/Icons/FastForwardIcon/FastForwardIcon.web.test.tsx
index 45a9ab36a1a..ce6fd72d589 100644
--- a/packages/blade/src/components/Icons/FastForwardIcon/FastForwardIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FastForwardIcon/FastForwardIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FastForwardIcon />', () => {
   it('should render FastForwardIcon', () => {
     const { container } = renderWithTheme(
-      <FastForwardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FastForwardIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.native.test.tsx.snap
index 1e16539a30a..637d94e0bca 100644
--- a/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FastForwardIcon /> should render FastForwardIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2.61394 4.21066C2.31246 3.97617 1.90375 3.93389 1.56065 4.10169C1.21755 4.2695 1 4.61807 1 5.00001V19C1 19.3819 1.21755 19.7305 1.56065 19.8983C1.90375 20.0661 2.31246 20.0238 2.61394 19.7894L11.6139 12.7894C11.8575 12.5999 12 12.3086 12 12V19C12 19.3819 12.2176 19.7305 12.5606 19.8983C12.9037 20.0661 13.3125 20.0238 13.6139 19.7894L22.6139 12.7894C22.8575 12.5999 23 12.3086 23 12C23 11.6914 22.8575 11.4001 22.6139 11.2107L13.6139 4.21066C13.3125 3.97617 12.9037 3.93389 12.5606 4.10169C12.2176 4.2695 12 4.61807 12 5.00001V12C12 11.6914 11.8575 11.4001 11.6139 11.2107L2.61394 4.21066ZM9.37118 12L3 16.9554V7.04465L9.37118 12ZM20.3712 12L14 16.9554V7.04465L20.3712 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.web.test.tsx.snap
index aa6cd1d585e..b66b1042797 100644
--- a/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FastForwardIcon /> should render FastForwardIcon 1`] = `
       clip-rule="evenodd"
       d="M2.61394 4.21066C2.31246 3.97617 1.90375 3.93389 1.56065 4.10169C1.21755 4.2695 1 4.61807 1 5.00001V19C1 19.3819 1.21755 19.7305 1.56065 19.8983C1.90375 20.0661 2.31246 20.0238 2.61394 19.7894L11.6139 12.7894C11.8575 12.5999 12 12.3086 12 12V19C12 19.3819 12.2176 19.7305 12.5606 19.8983C12.9037 20.0661 13.3125 20.0238 13.6139 19.7894L22.6139 12.7894C22.8575 12.5999 23 12.3086 23 12C23 11.6914 22.8575 11.4001 22.6139 11.2107L13.6139 4.21066C13.3125 3.97617 12.9037 3.93389 12.5606 4.10169C12.2176 4.2695 12 4.61807 12 5.00001V12C12 11.6914 11.8575 11.4001 11.6139 11.2107L2.61394 4.21066ZM9.37118 12L3 16.9554V7.04465L9.37118 12ZM20.3712 12L14 16.9554V7.04465L20.3712 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FeatherIcon/FeatherIcon.native.test.tsx b/packages/blade/src/components/Icons/FeatherIcon/FeatherIcon.native.test.tsx
index 793b64d2a3f..4716953e767 100644
--- a/packages/blade/src/components/Icons/FeatherIcon/FeatherIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FeatherIcon/FeatherIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FeatherIcon />', () => {
   it('should render FeatherIcon', () => {
     const renderTree = renderWithTheme(
-      <FeatherIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FeatherIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FeatherIcon/FeatherIcon.web.test.tsx b/packages/blade/src/components/Icons/FeatherIcon/FeatherIcon.web.test.tsx
index 05d1f2baf66..c13d300977f 100644
--- a/packages/blade/src/components/Icons/FeatherIcon/FeatherIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FeatherIcon/FeatherIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FeatherIcon />', () => {
   it('should render FeatherIcon', () => {
     const { container } = renderWithTheme(
-      <FeatherIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FeatherIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.native.test.tsx.snap
index 9b5809f0d62..7a949b457de 100644
--- a/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FeatherIcon /> should render FeatherIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.0429 4.04293C13.7779 1.30796 18.2121 1.30796 20.9471 4.04293C23.6818 6.77765 23.6821 11.2113 20.9479 13.9464L20.9471 13.9471L14.2082 20.7061C14.0205 20.8943 13.7657 21 13.5 21H5.41424L2.70711 23.7072C2.31658 24.0977 1.68342 24.0977 1.29289 23.7072C0.902369 23.3166 0.902369 22.6835 1.29289 22.293L4 19.5858V11.5C4 11.2348 4.10536 10.9805 4.29289 10.7929L11.0429 4.04293ZM13.0849 19H7.41424L9.41421 17.0001H15.079L13.0849 19ZM17.0706 15.0025L19.5318 12.534L19.5329 12.5329C21.4868 10.579 21.4868 7.41107 19.5329 5.45714C17.579 3.50322 14.411 3.50322 12.4571 5.45714L6 11.9142V17.5858L15.2929 8.29295C15.6834 7.90243 16.3166 7.90243 16.7071 8.29295C17.0976 8.68348 17.0976 9.31664 16.7071 9.70717L11.4142 15.0001H17C17.0237 15.0001 17.0473 15.0009 17.0706 15.0025Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.web.test.tsx.snap
index 52c4c503c3a..199e852da09 100644
--- a/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FeatherIcon /> should render FeatherIcon 1`] = `
       clip-rule="evenodd"
       d="M11.0429 4.04293C13.7779 1.30796 18.2121 1.30796 20.9471 4.04293C23.6818 6.77765 23.6821 11.2113 20.9479 13.9464L20.9471 13.9471L14.2082 20.7061C14.0205 20.8943 13.7657 21 13.5 21H5.41424L2.70711 23.7072C2.31658 24.0977 1.68342 24.0977 1.29289 23.7072C0.902369 23.3166 0.902369 22.6835 1.29289 22.293L4 19.5858V11.5C4 11.2348 4.10536 10.9805 4.29289 10.7929L11.0429 4.04293ZM13.0849 19H7.41424L9.41421 17.0001H15.079L13.0849 19ZM17.0706 15.0025L19.5318 12.534L19.5329 12.5329C21.4868 10.579 21.4868 7.41107 19.5329 5.45714C17.579 3.50322 14.411 3.50322 12.4571 5.45714L6 11.9142V17.5858L15.2929 8.29295C15.6834 7.90243 16.3166 7.90243 16.7071 8.29295C17.0976 8.68348 17.0976 9.31664 16.7071 9.70717L11.4142 15.0001H17C17.0237 15.0001 17.0473 15.0009 17.0706 15.0025Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FileIcon/FileIcon.native.test.tsx b/packages/blade/src/components/Icons/FileIcon/FileIcon.native.test.tsx
index 6be786e1f1d..b693fa0ea94 100644
--- a/packages/blade/src/components/Icons/FileIcon/FileIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FileIcon/FileIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FileIcon />', () => {
   it('should render FileIcon', () => {
     const renderTree = renderWithTheme(
-      <FileIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FileIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FileIcon/FileIcon.web.test.tsx b/packages/blade/src/components/Icons/FileIcon/FileIcon.web.test.tsx
index 60294c454a8..0790fd6da4e 100644
--- a/packages/blade/src/components/Icons/FileIcon/FileIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FileIcon/FileIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FileIcon />', () => {
   it('should render FileIcon', () => {
     const { container } = renderWithTheme(
-      <FileIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FileIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.native.test.tsx.snap
index 764b70e6818..095bcc9ebf8 100644
--- a/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FileIcon /> should render FileIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6 1C4.34315 1 3 2.34315 3 4V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V9C21 8.73478 20.8946 8.48043 20.7071 8.29289L13.7071 1.29289C13.5196 1.10536 13.2652 1 13 1H6ZM5 4C5 3.44772 5.44772 3 6 3H12V9C12 9.55228 12.4477 10 13 10H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V4ZM17.5858 8L14 4.41421V8H17.5858Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.web.test.tsx.snap
index 359b2eb30b9..7be547aac6b 100644
--- a/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FileIcon /> should render FileIcon 1`] = `
       clip-rule="evenodd"
       d="M6 1C4.34315 1 3 2.34315 3 4V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V9C21 8.73478 20.8946 8.48043 20.7071 8.29289L13.7071 1.29289C13.5196 1.10536 13.2652 1 13 1H6ZM5 4C5 3.44772 5.44772 3 6 3H12V9C12 9.55228 12.4477 10 13 10H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V4ZM17.5858 8L14 4.41421V8H17.5858Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FileMinusIcon/FileMinusIcon.native.test.tsx b/packages/blade/src/components/Icons/FileMinusIcon/FileMinusIcon.native.test.tsx
index 38b6c11764d..24fe311db39 100644
--- a/packages/blade/src/components/Icons/FileMinusIcon/FileMinusIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FileMinusIcon/FileMinusIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FileMinusIcon />', () => {
   it('should render FileMinusIcon', () => {
     const renderTree = renderWithTheme(
-      <FileMinusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FileMinusIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FileMinusIcon/FileMinusIcon.web.test.tsx b/packages/blade/src/components/Icons/FileMinusIcon/FileMinusIcon.web.test.tsx
index 9055e5bbc05..6b92d3db196 100644
--- a/packages/blade/src/components/Icons/FileMinusIcon/FileMinusIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FileMinusIcon/FileMinusIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FileMinusIcon />', () => {
   it('should render FileMinusIcon', () => {
     const { container } = renderWithTheme(
-      <FileMinusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FileMinusIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.native.test.tsx.snap
index 4e3a24404b4..dda48a44005 100644
--- a/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<FileMinusIcon /> should render FileMinusIcon 1`] = `
     >
       <RNSVGPath
         d="M9 14C8.44772 14 8 14.4477 8 15C8 15.5523 8.44772 16 9 16H15C15.5523 16 16 15.5523 16 15C16 14.4477 15.5523 14 15 14H9Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<FileMinusIcon /> should render FileMinusIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 4C3 2.34315 4.34315 1 6 1H14C14.2652 1 14.5196 1.10536 14.7071 1.29289L20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V9H14C13.4477 9 13 8.55228 13 8V3H6ZM15 4.41421L17.5858 7H15V4.41421Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.web.test.tsx.snap
index 7760538c14e..059d454a910 100644
--- a/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<FileMinusIcon /> should render FileMinusIcon 1`] = `
     <path
       d="M9 14C8.44772 14 8 14.4477 8 15C8 15.5523 8.44772 16 9 16H15C15.5523 16 16 15.5523 16 15C16 14.4477 15.5523 14 15 14H9Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M3 4C3 2.34315 4.34315 1 6 1H14C14.2652 1 14.5196 1.10536 14.7071 1.29289L20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V9H14C13.4477 9 13 8.55228 13 8V3H6ZM15 4.41421L17.5858 7H15V4.41421Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FilePlusIcon/FilePlusIcon.native.test.tsx b/packages/blade/src/components/Icons/FilePlusIcon/FilePlusIcon.native.test.tsx
index 36ee396da91..09e5ce1d45f 100644
--- a/packages/blade/src/components/Icons/FilePlusIcon/FilePlusIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FilePlusIcon/FilePlusIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FilePlusIcon />', () => {
   it('should render FilePlusIcon', () => {
     const renderTree = renderWithTheme(
-      <FilePlusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FilePlusIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FilePlusIcon/FilePlusIcon.web.test.tsx b/packages/blade/src/components/Icons/FilePlusIcon/FilePlusIcon.web.test.tsx
index ba2c78b6d39..029de11fccf 100644
--- a/packages/blade/src/components/Icons/FilePlusIcon/FilePlusIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FilePlusIcon/FilePlusIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FilePlusIcon />', () => {
   it('should render FilePlusIcon', () => {
     const { container } = renderWithTheme(
-      <FilePlusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FilePlusIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.native.test.tsx.snap
index 0c8155b8f23..dd7d1c225d6 100644
--- a/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<FilePlusIcon /> should render FilePlusIcon 1`] = `
     >
       <RNSVGPath
         d="M12 11C12.5523 11 13 11.4477 13 12V14H15C15.5523 14 16 14.4477 16 15C16 15.5523 15.5523 16 15 16H13V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V16H9C8.44772 16 8 15.5523 8 15C8 14.4477 8.44772 14 9 14H11V12C11 11.4477 11.4477 11 12 11Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<FilePlusIcon /> should render FilePlusIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6 1C4.34315 1 3 2.34315 3 4V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V8C21 7.73478 20.8946 7.48043 20.7071 7.29289L14.7071 1.29289C14.5196 1.10536 14.2652 1 14 1H6ZM5 4C5 3.44772 5.44772 3 6 3H13V8C13 8.55228 13.4477 9 14 9H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V4ZM17.5858 7L15 4.41421V7H17.5858Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.web.test.tsx.snap
index 5df4f9700a3..a28e9f1b329 100644
--- a/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<FilePlusIcon /> should render FilePlusIcon 1`] = `
     <path
       d="M12 11C12.5523 11 13 11.4477 13 12V14H15C15.5523 14 16 14.4477 16 15C16 15.5523 15.5523 16 15 16H13V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V16H9C8.44772 16 8 15.5523 8 15C8 14.4477 8.44772 14 9 14H11V12C11 11.4477 11.4477 11 12 11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M6 1C4.34315 1 3 2.34315 3 4V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V8C21 7.73478 20.8946 7.48043 20.7071 7.29289L14.7071 1.29289C14.5196 1.10536 14.2652 1 14 1H6ZM5 4C5 3.44772 5.44772 3 6 3H13V8C13 8.55228 13.4477 9 14 9H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V4ZM17.5858 7L15 4.41421V7H17.5858Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FileTextIcon/FileTextIcon.native.test.tsx b/packages/blade/src/components/Icons/FileTextIcon/FileTextIcon.native.test.tsx
index 712031c9624..558bba6704d 100644
--- a/packages/blade/src/components/Icons/FileTextIcon/FileTextIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FileTextIcon/FileTextIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FileTextIcon />', () => {
   it('should render FileTextIcon', () => {
     const renderTree = renderWithTheme(
-      <FileTextIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FileTextIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FileTextIcon/FileTextIcon.web.test.tsx b/packages/blade/src/components/Icons/FileTextIcon/FileTextIcon.web.test.tsx
index ab6cc8813cc..6bb4730456d 100644
--- a/packages/blade/src/components/Icons/FileTextIcon/FileTextIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FileTextIcon/FileTextIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FileTextIcon />', () => {
   it('should render FileTextIcon', () => {
     const { container } = renderWithTheme(
-      <FileTextIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FileTextIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.native.test.tsx.snap
index 4dad48b4305..77ca6603271 100644
--- a/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
     >
       <RNSVGPath
         d="M8 12C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H16C16.5523 14 17 13.5523 17 13C17 12.4477 16.5523 12 16 12H8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
       />
       <RNSVGPath
         d="M7 17C7 16.4477 7.44772 16 8 16H16C16.5523 16 17 16.4477 17 17C17 17.5523 16.5523 18 16 18H8C7.44772 18 7 17.5523 7 17Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
       />
       <RNSVGPath
         d="M8 8C7.44772 8 7 8.44772 7 9C7 9.55229 7.44772 10 8 10H10C10.5523 10 11 9.55229 11 9C11 8.44772 10.5523 8 10 8H8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -79,7 +79,7 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 4C3 2.34315 4.34315 1 6 1H14C14.2652 1 14.5196 1.10536 14.7071 1.29289L20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V9H14C13.4477 9 13 8.55228 13 8V3H6ZM15 4.41421L17.5858 7H15V4.41421Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.web.test.tsx.snap
index a8013669d5b..442a45a5170 100644
--- a/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.web.test.tsx.snap
@@ -14,23 +14,23 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
     <path
       d="M8 12C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H16C16.5523 14 17 13.5523 17 13C17 12.4477 16.5523 12 16 12H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M7 17C7 16.4477 7.44772 16 8 16H16C16.5523 16 17 16.4477 17 17C17 17.5523 16.5523 18 16 18H8C7.44772 18 7 17.5523 7 17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M8 8C7.44772 8 7 8.44772 7 9C7 9.55229 7.44772 10 8 10H10C10.5523 10 11 9.55229 11 9C11 8.44772 10.5523 8 10 8H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M3 4C3 2.34315 4.34315 1 6 1H14C14.2652 1 14.5196 1.10536 14.7071 1.29289L20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V9H14C13.4477 9 13 8.55228 13 8V3H6ZM15 4.41421L17.5858 7H15V4.41421Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FileZipIcon/FileZipIcon.native.test.tsx b/packages/blade/src/components/Icons/FileZipIcon/FileZipIcon.native.test.tsx
index 9118836638c..44e62cf8eec 100644
--- a/packages/blade/src/components/Icons/FileZipIcon/FileZipIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FileZipIcon/FileZipIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FileZipIcon />', () => {
   it('should render FileZipIcon', () => {
     const renderTree = renderWithTheme(
-      <FileZipIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FileZipIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FileZipIcon/FileZipIcon.web.test.tsx b/packages/blade/src/components/Icons/FileZipIcon/FileZipIcon.web.test.tsx
index 3712846bdf2..9c49809b8f6 100644
--- a/packages/blade/src/components/Icons/FileZipIcon/FileZipIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FileZipIcon/FileZipIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FileZipIcon />', () => {
   it('should render FileZipIcon', () => {
     const { container } = renderWithTheme(
-      <FileZipIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FileZipIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FileZipIcon/__snapshots__/FileZipIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FileZipIcon/__snapshots__/FileZipIcon.native.test.tsx.snap
index c2c1dadc8a2..43eaece87f2 100644
--- a/packages/blade/src/components/Icons/FileZipIcon/__snapshots__/FileZipIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileZipIcon/__snapshots__/FileZipIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<FileZipIcon /> should render FileZipIcon 1`] = `
     >
       <RNSVGPath
         d="M6.6958 5.9741V7.99188H8.69824V9.98041H10.7062V7.95787H8.7038V5.9741H6.6958Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<FileZipIcon /> should render FileZipIcon 1`] = `
       />
       <RNSVGPath
         d="M6.6958 10.0097V12.0274H8.69824V14.0255H10.7062V12.0029H8.7038V10.0097H6.6958Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<FileZipIcon /> should render FileZipIcon 1`] = `
       />
       <RNSVGPath
         d="M6.6958 14.0452V16.063H8.69824V18.0706H10.7062V16.048H8.7038V14.0452H6.6958Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -79,7 +79,7 @@ exports[`<FileZipIcon /> should render FileZipIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6.012 23H17.988C19.6515 23 21 21.6527 21 19.9907V7.99932C21 7.73222 20.8934 7.47615 20.7038 7.28786L14.6655 1.29164C14.4774 1.10485 14.2229 1 13.9577 1H6.012C4.34852 1 3 2.34732 3 4.00932V19.9907C3 21.6527 4.34852 23 6.012 23ZM8.69824 20.9938H6.012C5.45751 20.9938 5.008 20.5447 5.008 19.9907V4.00932C5.008 3.45532 5.45751 3.00621 6.012 3.00621H6.6958V3.95632L8.69824 3.95632V5.93533H10.7062V3.91279H8.7038V3.00621H13.1416V8.38608C13.1416 8.94008 13.5911 9.38918 14.1456 9.38918H18.992V19.9907C18.992 20.5447 18.5425 20.9938 17.988 20.9938H10.7062V20.0931H8.7038V18.0808H6.6958V20.0985H8.69824V20.9938ZM17.9511 7.38297L15.1496 4.60099V7.38297H17.9511Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FileZipIcon/__snapshots__/FileZipIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FileZipIcon/__snapshots__/FileZipIcon.web.test.tsx.snap
index ac0daa2bd23..8dd2f3baa69 100644
--- a/packages/blade/src/components/Icons/FileZipIcon/__snapshots__/FileZipIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileZipIcon/__snapshots__/FileZipIcon.web.test.tsx.snap
@@ -14,23 +14,23 @@ exports[`<FileZipIcon /> should render FileZipIcon 1`] = `
     <path
       d="M6.6958 5.9741V7.99188H8.69824V9.98041H10.7062V7.95787H8.7038V5.9741H6.6958Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M6.6958 10.0097V12.0274H8.69824V14.0255H10.7062V12.0029H8.7038V10.0097H6.6958Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M6.6958 14.0452V16.063H8.69824V18.0706H10.7062V16.048H8.7038V14.0452H6.6958Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M6.012 23H17.988C19.6515 23 21 21.6527 21 19.9907V7.99932C21 7.73222 20.8934 7.47615 20.7038 7.28786L14.6655 1.29164C14.4774 1.10485 14.2229 1 13.9577 1H6.012C4.34852 1 3 2.34732 3 4.00932V19.9907C3 21.6527 4.34852 23 6.012 23ZM8.69824 20.9938H6.012C5.45751 20.9938 5.008 20.5447 5.008 19.9907V4.00932C5.008 3.45532 5.45751 3.00621 6.012 3.00621H6.6958V3.95632L8.69824 3.95632V5.93533H10.7062V3.91279H8.7038V3.00621H13.1416V8.38608C13.1416 8.94008 13.5911 9.38918 14.1456 9.38918H18.992V19.9907C18.992 20.5447 18.5425 20.9938 17.988 20.9938H10.7062V20.0931H8.7038V18.0808H6.6958V20.0985H8.69824V20.9938ZM17.9511 7.38297L15.1496 4.60099V7.38297H17.9511Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FilmIcon/FilmIcon.native.test.tsx b/packages/blade/src/components/Icons/FilmIcon/FilmIcon.native.test.tsx
index 547710c169d..c4dcb6f3825 100644
--- a/packages/blade/src/components/Icons/FilmIcon/FilmIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FilmIcon/FilmIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FilmIcon />', () => {
   it('should render FilmIcon', () => {
     const renderTree = renderWithTheme(
-      <FilmIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FilmIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FilmIcon/FilmIcon.web.test.tsx b/packages/blade/src/components/Icons/FilmIcon/FilmIcon.web.test.tsx
index b341c51373e..fe7474a74c0 100644
--- a/packages/blade/src/components/Icons/FilmIcon/FilmIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FilmIcon/FilmIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FilmIcon />', () => {
   it('should render FilmIcon', () => {
     const { container } = renderWithTheme(
-      <FilmIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FilmIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.native.test.tsx.snap
index db301e84b74..7557f7c2f5f 100644
--- a/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FilmIcon /> should render FilmIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M4.18 1C2.42373 1 1 2.42374 1 4.18V19.82C1 21.5763 2.42374 23 4.18 23H19.82C21.5763 23 23 21.5763 23 19.82V4.18C23 2.42373 21.5763 1 19.82 1H4.18ZM21 6V4.18C21 3.5283 20.4717 3 19.82 3H18V6H21ZM18 8H21V11H18V8ZM16 3H8V11H16V3ZM21 13V16H18V13H21ZM21 18H18V21H19.82C20.4717 21 21 20.4717 21 19.82V18ZM16 13V21H8V13H16ZM3 18V19.82C3 20.4717 3.5283 21 4.18 21H6V18H3ZM6 16H3V13H6V16ZM3 11V8H6V11H3ZM3 6H6V3H4.18C3.5283 3 3 3.5283 3 4.18V6Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.web.test.tsx.snap
index 39db2f7e2fa..2a5a419db99 100644
--- a/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FilmIcon /> should render FilmIcon 1`] = `
       clip-rule="evenodd"
       d="M4.18 1C2.42373 1 1 2.42374 1 4.18V19.82C1 21.5763 2.42374 23 4.18 23H19.82C21.5763 23 23 21.5763 23 19.82V4.18C23 2.42373 21.5763 1 19.82 1H4.18ZM21 6V4.18C21 3.5283 20.4717 3 19.82 3H18V6H21ZM18 8H21V11H18V8ZM16 3H8V11H16V3ZM21 13V16H18V13H21ZM21 18H18V21H19.82C20.4717 21 21 20.4717 21 19.82V18ZM16 13V21H8V13H16ZM3 18V19.82C3 20.4717 3.5283 21 4.18 21H6V18H3ZM6 16H3V13H6V16ZM3 11V8H6V11H3ZM3 6H6V3H4.18C3.5283 3 3 3.5283 3 4.18V6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FilterIcon/FilterIcon.native.test.tsx b/packages/blade/src/components/Icons/FilterIcon/FilterIcon.native.test.tsx
index 588edc3c052..d206bc58dca 100644
--- a/packages/blade/src/components/Icons/FilterIcon/FilterIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FilterIcon/FilterIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FilterIcon />', () => {
   it('should render FilterIcon', () => {
     const renderTree = renderWithTheme(
-      <FilterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FilterIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FilterIcon/FilterIcon.web.test.tsx b/packages/blade/src/components/Icons/FilterIcon/FilterIcon.web.test.tsx
index 9130e36b3ae..d4eec8e005f 100644
--- a/packages/blade/src/components/Icons/FilterIcon/FilterIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FilterIcon/FilterIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FilterIcon />', () => {
   it('should render FilterIcon', () => {
     const { container } = renderWithTheme(
-      <FilterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FilterIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.native.test.tsx.snap
index bc48e1c460f..7483e00f46d 100644
--- a/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FilterIcon /> should render FilterIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1.0929 2.57912C1.25675 2.22596 1.61069 2 2.00001 2H22C22.3893 2 22.7433 2.22596 22.9071 2.57912C23.071 2.93229 23.015 3.34845 22.7636 3.64573L15 12.8261V21C15 21.3466 14.8206 21.6684 14.5257 21.8507C14.2309 22.0329 13.8628 22.0494 13.5528 21.8944L9.5528 19.8944C9.21402 19.725 9.00001 19.3788 9.00001 19V12.8261L1.23644 3.64573C0.985046 3.34845 0.929037 2.93229 1.0929 2.57912ZM4.15532 4L10.7636 11.8143C10.9162 11.9948 11 12.2236 11 12.46V18.382L13 19.382V12.46C13 12.2236 13.0838 11.9948 13.2364 11.8143L19.8447 4H4.15532Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.web.test.tsx.snap
index d4fd9325c79..5e0db991998 100644
--- a/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FilterIcon /> should render FilterIcon 1`] = `
       clip-rule="evenodd"
       d="M1.0929 2.57912C1.25675 2.22596 1.61069 2 2.00001 2H22C22.3893 2 22.7433 2.22596 22.9071 2.57912C23.071 2.93229 23.015 3.34845 22.7636 3.64573L15 12.8261V21C15 21.3466 14.8206 21.6684 14.5257 21.8507C14.2309 22.0329 13.8628 22.0494 13.5528 21.8944L9.5528 19.8944C9.21402 19.725 9.00001 19.3788 9.00001 19V12.8261L1.23644 3.64573C0.985046 3.34845 0.929037 2.93229 1.0929 2.57912ZM4.15532 4L10.7636 11.8143C10.9162 11.9948 11 12.2236 11 12.46V18.382L13 19.382V12.46C13 12.2236 13.0838 11.9948 13.2364 11.8143L19.8447 4H4.15532Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FlagIcon/FlagIcon.native.test.tsx b/packages/blade/src/components/Icons/FlagIcon/FlagIcon.native.test.tsx
index 800a43b6558..374658d01a8 100644
--- a/packages/blade/src/components/Icons/FlagIcon/FlagIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FlagIcon/FlagIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FlagIcon />', () => {
   it('should render FlagIcon', () => {
     const renderTree = renderWithTheme(
-      <FlagIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FlagIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FlagIcon/FlagIcon.web.test.tsx b/packages/blade/src/components/Icons/FlagIcon/FlagIcon.web.test.tsx
index 3cb3b0e1741..2553a6c77a7 100644
--- a/packages/blade/src/components/Icons/FlagIcon/FlagIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FlagIcon/FlagIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FlagIcon />', () => {
   it('should render FlagIcon', () => {
     const { container } = renderWithTheme(
-      <FlagIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FlagIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.native.test.tsx.snap
index b5070adde24..382c60300c2 100644
--- a/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FlagIcon /> should render FlagIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 1C6.70808 1 5.6887 1.17938 4.92329 1.4216C4.18729 1.65451 3.61805 1.96773 3.29289 2.29289C3.10536 2.48043 3 2.73478 3 3V22C3 22.5523 3.44772 23 4 23C4.55228 23 5 22.5523 5 22V15.5337C5.13381 15.469 5.30833 15.3975 5.52671 15.3284C6.07797 15.154 6.89192 15 8 15C9.28069 15 10.3605 15.4212 11.6286 15.9285L11.6843 15.9508C12.8931 16.4344 14.283 16.9906 15.9575 16.9999C16.6651 17.0523 17.5752 16.8465 18.313 16.6373C19.1141 16.4102 19.8957 16.1234 20.3792 15.9253C20.7547 15.7714 21 15.4058 21 15V3C21 2.61559 20.7797 2.26522 20.4332 2.0987C20.0867 1.93218 19.6755 1.979 19.3753 2.21913C19.0653 2.46712 18.5071 2.67878 17.8039 2.81942C17.1286 2.95448 16.4454 3 16 3C14.7193 3 13.6395 2.57876 12.3714 2.07152L12.3157 2.04923C11.0967 1.56148 9.69345 1 8 1ZM5 13.3978V3.53374C5.13381 3.46899 5.30833 3.39751 5.52671 3.3284C6.07797 3.15395 6.89192 3 8 3C9.28069 3 10.3605 3.42124 11.6286 3.92848L11.6843 3.95077C12.9033 4.43852 14.3066 5 16 5C16.5546 5 17.3714 4.94552 18.1961 4.78058C18.4534 4.72912 18.7258 4.66421 19 4.58132V14.313C18.6326 14.4462 18.2014 14.5901 17.7675 14.7131C17.0044 14.9295 16.3952 15.0324 16.0926 15.0043C16.0618 15.0014 16.0309 15 16 15C14.7193 15 13.6395 14.5788 12.3714 14.0715L12.3157 14.0492C11.0967 13.5615 9.69345 13 8 13C6.75077 13 5.75636 13.1677 5 13.3978Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.web.test.tsx.snap
index b9295dd224a..e15ce019c59 100644
--- a/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FlagIcon /> should render FlagIcon 1`] = `
       clip-rule="evenodd"
       d="M8 1C6.70808 1 5.6887 1.17938 4.92329 1.4216C4.18729 1.65451 3.61805 1.96773 3.29289 2.29289C3.10536 2.48043 3 2.73478 3 3V22C3 22.5523 3.44772 23 4 23C4.55228 23 5 22.5523 5 22V15.5337C5.13381 15.469 5.30833 15.3975 5.52671 15.3284C6.07797 15.154 6.89192 15 8 15C9.28069 15 10.3605 15.4212 11.6286 15.9285L11.6843 15.9508C12.8931 16.4344 14.283 16.9906 15.9575 16.9999C16.6651 17.0523 17.5752 16.8465 18.313 16.6373C19.1141 16.4102 19.8957 16.1234 20.3792 15.9253C20.7547 15.7714 21 15.4058 21 15V3C21 2.61559 20.7797 2.26522 20.4332 2.0987C20.0867 1.93218 19.6755 1.979 19.3753 2.21913C19.0653 2.46712 18.5071 2.67878 17.8039 2.81942C17.1286 2.95448 16.4454 3 16 3C14.7193 3 13.6395 2.57876 12.3714 2.07152L12.3157 2.04923C11.0967 1.56148 9.69345 1 8 1ZM5 13.3978V3.53374C5.13381 3.46899 5.30833 3.39751 5.52671 3.3284C6.07797 3.15395 6.89192 3 8 3C9.28069 3 10.3605 3.42124 11.6286 3.92848L11.6843 3.95077C12.9033 4.43852 14.3066 5 16 5C16.5546 5 17.3714 4.94552 18.1961 4.78058C18.4534 4.72912 18.7258 4.66421 19 4.58132V14.313C18.6326 14.4462 18.2014 14.5901 17.7675 14.7131C17.0044 14.9295 16.3952 15.0324 16.0926 15.0043C16.0618 15.0014 16.0309 15 16 15C14.7193 15 13.6395 14.5788 12.3714 14.0715L12.3157 14.0492C11.0967 13.5615 9.69345 13 8 13C6.75077 13 5.75636 13.1677 5 13.3978Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FolderIcon/FolderIcon.native.test.tsx b/packages/blade/src/components/Icons/FolderIcon/FolderIcon.native.test.tsx
index df5db9cd865..ed69d8ac696 100644
--- a/packages/blade/src/components/Icons/FolderIcon/FolderIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FolderIcon/FolderIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FolderIcon />', () => {
   it('should render FolderIcon', () => {
     const renderTree = renderWithTheme(
-      <FolderIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FolderIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FolderIcon/FolderIcon.web.test.tsx b/packages/blade/src/components/Icons/FolderIcon/FolderIcon.web.test.tsx
index af28aaa1964..23448f628ca 100644
--- a/packages/blade/src/components/Icons/FolderIcon/FolderIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FolderIcon/FolderIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FolderIcon />', () => {
   it('should render FolderIcon', () => {
     const { container } = renderWithTheme(
-      <FolderIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FolderIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.native.test.tsx.snap
index ad6ab19a436..ee0f2f7bc04 100644
--- a/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FolderIcon /> should render FolderIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M4 4C3.44772 4 3 4.44772 3 5V19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19V8C21 7.44772 20.5523 7 20 7H11C10.6656 7 10.3534 6.8329 10.1679 6.5547L8.46482 4H4ZM1 5C1 3.34315 2.34315 2 4 2H9C9.33435 2 9.64658 2.1671 9.83205 2.4453L11.5352 5H20C21.6569 5 23 6.34315 23 8V19C23 20.6569 21.6569 22 20 22H4C2.34315 22 1 20.6569 1 19V5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.web.test.tsx.snap
index 6f2eaece5ff..63434c46bcc 100644
--- a/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FolderIcon /> should render FolderIcon 1`] = `
       clip-rule="evenodd"
       d="M4 4C3.44772 4 3 4.44772 3 5V19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19V8C21 7.44772 20.5523 7 20 7H11C10.6656 7 10.3534 6.8329 10.1679 6.5547L8.46482 4H4ZM1 5C1 3.34315 2.34315 2 4 2H9C9.33435 2 9.64658 2.1671 9.83205 2.4453L11.5352 5H20C21.6569 5 23 6.34315 23 8V19C23 20.6569 21.6569 22 20 22H4C2.34315 22 1 20.6569 1 19V5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FullScreenEnterIcon/FullScreenEnterIcon.native.test.tsx b/packages/blade/src/components/Icons/FullScreenEnterIcon/FullScreenEnterIcon.native.test.tsx
index 7251117d146..434a57d5a3d 100644
--- a/packages/blade/src/components/Icons/FullScreenEnterIcon/FullScreenEnterIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FullScreenEnterIcon/FullScreenEnterIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FullScreenEnterIcon />', () => {
   it('should render FullScreenEnterIcon', () => {
     const renderTree = renderWithTheme(
-      <FullScreenEnterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FullScreenEnterIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FullScreenEnterIcon/FullScreenEnterIcon.web.test.tsx b/packages/blade/src/components/Icons/FullScreenEnterIcon/FullScreenEnterIcon.web.test.tsx
index 235a6d000c5..038858afdd6 100644
--- a/packages/blade/src/components/Icons/FullScreenEnterIcon/FullScreenEnterIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FullScreenEnterIcon/FullScreenEnterIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FullScreenEnterIcon />', () => {
   it('should render FullScreenEnterIcon', () => {
     const { container } = renderWithTheme(
-      <FullScreenEnterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FullScreenEnterIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.native.test.tsx.snap
index af4fcb8ee46..a75c1a6413a 100644
--- a/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FullScreenEnterIcon /> should render FullScreenEnterIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 5C2 3.34315 3.34315 2 5 2H8C8.55228 2 9 2.44772 9 3C9 3.55228 8.55228 4 8 4H5C4.44772 4 4 4.44772 4 5V8C4 8.55228 3.55228 9 3 9C2.44772 9 2 8.55228 2 8V5ZM15 3C15 2.44772 15.4477 2 16 2H19C20.6569 2 22 3.34315 22 5V8C22 8.55228 21.5523 9 21 9C20.4477 9 20 8.55228 20 8V5C20 4.44772 19.5523 4 19 4H16C15.4477 4 15 3.55228 15 3ZM3 15C3.55228 15 4 15.4477 4 16V19C4 19.5523 4.44772 20 5 20H8C8.55228 20 9 20.4477 9 21C9 21.5523 8.55228 22 8 22H5C3.34315 22 2 20.6569 2 19V16C2 15.4477 2.44772 15 3 15ZM21 15C21.5523 15 22 15.4477 22 16V19C22 20.6569 20.6569 22 19 22H16C15.4477 22 15 21.5523 15 21C15 20.4477 15.4477 20 16 20H19C19.5523 20 20 19.5523 20 19V16C20 15.4477 20.4477 15 21 15Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.web.test.tsx.snap
index 817809bbdf7..6f8c520965c 100644
--- a/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FullScreenEnterIcon /> should render FullScreenEnterIcon 1`] = `
       clip-rule="evenodd"
       d="M2 5C2 3.34315 3.34315 2 5 2H8C8.55228 2 9 2.44772 9 3C9 3.55228 8.55228 4 8 4H5C4.44772 4 4 4.44772 4 5V8C4 8.55228 3.55228 9 3 9C2.44772 9 2 8.55228 2 8V5ZM15 3C15 2.44772 15.4477 2 16 2H19C20.6569 2 22 3.34315 22 5V8C22 8.55228 21.5523 9 21 9C20.4477 9 20 8.55228 20 8V5C20 4.44772 19.5523 4 19 4H16C15.4477 4 15 3.55228 15 3ZM3 15C3.55228 15 4 15.4477 4 16V19C4 19.5523 4.44772 20 5 20H8C8.55228 20 9 20.4477 9 21C9 21.5523 8.55228 22 8 22H5C3.34315 22 2 20.6569 2 19V16C2 15.4477 2.44772 15 3 15ZM21 15C21.5523 15 22 15.4477 22 16V19C22 20.6569 20.6569 22 19 22H16C15.4477 22 15 21.5523 15 21C15 20.4477 15.4477 20 16 20H19C19.5523 20 20 19.5523 20 19V16C20 15.4477 20.4477 15 21 15Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/FullScreenExitIcon/FullScreenExitIcon.native.test.tsx b/packages/blade/src/components/Icons/FullScreenExitIcon/FullScreenExitIcon.native.test.tsx
index b9518b88db0..d43ab4d4577 100644
--- a/packages/blade/src/components/Icons/FullScreenExitIcon/FullScreenExitIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/FullScreenExitIcon/FullScreenExitIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<FullScreenExitIcon />', () => {
   it('should render FullScreenExitIcon', () => {
     const renderTree = renderWithTheme(
-      <FullScreenExitIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FullScreenExitIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FullScreenExitIcon/FullScreenExitIcon.web.test.tsx b/packages/blade/src/components/Icons/FullScreenExitIcon/FullScreenExitIcon.web.test.tsx
index 0689f476ffe..d5654f8cc06 100644
--- a/packages/blade/src/components/Icons/FullScreenExitIcon/FullScreenExitIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/FullScreenExitIcon/FullScreenExitIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<FullScreenExitIcon />', () => {
   it('should render FullScreenExitIcon', () => {
     const { container } = renderWithTheme(
-      <FullScreenExitIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <FullScreenExitIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.native.test.tsx.snap
index b4453974449..49f4a84e30f 100644
--- a/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<FullScreenExitIcon /> should render FullScreenExitIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 2C8.55228 2 9 2.44772 9 3V6C9 7.65685 7.65685 9 6 9H3C2.44772 9 2 8.55228 2 8C2 7.44772 2.44772 7 3 7H6C6.55228 7 7 6.55228 7 6V3C7 2.44772 7.44772 2 8 2ZM16 2C16.5523 2 17 2.44772 17 3V6C17 6.55228 17.4477 7 18 7H21C21.5523 7 22 7.44772 22 8C22 8.55228 21.5523 9 21 9H18C16.3431 9 15 7.65685 15 6V3C15 2.44772 15.4477 2 16 2ZM2 16C2 15.4477 2.44772 15 3 15H6C7.65685 15 9 16.3431 9 18V21C9 21.5523 8.55228 22 8 22C7.44772 22 7 21.5523 7 21V18C7 17.4477 6.55228 17 6 17H3C2.44772 17 2 16.5523 2 16ZM18 17C17.4477 17 17 17.4477 17 18V21C17 21.5523 16.5523 22 16 22C15.4477 22 15 21.5523 15 21V18C15 16.3431 16.3431 15 18 15H21C21.5523 15 22 15.4477 22 16C22 16.5523 21.5523 17 21 17H18Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.web.test.tsx.snap
index e63e316ecbe..7ce8e7ecab9 100644
--- a/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<FullScreenExitIcon /> should render FullScreenExitIcon 1`] = `
       clip-rule="evenodd"
       d="M8 2C8.55228 2 9 2.44772 9 3V6C9 7.65685 7.65685 9 6 9H3C2.44772 9 2 8.55228 2 8C2 7.44772 2.44772 7 3 7H6C6.55228 7 7 6.55228 7 6V3C7 2.44772 7.44772 2 8 2ZM16 2C16.5523 2 17 2.44772 17 3V6C17 6.55228 17.4477 7 18 7H21C21.5523 7 22 7.44772 22 8C22 8.55228 21.5523 9 21 9H18C16.3431 9 15 7.65685 15 6V3C15 2.44772 15.4477 2 16 2ZM2 16C2 15.4477 2.44772 15 3 15H6C7.65685 15 9 16.3431 9 18V21C9 21.5523 8.55228 22 8 22C7.44772 22 7 21.5523 7 21V18C7 17.4477 6.55228 17 6 17H3C2.44772 17 2 16.5523 2 16ZM18 17C17.4477 17 17 17.4477 17 18V21C17 21.5523 16.5523 22 16 22C15.4477 22 15 21.5523 15 21V18C15 16.3431 16.3431 15 18 15H21C21.5523 15 22 15.4477 22 16C22 16.5523 21.5523 17 21 17H18Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/GithubIcon/GithubIcon.native.test.tsx b/packages/blade/src/components/Icons/GithubIcon/GithubIcon.native.test.tsx
index d1b18a4ebca..695b6067518 100644
--- a/packages/blade/src/components/Icons/GithubIcon/GithubIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/GithubIcon/GithubIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<GithubIcon />', () => {
   it('should render GithubIcon', () => {
     const renderTree = renderWithTheme(
-      <GithubIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <GithubIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/GithubIcon/GithubIcon.web.test.tsx b/packages/blade/src/components/Icons/GithubIcon/GithubIcon.web.test.tsx
index 173b6d30818..e12a9d0ee68 100644
--- a/packages/blade/src/components/Icons/GithubIcon/GithubIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/GithubIcon/GithubIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<GithubIcon />', () => {
   it('should render GithubIcon', () => {
     const { container } = renderWithTheme(
-      <GithubIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <GithubIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.native.test.tsx.snap
index 882962cd9e6..1420e156966 100644
--- a/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<GithubIcon /> should render GithubIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M17.855 1.3197C18.6995 1.07098 19.5002 0.991837 20.016 1.00009C20.4706 1.00736 20.863 1.32035 20.9712 1.76191C21.1356 2.43264 21.3702 4.00944 21.0918 5.49254C22.2038 6.87887 22.4888 8.6263 22.4997 9.45102C22.6099 10.7149 22.379 12.5853 21.3146 14.2274C20.4058 15.6295 18.9314 16.7975 16.7173 17.2922C16.9451 17.8826 17.0445 18.5218 17 19.1667V23C17 23.5522 16.5523 24 16 24C15.4477 24 15 23.5522 15 23V19.13C15 19.1038 15.001 19.0776 15.0031 19.0515C15.0564 18.3732 14.8156 17.7046 14.342 17.216C14.071 16.9365 13.9869 16.5251 14.1264 16.1616C14.2659 15.7981 14.6037 15.5487 14.9922 15.5223C17.5206 15.3504 18.8877 14.2945 19.6364 13.1395C20.4188 11.9324 20.5913 10.5102 20.5045 9.59434C20.5015 9.56297 20.5 9.53147 20.5 9.49996C20.5 8.89998 20.2339 7.41808 19.2929 6.47707C19.0353 6.2195 18.9382 5.84224 19.0393 5.4923C19.2623 4.7209 19.2468 3.78298 19.1677 3.06904C18.9367 3.10635 18.6823 3.16097 18.42 3.23822C17.7705 3.42953 17.1522 3.73607 16.7118 4.18237C16.4584 4.43907 16.0865 4.53948 15.7384 4.44514C13.6177 3.87039 11.3823 3.87039 9.26158 4.44514C8.96211 4.5263 8.64193 4.46386 8.39491 4.27612C7.46998 3.57317 6.49906 3.23806 5.81162 3.09413C5.75353 3.69573 5.7542 4.56301 5.97577 5.55118C6.04434 5.85703 5.96554 6.17735 5.76289 6.41648C4.7433 7.61959 4.49999 9.05073 4.49999 9.51996C4.49999 9.55384 4.49827 9.5877 4.49483 9.62141C4.41128 10.4408 4.5746 11.7702 5.35916 12.9592C6.11745 14.1084 7.51271 15.2143 10.0734 15.5589C10.4473 15.6092 10.761 15.8657 10.8847 16.2221C11.0084 16.5786 10.921 16.9743 10.6586 17.2454C10.1907 17.7289 9.95032 18.3886 9.99753 19.0598C9.99917 19.0832 9.99999 19.1066 9.99999 19.13V19.9775C10.0003 19.9928 10.0003 20.008 9.99999 20.0232V23C9.99999 23.5522 9.55228 24 8.99999 24C8.44771 24 7.99999 23.5522 7.99999 23V21.2543C7.19382 21.3776 6.48439 21.3564 5.85023 21.208C4.88546 20.9822 4.19642 20.4856 3.66789 19.9571C3.40924 19.6984 3.18642 19.4295 2.99387 19.1883C2.92845 19.1064 2.86866 19.0304 2.81216 18.9587C2.69174 18.8058 2.58628 18.6719 2.47312 18.5391C2.14508 18.154 1.94159 18.0161 1.75746 17.9701C1.22166 17.8362 0.895901 17.2932 1.02985 16.7574C1.1638 16.2216 1.70673 15.8959 2.24253 16.0298C3.0584 16.2338 3.60491 16.7835 3.99561 17.2421C4.13475 17.4055 4.27845 17.5879 4.41008 17.7549C4.46116 17.8198 4.51042 17.8823 4.55689 17.9405C4.73544 18.1642 4.90324 18.364 5.0821 18.5429C5.42857 18.8893 5.80202 19.1427 6.306 19.2606C6.70619 19.3543 7.24823 19.3763 7.99999 19.2232V19.1628C7.95909 18.5005 8.06983 17.8452 8.31522 17.2434C6.08068 16.6375 4.60183 15.4429 3.68982 14.0607C2.62899 12.453 2.38836 10.6737 2.50044 9.46691C2.51372 8.66198 2.82748 7.01403 3.9295 5.51322C3.62503 3.76748 3.84423 2.32145 4.04887 1.69115C4.1804 1.28602 4.55413 1.00868 4.98 1.00016C5.78253 0.984108 7.52234 1.26931 9.2036 2.397C11.3496 1.89158 13.583 1.88649 15.7308 2.38172C16.4022 1.85092 17.1693 1.52164 17.855 1.3197Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<GithubIcon /> should render GithubIcon 1`] = `
           name="clip0_83_562"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.web.test.tsx.snap
index b33d68f77ce..efcb2e64e42 100644
--- a/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<GithubIcon /> should render GithubIcon 1`] = `
         clip-rule="evenodd"
         d="M17.855 1.3197C18.6995 1.07098 19.5002 0.991837 20.016 1.00009C20.4706 1.00736 20.863 1.32035 20.9712 1.76191C21.1356 2.43264 21.3702 4.00944 21.0918 5.49254C22.2038 6.87887 22.4888 8.6263 22.4997 9.45102C22.6099 10.7149 22.379 12.5853 21.3146 14.2274C20.4058 15.6295 18.9314 16.7975 16.7173 17.2922C16.9451 17.8826 17.0445 18.5218 17 19.1667V23C17 23.5522 16.5523 24 16 24C15.4477 24 15 23.5522 15 23V19.13C15 19.1038 15.001 19.0776 15.0031 19.0515C15.0564 18.3732 14.8156 17.7046 14.342 17.216C14.071 16.9365 13.9869 16.5251 14.1264 16.1616C14.2659 15.7981 14.6037 15.5487 14.9922 15.5223C17.5206 15.3504 18.8877 14.2945 19.6364 13.1395C20.4188 11.9324 20.5913 10.5102 20.5045 9.59434C20.5015 9.56297 20.5 9.53147 20.5 9.49996C20.5 8.89998 20.2339 7.41808 19.2929 6.47707C19.0353 6.2195 18.9382 5.84224 19.0393 5.4923C19.2623 4.7209 19.2468 3.78298 19.1677 3.06904C18.9367 3.10635 18.6823 3.16097 18.42 3.23822C17.7705 3.42953 17.1522 3.73607 16.7118 4.18237C16.4584 4.43907 16.0865 4.53948 15.7384 4.44514C13.6177 3.87039 11.3823 3.87039 9.26158 4.44514C8.96211 4.5263 8.64193 4.46386 8.39491 4.27612C7.46998 3.57317 6.49906 3.23806 5.81162 3.09413C5.75353 3.69573 5.7542 4.56301 5.97577 5.55118C6.04434 5.85703 5.96554 6.17735 5.76289 6.41648C4.7433 7.61959 4.49999 9.05073 4.49999 9.51996C4.49999 9.55384 4.49827 9.5877 4.49483 9.62141C4.41128 10.4408 4.5746 11.7702 5.35916 12.9592C6.11745 14.1084 7.51271 15.2143 10.0734 15.5589C10.4473 15.6092 10.761 15.8657 10.8847 16.2221C11.0084 16.5786 10.921 16.9743 10.6586 17.2454C10.1907 17.7289 9.95032 18.3886 9.99753 19.0598C9.99917 19.0832 9.99999 19.1066 9.99999 19.13V19.9775C10.0003 19.9928 10.0003 20.008 9.99999 20.0232V23C9.99999 23.5522 9.55228 24 8.99999 24C8.44771 24 7.99999 23.5522 7.99999 23V21.2543C7.19382 21.3776 6.48439 21.3564 5.85023 21.208C4.88546 20.9822 4.19642 20.4856 3.66789 19.9571C3.40924 19.6984 3.18642 19.4295 2.99387 19.1883C2.92845 19.1064 2.86866 19.0304 2.81216 18.9587C2.69174 18.8058 2.58628 18.6719 2.47312 18.5391C2.14508 18.154 1.94159 18.0161 1.75746 17.9701C1.22166 17.8362 0.895901 17.2932 1.02985 16.7574C1.1638 16.2216 1.70673 15.8959 2.24253 16.0298C3.0584 16.2338 3.60491 16.7835 3.99561 17.2421C4.13475 17.4055 4.27845 17.5879 4.41008 17.7549C4.46116 17.8198 4.51042 17.8823 4.55689 17.9405C4.73544 18.1642 4.90324 18.364 5.0821 18.5429C5.42857 18.8893 5.80202 19.1427 6.306 19.2606C6.70619 19.3543 7.24823 19.3763 7.99999 19.2232V19.1628C7.95909 18.5005 8.06983 17.8452 8.31522 17.2434C6.08068 16.6375 4.60183 15.4429 3.68982 14.0607C2.62899 12.453 2.38836 10.6737 2.50044 9.46691C2.51372 8.66198 2.82748 7.01403 3.9295 5.51322C3.62503 3.76748 3.84423 2.32145 4.04887 1.69115C4.1804 1.28602 4.55413 1.00868 4.98 1.00016C5.78253 0.984108 7.52234 1.26931 9.2036 2.397C11.3496 1.89158 13.583 1.88649 15.7308 2.38172C16.4022 1.85092 17.1693 1.52164 17.855 1.3197Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<GithubIcon /> should render GithubIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/GitlabIcon/GitlabIcon.native.test.tsx b/packages/blade/src/components/Icons/GitlabIcon/GitlabIcon.native.test.tsx
index 81bf4a2b39c..d46ddc954af 100644
--- a/packages/blade/src/components/Icons/GitlabIcon/GitlabIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/GitlabIcon/GitlabIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<GitlabIcon />', () => {
   it('should render GitlabIcon', () => {
     const renderTree = renderWithTheme(
-      <GitlabIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <GitlabIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/GitlabIcon/GitlabIcon.web.test.tsx b/packages/blade/src/components/Icons/GitlabIcon/GitlabIcon.web.test.tsx
index edfe3270cb8..67c10cbfd94 100644
--- a/packages/blade/src/components/Icons/GitlabIcon/GitlabIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/GitlabIcon/GitlabIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<GitlabIcon />', () => {
   it('should render GitlabIcon', () => {
     const { container } = renderWithTheme(
-      <GitlabIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <GitlabIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.native.test.tsx.snap
index fa3df38250d..7b10649a7ef 100644
--- a/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<GitlabIcon /> should render GitlabIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M4.55666 2.48185C4.55545 2.47814 4.55427 2.4744 4.55313 2.47066L4.55666 2.48185ZM5.10751 4.17305L6.9992 9.97995C7.13331 10.3916 7.51708 10.6702 7.95002 10.6702H16.05C16.4833 10.6702 16.8672 10.3912 17.0011 9.97921L18.8868 4.1753L20.779 9.9992L22.0032 13.6241L12 20.894L2.0356 13.6523L5.10751 4.17305ZM19.2708 2.74187L19.2744 2.73855C19.2732 2.73967 19.272 2.74077 19.2708 2.74187ZM4.14742 1.2602C4.69363 0.762976 5.52888 0.763529 6.07444 1.26186C6.08139 1.2682 6.08824 1.27464 6.09501 1.28118C6.26559 1.44605 6.39209 1.65099 6.46305 1.87722L8.67598 8.67021H15.3235L17.539 1.8512C17.5446 1.8338 17.5507 1.81656 17.5573 1.79949C17.6371 1.59337 17.7638 1.4087 17.9274 1.2602C18.4736 0.762976 19.3089 0.763529 19.8544 1.26186C19.8614 1.2682 19.8682 1.27464 19.875 1.28118C20.0457 1.44617 20.1723 1.65128 20.2432 1.87771L22.6793 9.3756L23.9474 13.1302C23.952 13.1436 23.9562 13.157 23.9601 13.1706C24.1844 13.9406 23.8839 14.7659 23.2203 15.212L12.5879 22.9391C12.2374 23.1939 11.7627 23.1939 11.4121 22.9391L0.762123 15.1991L0.757562 15.1958C0.117075 14.7248 -0.148318 13.8958 0.0991758 13.1405L3.75896 1.8512C3.76462 1.8338 3.77075 1.81656 3.77735 1.79949C3.85706 1.59337 3.98379 1.40871 4.14742 1.2602Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<GitlabIcon /> should render GitlabIcon 1`] = `
           name="clip0_83_564"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.web.test.tsx.snap
index 029092841dd..c961923ac98 100644
--- a/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<GitlabIcon /> should render GitlabIcon 1`] = `
         clip-rule="evenodd"
         d="M4.55666 2.48185C4.55545 2.47814 4.55427 2.4744 4.55313 2.47066L4.55666 2.48185ZM5.10751 4.17305L6.9992 9.97995C7.13331 10.3916 7.51708 10.6702 7.95002 10.6702H16.05C16.4833 10.6702 16.8672 10.3912 17.0011 9.97921L18.8868 4.1753L20.779 9.9992L22.0032 13.6241L12 20.894L2.0356 13.6523L5.10751 4.17305ZM19.2708 2.74187L19.2744 2.73855C19.2732 2.73967 19.272 2.74077 19.2708 2.74187ZM4.14742 1.2602C4.69363 0.762976 5.52888 0.763529 6.07444 1.26186C6.08139 1.2682 6.08824 1.27464 6.09501 1.28118C6.26559 1.44605 6.39209 1.65099 6.46305 1.87722L8.67598 8.67021H15.3235L17.539 1.8512C17.5446 1.8338 17.5507 1.81656 17.5573 1.79949C17.6371 1.59337 17.7638 1.4087 17.9274 1.2602C18.4736 0.762976 19.3089 0.763529 19.8544 1.26186C19.8614 1.2682 19.8682 1.27464 19.875 1.28118C20.0457 1.44617 20.1723 1.65128 20.2432 1.87771L22.6793 9.3756L23.9474 13.1302C23.952 13.1436 23.9562 13.157 23.9601 13.1706C24.1844 13.9406 23.8839 14.7659 23.2203 15.212L12.5879 22.9391C12.2374 23.1939 11.7627 23.1939 11.4121 22.9391L0.762123 15.1991L0.757562 15.1958C0.117075 14.7248 -0.148318 13.8958 0.0991758 13.1405L3.75896 1.8512C3.76462 1.8338 3.77075 1.81656 3.77735 1.79949C3.85706 1.59337 3.98379 1.40871 4.14742 1.2602Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<GitlabIcon /> should render GitlabIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/GlobeIcon/GlobeIcon.native.test.tsx b/packages/blade/src/components/Icons/GlobeIcon/GlobeIcon.native.test.tsx
index e6f3c692cc1..7ab57f9481a 100644
--- a/packages/blade/src/components/Icons/GlobeIcon/GlobeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/GlobeIcon/GlobeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<GlobeIcon />', () => {
   it('should render GlobeIcon', () => {
     const renderTree = renderWithTheme(
-      <GlobeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <GlobeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/GlobeIcon/GlobeIcon.web.test.tsx b/packages/blade/src/components/Icons/GlobeIcon/GlobeIcon.web.test.tsx
index be4286e4e59..e49d03fb64e 100644
--- a/packages/blade/src/components/Icons/GlobeIcon/GlobeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/GlobeIcon/GlobeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<GlobeIcon />', () => {
   it('should render GlobeIcon', () => {
     const { container } = renderWithTheme(
-      <GlobeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <GlobeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.native.test.tsx.snap
index a6f9bfcb1d4..db58456a2c9 100644
--- a/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<GlobeIcon /> should render GlobeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12.0118 1C18.0815 1.00638 23 5.9288 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92864 5.91875 1.00612 11.9887 1M16.9499 11C16.7257 8.23681 15.8009 5.58442 14.2743 3.28983C17.8312 4.21598 20.532 7.26324 20.9451 11H16.9499ZM14.9424 11C14.6912 8.28682 13.6697 5.70191 12 3.55077C10.3303 5.70191 9.30878 8.28682 9.05759 11H14.9424ZM9.05759 13H14.9424C14.6912 15.7132 13.6697 18.298 12 20.4492C10.3303 18.298 9.30879 15.7132 9.05759 13ZM7.05009 11H3.05493C3.46801 7.26324 6.1688 4.21598 9.72569 3.28983C8.19909 5.58442 7.27429 8.23681 7.05009 11ZM7.05009 13C7.2743 15.7632 8.19911 18.4156 9.72572 20.7102C6.16881 19.784 3.46801 16.7368 3.05493 13H7.05009ZM14.2743 20.7102C15.8009 18.4156 16.7257 15.7632 16.9499 13H20.9451C20.532 16.7368 17.8312 19.784 14.2743 20.7102Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.web.test.tsx.snap
index 36cc8080e8a..c0903741341 100644
--- a/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<GlobeIcon /> should render GlobeIcon 1`] = `
       clip-rule="evenodd"
       d="M12.0118 1C18.0815 1.00638 23 5.9288 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92864 5.91875 1.00612 11.9887 1M16.9499 11C16.7257 8.23681 15.8009 5.58442 14.2743 3.28983C17.8312 4.21598 20.532 7.26324 20.9451 11H16.9499ZM14.9424 11C14.6912 8.28682 13.6697 5.70191 12 3.55077C10.3303 5.70191 9.30878 8.28682 9.05759 11H14.9424ZM9.05759 13H14.9424C14.6912 15.7132 13.6697 18.298 12 20.4492C10.3303 18.298 9.30879 15.7132 9.05759 13ZM7.05009 11H3.05493C3.46801 7.26324 6.1688 4.21598 9.72569 3.28983C8.19909 5.58442 7.27429 8.23681 7.05009 11ZM7.05009 13C7.2743 15.7632 8.19911 18.4156 9.72572 20.7102C6.16881 19.784 3.46801 16.7368 3.05493 13H7.05009ZM14.2743 20.7102C15.8009 18.4156 16.7257 15.7632 16.9499 13H20.9451C20.532 16.7368 17.8312 19.784 14.2743 20.7102Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/GridIcon/GridIcon.native.test.tsx b/packages/blade/src/components/Icons/GridIcon/GridIcon.native.test.tsx
index ee8c6d628d8..1d266296ab6 100644
--- a/packages/blade/src/components/Icons/GridIcon/GridIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/GridIcon/GridIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<GridIcon />', () => {
   it('should render GridIcon', () => {
     const renderTree = renderWithTheme(
-      <GridIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <GridIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/GridIcon/GridIcon.web.test.tsx b/packages/blade/src/components/Icons/GridIcon/GridIcon.web.test.tsx
index bc5729452e8..504c71c6a32 100644
--- a/packages/blade/src/components/Icons/GridIcon/GridIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/GridIcon/GridIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<GridIcon />', () => {
   it('should render GridIcon', () => {
     const { container } = renderWithTheme(
-      <GridIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <GridIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.native.test.tsx.snap
index b7a6dfad290..d0192d5f0c2 100644
--- a/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 2C2.44772 2 2 2.44772 2 3V10C2 10.5523 2.44772 11 3 11H10C10.5523 11 11 10.5523 11 10V3C11 2.44772 10.5523 2 10 2H3ZM4 9V4H9V9H4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M14 2C13.4477 2 13 2.44772 13 3V10C13 10.5523 13.4477 11 14 11H21C21.5523 11 22 10.5523 22 10V3C22 2.44772 21.5523 2 21 2H14ZM15 9V4H20V9H15Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M13 14C13 13.4477 13.4477 13 14 13H21C21.5523 13 22 13.4477 22 14V21C22 21.5523 21.5523 22 21 22H14C13.4477 22 13 21.5523 13 21V14ZM15 15V20H20V15H15Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -88,7 +88,7 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 13C2.44772 13 2 13.4477 2 14V21C2 21.5523 2.44772 22 3 22H10C10.5523 22 11 21.5523 11 21V14C11 13.4477 10.5523 13 10 13H3ZM4 20V15H9V20H4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.web.test.tsx.snap
index 327e797b720..805dc6a0251 100644
--- a/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.web.test.tsx.snap
@@ -15,28 +15,28 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
       clip-rule="evenodd"
       d="M3 2C2.44772 2 2 2.44772 2 3V10C2 10.5523 2.44772 11 3 11H10C10.5523 11 11 10.5523 11 10V3C11 2.44772 10.5523 2 10 2H3ZM4 9V4H9V9H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M14 2C13.4477 2 13 2.44772 13 3V10C13 10.5523 13.4477 11 14 11H21C21.5523 11 22 10.5523 22 10V3C22 2.44772 21.5523 2 21 2H14ZM15 9V4H20V9H15Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M13 14C13 13.4477 13.4477 13 14 13H21C21.5523 13 22 13.4477 22 14V21C22 21.5523 21.5523 22 21 22H14C13.4477 22 13 21.5523 13 21V14ZM15 15V20H20V15H15Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M3 13C2.44772 13 2 13.4477 2 14V21C2 21.5523 2.44772 22 3 22H10C10.5523 22 11 21.5523 11 21V14C11 13.4477 10.5523 13 10 13H3ZM4 20V15H9V20H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/HashIcon/HashIcon.native.test.tsx b/packages/blade/src/components/Icons/HashIcon/HashIcon.native.test.tsx
index d15e177bfb2..d981b4a4f90 100644
--- a/packages/blade/src/components/Icons/HashIcon/HashIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/HashIcon/HashIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<HashIcon />', () => {
   it('should render HashIcon', () => {
     const renderTree = renderWithTheme(
-      <HashIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HashIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HashIcon/HashIcon.web.test.tsx b/packages/blade/src/components/Icons/HashIcon/HashIcon.web.test.tsx
index 47d30de6d9d..639d1d2c21e 100644
--- a/packages/blade/src/components/Icons/HashIcon/HashIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/HashIcon/HashIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<HashIcon />', () => {
   it('should render HashIcon', () => {
     const { container } = renderWithTheme(
-      <HashIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HashIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.native.test.tsx.snap
index 5e54be0fb66..a765c2761a8 100644
--- a/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<HashIcon /> should render HashIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M10.1104 2.00608C10.6593 2.06707 11.0548 2.56149 10.9938 3.1104L10.4506 7.99994H14.4383L15.0061 2.88953C15.0671 2.34063 15.5615 1.94509 16.1104 2.00608C16.6593 2.06707 17.0548 2.56149 16.9938 3.1104L16.4506 7.99994H20C20.5523 7.99994 21 8.44765 21 8.99994C21 9.55222 20.5523 9.99994 20 9.99994H16.2283L15.7839 13.9999H20C20.5523 13.9999 21 14.4477 21 14.9999C21 15.5522 20.5523 15.9999 20 15.9999H15.5617L14.9938 21.1104C14.9329 21.6593 14.4384 22.0548 13.8895 21.9938C13.3406 21.9329 12.9451 21.4384 13.0061 20.8895L13.5494 15.9999H9.56168L8.99385 21.1104C8.93286 21.6593 8.43844 22.0548 7.88953 21.9938C7.34063 21.9329 6.94509 21.4384 7.00608 20.8895L7.54937 15.9999H4C3.44772 15.9999 3 15.5522 3 14.9999C3 14.4477 3.44772 13.9999 4 13.9999H7.77159L8.21604 9.99994H4C3.44772 9.99994 3 9.55222 3 8.99994C3 8.44765 3.44772 7.99994 4 7.99994H8.43826L9.00608 2.88953C9.06707 2.34063 9.56149 1.94509 10.1104 2.00608ZM13.7716 13.9999L14.216 9.99994H10.2283L9.7839 13.9999H13.7716Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.web.test.tsx.snap
index 7c2c9e8d27c..8d89ec9a225 100644
--- a/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<HashIcon /> should render HashIcon 1`] = `
       clip-rule="evenodd"
       d="M10.1104 2.00608C10.6593 2.06707 11.0548 2.56149 10.9938 3.1104L10.4506 7.99994H14.4383L15.0061 2.88953C15.0671 2.34063 15.5615 1.94509 16.1104 2.00608C16.6593 2.06707 17.0548 2.56149 16.9938 3.1104L16.4506 7.99994H20C20.5523 7.99994 21 8.44765 21 8.99994C21 9.55222 20.5523 9.99994 20 9.99994H16.2283L15.7839 13.9999H20C20.5523 13.9999 21 14.4477 21 14.9999C21 15.5522 20.5523 15.9999 20 15.9999H15.5617L14.9938 21.1104C14.9329 21.6593 14.4384 22.0548 13.8895 21.9938C13.3406 21.9329 12.9451 21.4384 13.0061 20.8895L13.5494 15.9999H9.56168L8.99385 21.1104C8.93286 21.6593 8.43844 22.0548 7.88953 21.9938C7.34063 21.9329 6.94509 21.4384 7.00608 20.8895L7.54937 15.9999H4C3.44772 15.9999 3 15.5522 3 14.9999C3 14.4477 3.44772 13.9999 4 13.9999H7.77159L8.21604 9.99994H4C3.44772 9.99994 3 9.55222 3 8.99994C3 8.44765 3.44772 7.99994 4 7.99994H8.43826L9.00608 2.88953C9.06707 2.34063 9.56149 1.94509 10.1104 2.00608ZM13.7716 13.9999L14.216 9.99994H10.2283L9.7839 13.9999H13.7716Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/HeadphonesIcon/HeadphonesIcon.native.test.tsx b/packages/blade/src/components/Icons/HeadphonesIcon/HeadphonesIcon.native.test.tsx
index 589b692c981..635900d02f7 100644
--- a/packages/blade/src/components/Icons/HeadphonesIcon/HeadphonesIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/HeadphonesIcon/HeadphonesIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<HeadphonesIcon />', () => {
   it('should render HeadphonesIcon', () => {
     const renderTree = renderWithTheme(
-      <HeadphonesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HeadphonesIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HeadphonesIcon/HeadphonesIcon.web.test.tsx b/packages/blade/src/components/Icons/HeadphonesIcon/HeadphonesIcon.web.test.tsx
index 5ec7815df60..9c064b93a81 100644
--- a/packages/blade/src/components/Icons/HeadphonesIcon/HeadphonesIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/HeadphonesIcon/HeadphonesIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<HeadphonesIcon />', () => {
   it('should render HeadphonesIcon', () => {
     const { container } = renderWithTheme(
-      <HeadphonesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HeadphonesIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.native.test.tsx.snap
index 755fddd113a..58c8bba8a94 100644
--- a/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<HeadphonesIcon /> should render HeadphonesIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12V13H18C16.3431 13 15 14.3431 15 16V19C15 20.6569 16.3431 22 18 22H19C20.6569 22 22 20.6569 22 19V12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12V19C2 20.6569 3.34315 22 5 22H6C7.65685 22 9 20.6569 9 19V16C9 14.3431 7.65685 13 6 13H4V12ZM4 15V19C4 19.5523 4.44772 20 5 20H6C6.55228 20 7 19.5523 7 19V16C7 15.4477 6.55228 15 6 15H4ZM20 15H18C17.4477 15 17 15.4477 17 16V19C17 19.5523 17.4477 20 18 20H19C19.5523 20 20 19.5523 20 19V15Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.web.test.tsx.snap
index 8db300b8b0d..cbf9c70c6dc 100644
--- a/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<HeadphonesIcon /> should render HeadphonesIcon 1`] = `
       clip-rule="evenodd"
       d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12V13H18C16.3431 13 15 14.3431 15 16V19C15 20.6569 16.3431 22 18 22H19C20.6569 22 22 20.6569 22 19V12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12V19C2 20.6569 3.34315 22 5 22H6C7.65685 22 9 20.6569 9 19V16C9 14.3431 7.65685 13 6 13H4V12ZM4 15V19C4 19.5523 4.44772 20 5 20H6C6.55228 20 7 19.5523 7 19V16C7 15.4477 6.55228 15 6 15H4ZM20 15H18C17.4477 15 17 15.4477 17 16V19C17 19.5523 17.4477 20 18 20H19C19.5523 20 20 19.5523 20 19V15Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/HeartIcon/HeartIcon.native.test.tsx b/packages/blade/src/components/Icons/HeartIcon/HeartIcon.native.test.tsx
index 7a1656b959d..977eea840ef 100644
--- a/packages/blade/src/components/Icons/HeartIcon/HeartIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/HeartIcon/HeartIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<HeartIcon />', () => {
   it('should render HeartIcon', () => {
     const renderTree = renderWithTheme(
-      <HeartIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HeartIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HeartIcon/HeartIcon.web.test.tsx b/packages/blade/src/components/Icons/HeartIcon/HeartIcon.web.test.tsx
index 3a09473d8f6..b0ee88affe8 100644
--- a/packages/blade/src/components/Icons/HeartIcon/HeartIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/HeartIcon/HeartIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<HeartIcon />', () => {
   it('should render HeartIcon', () => {
     const { container } = renderWithTheme(
-      <HeartIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HeartIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.native.test.tsx.snap
index d990a52891a..aa9e83d45c7 100644
--- a/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<HeartIcon /> should render HeartIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12.3529 3.90289C13.5719 2.68335 15.2256 1.99817 16.95 1.99817C18.6743 1.99817 20.3279 2.68328 21.5469 3.90272C22.7664 5.12176 23.4518 6.77572 23.4518 8.49999C23.4518 10.2244 22.7666 11.878 21.5471 13.0971C21.547 13.0972 21.5472 13.097 21.5471 13.0971L12.7071 21.9371C12.3166 22.3276 11.6834 22.3276 11.2929 21.9371L2.45289 13.0971C-0.086022 10.5582 -0.0860219 6.4418 2.45289 3.90289C4.9918 1.36398 9.10819 1.36398 11.6471 3.90289L12 4.25578L12.3529 3.90289C12.3529 3.90283 12.3528 3.90294 12.3529 3.90289ZM16.95 3.99817C15.7562 3.99817 14.6112 4.47256 13.7673 5.31694L12.7071 6.3771C12.5196 6.56464 12.2652 6.66999 12 6.66999C11.7348 6.66999 11.4804 6.56464 11.2929 6.3771L10.2329 5.3171C8.47503 3.55924 5.62497 3.55924 3.8671 5.3171C2.10924 7.07497 2.10924 9.92502 3.8671 11.6829L12 19.8158L20.1329 11.6829C20.9773 10.8389 21.4518 9.69383 21.4518 8.49999C21.4518 7.30615 20.9774 6.16124 20.1331 5.31727C19.2891 4.4729 18.1438 3.99817 16.95 3.99817Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.web.test.tsx.snap
index 904146dca0d..15a70fbd2f0 100644
--- a/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<HeartIcon /> should render HeartIcon 1`] = `
       clip-rule="evenodd"
       d="M12.3529 3.90289C13.5719 2.68335 15.2256 1.99817 16.95 1.99817C18.6743 1.99817 20.3279 2.68328 21.5469 3.90272C22.7664 5.12176 23.4518 6.77572 23.4518 8.49999C23.4518 10.2244 22.7666 11.878 21.5471 13.0971C21.547 13.0972 21.5472 13.097 21.5471 13.0971L12.7071 21.9371C12.3166 22.3276 11.6834 22.3276 11.2929 21.9371L2.45289 13.0971C-0.086022 10.5582 -0.0860219 6.4418 2.45289 3.90289C4.9918 1.36398 9.10819 1.36398 11.6471 3.90289L12 4.25578L12.3529 3.90289C12.3529 3.90283 12.3528 3.90294 12.3529 3.90289ZM16.95 3.99817C15.7562 3.99817 14.6112 4.47256 13.7673 5.31694L12.7071 6.3771C12.5196 6.56464 12.2652 6.66999 12 6.66999C11.7348 6.66999 11.4804 6.56464 11.2929 6.3771L10.2329 5.3171C8.47503 3.55924 5.62497 3.55924 3.8671 5.3171C2.10924 7.07497 2.10924 9.92502 3.8671 11.6829L12 19.8158L20.1329 11.6829C20.9773 10.8389 21.4518 9.69383 21.4518 8.49999C21.4518 7.30615 20.9774 6.16124 20.1331 5.31727C19.2891 4.4729 18.1438 3.99817 16.95 3.99817Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/HelpCircleIcon/HelpCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/HelpCircleIcon/HelpCircleIcon.native.test.tsx
index 027cbb6c53d..b574b3dfdd5 100644
--- a/packages/blade/src/components/Icons/HelpCircleIcon/HelpCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/HelpCircleIcon/HelpCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<HelpCircleIcon />', () => {
   it('should render HelpCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <HelpCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HelpCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HelpCircleIcon/HelpCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/HelpCircleIcon/HelpCircleIcon.web.test.tsx
index 9937eef9891..13dcc5ee329 100644
--- a/packages/blade/src/components/Icons/HelpCircleIcon/HelpCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/HelpCircleIcon/HelpCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<HelpCircleIcon />', () => {
   it('should render HelpCircleIcon', () => {
     const { container } = renderWithTheme(
-      <HelpCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HelpCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.native.test.tsx.snap
index 708327f1811..a4fb0f27197 100644
--- a/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
     >
       <RNSVGPath
         d="M12.2581 8.02434C11.2969 7.85947 10.357 8.4119 10.0333 9.33187C9.85006 9.85286 9.27914 10.1266 8.75815 9.94336C8.23716 9.76009 7.96339 9.18917 8.14666 8.66818C8.79391 6.82824 10.6738 5.72339 12.5962 6.05313C14.5184 6.38284 15.9226 8.05072 15.92 10.0009C15.9195 11.5313 14.7849 12.5419 13.9747 13.0821C13.5391 13.3725 13.1105 13.586 12.7949 13.7263C12.6356 13.7971 12.5015 13.8508 12.4049 13.8876C12.3565 13.9061 12.3173 13.9204 12.2887 13.9305L12.254 13.9427L12.2429 13.9465L12.239 13.9478L12.2375 13.9483C12.2375 13.9483 12.2362 13.9487 11.92 13L12.2362 13.9487C11.7123 14.1234 11.146 13.8402 10.9713 13.3163C10.7968 12.7927 11.0794 12.2267 11.6027 12.0517L11.6187 12.0461C11.6341 12.0406 11.6593 12.0315 11.6929 12.0187C11.7603 11.993 11.8606 11.9529 11.9826 11.8987C12.2294 11.789 12.5509 11.6276 12.8653 11.418C13.5549 10.9582 13.92 10.4692 13.92 10L13.92 9.99854C13.9214 9.0233 13.2193 8.18921 12.2581 8.02434Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
       />
       <RNSVGPath
         d="M12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -70,7 +70,7 @@ exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.web.test.tsx.snap
index f555a3c92ed..2605199c41a 100644
--- a/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.web.test.tsx.snap
@@ -14,18 +14,18 @@ exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
     <path
       d="M12.2581 8.02434C11.2969 7.85947 10.357 8.4119 10.0333 9.33187C9.85006 9.85286 9.27914 10.1266 8.75815 9.94336C8.23716 9.76009 7.96339 9.18917 8.14666 8.66818C8.79391 6.82824 10.6738 5.72339 12.5962 6.05313C14.5184 6.38284 15.9226 8.05072 15.92 10.0009C15.9195 11.5313 14.7849 12.5419 13.9747 13.0821C13.5391 13.3725 13.1105 13.586 12.7949 13.7263C12.6356 13.7971 12.5015 13.8508 12.4049 13.8876C12.3565 13.9061 12.3173 13.9204 12.2887 13.9305L12.254 13.9427L12.2429 13.9465L12.239 13.9478L12.2375 13.9483C12.2375 13.9483 12.2362 13.9487 11.92 13L12.2362 13.9487C11.7123 14.1234 11.146 13.8402 10.9713 13.3163C10.7968 12.7927 11.0794 12.2267 11.6027 12.0517L11.6187 12.0461C11.6341 12.0406 11.6593 12.0315 11.6929 12.0187C11.7603 11.993 11.8606 11.9529 11.9826 11.8987C12.2294 11.789 12.5509 11.6276 12.8653 11.418C13.5549 10.9582 13.92 10.4692 13.92 10L13.92 9.99854C13.9214 9.0233 13.2193 8.18921 12.2581 8.02434Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/HistoryIcon/HistoryIcon.native.test.tsx b/packages/blade/src/components/Icons/HistoryIcon/HistoryIcon.native.test.tsx
index aebcac69fda..670d8a3c6b2 100644
--- a/packages/blade/src/components/Icons/HistoryIcon/HistoryIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/HistoryIcon/HistoryIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<HistoryIcon />', () => {
   it('should render HistoryIcon', () => {
     const renderTree = renderWithTheme(
-      <HistoryIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HistoryIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HistoryIcon/HistoryIcon.web.test.tsx b/packages/blade/src/components/Icons/HistoryIcon/HistoryIcon.web.test.tsx
index 0cf62c0ade9..e1bb045b2c7 100644
--- a/packages/blade/src/components/Icons/HistoryIcon/HistoryIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/HistoryIcon/HistoryIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<HistoryIcon />', () => {
   it('should render HistoryIcon', () => {
     const { container } = renderWithTheme(
-      <HistoryIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HistoryIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.native.test.tsx.snap
index 6fd9ab9b9cd..0d35e051e85 100644
--- a/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<HistoryIcon /> should render HistoryIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5.944 4.921a10 10 0 1 1-2.377 10.411 1 1 0 1 1 1.886-.664 8 8 0 1 0 1.872-8.3L4.475 9H8a1 1 0 1 1 0 2H2a1 1 0 0 1-1-1V4a1 1 0 1 1 2 0v3.64L5.944 4.92ZM12 6a1 1 0 0 1 1 1v5.586l2.707 2.707a1 1 0 0 1-1.414 1.414l-3-3A1 1 0 0 1 11 13V7a1 1 0 0 1 1-1Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.web.test.tsx.snap
index 4c59ecd4b31..02f5b38d597 100644
--- a/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<HistoryIcon /> should render HistoryIcon 1`] = `
       clip-rule="evenodd"
       d="M5.944 4.921a10 10 0 1 1-2.377 10.411 1 1 0 1 1 1.886-.664 8 8 0 1 0 1.872-8.3L4.475 9H8a1 1 0 1 1 0 2H2a1 1 0 0 1-1-1V4a1 1 0 1 1 2 0v3.64L5.944 4.92ZM12 6a1 1 0 0 1 1 1v5.586l2.707 2.707a1 1 0 0 1-1.414 1.414l-3-3A1 1 0 0 1 11 13V7a1 1 0 0 1 1-1Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/HomeIcon/HomeIcon.native.test.tsx b/packages/blade/src/components/Icons/HomeIcon/HomeIcon.native.test.tsx
index 3a2278a7560..960d5658ac2 100644
--- a/packages/blade/src/components/Icons/HomeIcon/HomeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/HomeIcon/HomeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<HomeIcon />', () => {
   it('should render HomeIcon', () => {
     const renderTree = renderWithTheme(
-      <HomeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HomeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HomeIcon/HomeIcon.web.test.tsx b/packages/blade/src/components/Icons/HomeIcon/HomeIcon.web.test.tsx
index 51b9511886e..519cf6045b0 100644
--- a/packages/blade/src/components/Icons/HomeIcon/HomeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/HomeIcon/HomeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<HomeIcon />', () => {
   it('should render HomeIcon', () => {
     const { container } = renderWithTheme(
-      <HomeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <HomeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.native.test.tsx.snap
index f84bee48d6a..083bf5d1f6a 100644
--- a/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<HomeIcon /> should render HomeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12.6139 1.21065C12.2528 0.929784 11.7472 0.929784 11.3861 1.21065L2.38606 8.21065C2.14247 8.4001 2 8.69141 2 9V20C2 21.6569 3.34315 23 5 23H19C20.6569 23 22 21.6569 22 20V9C22 8.69141 21.8575 8.4001 21.6139 8.21065L12.6139 1.21065ZM16 21H19C19.5523 21 20 20.5523 20 20V9.48908L12 3.26686L4 9.48908V20C4 20.5523 4.44772 21 5 21H8V12C8 11.4477 8.44772 11 9 11H15C15.5523 11 16 11.4477 16 12V21ZM10 21V13H14V21H10Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.web.test.tsx.snap
index dfbf8e7b3cc..a48da9e3e56 100644
--- a/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<HomeIcon /> should render HomeIcon 1`] = `
       clip-rule="evenodd"
       d="M12.6139 1.21065C12.2528 0.929784 11.7472 0.929784 11.3861 1.21065L2.38606 8.21065C2.14247 8.4001 2 8.69141 2 9V20C2 21.6569 3.34315 23 5 23H19C20.6569 23 22 21.6569 22 20V9C22 8.69141 21.8575 8.4001 21.6139 8.21065L12.6139 1.21065ZM16 21H19C19.5523 21 20 20.5523 20 20V9.48908L12 3.26686L4 9.48908V20C4 20.5523 4.44772 21 5 21H8V12C8 11.4477 8.44772 11 9 11H15C15.5523 11 16 11.4477 16 12V21ZM10 21V13H14V21H10Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/Icons.stories.tsx b/packages/blade/src/components/Icons/Icons.stories.tsx
index 9ddb70a594e..976c9c1a95f 100644
--- a/packages/blade/src/components/Icons/Icons.stories.tsx
+++ b/packages/blade/src/components/Icons/Icons.stories.tsx
@@ -17,12 +17,7 @@ const Page = (): ReactElement => {
       apiDecisionLink=""
       note="Blade consists of a limited set of icons that are commonly used however you can contribute to Blade by adding more icons that are available on the Figma board as and when a use case arises. **See the adding icons section below for reference.**"
       imports={`// Replace IconName with actual Icon's name that you would like to use \nimport { IconName } from '@razorpay/blade/components' \n// IconProps are generic Icon props for all icons, don't replace it with your IconName \nimport type { IconProps } from '@razorpay/blade/components'`}
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=59%3A177',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=9308%3A64839',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=59%3A177"
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -84,14 +79,14 @@ export default {
   title: 'Components/Icons',
   component: PlusIcon, // need to give it some icon component so that storybook can infer props & arg types
   args: {
-    color: 'surface.text.normal.lowContrast',
+    color: 'surface.icon.gray.normal',
     size: 'medium',
   },
   tags: ['autodocs'],
   argTypes: {
     icon: {
       name: 'icon',
-      type: 'select',
+      type: 'select' as 'string',
       options: Object.keys(iconMap),
     },
     size: {
diff --git a/packages/blade/src/components/Icons/ImageIcon/ImageIcon.native.test.tsx b/packages/blade/src/components/Icons/ImageIcon/ImageIcon.native.test.tsx
index 5f401814272..a0a5d505773 100644
--- a/packages/blade/src/components/Icons/ImageIcon/ImageIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ImageIcon/ImageIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ImageIcon />', () => {
   it('should render ImageIcon', () => {
     const renderTree = renderWithTheme(
-      <ImageIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ImageIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ImageIcon/ImageIcon.web.test.tsx b/packages/blade/src/components/Icons/ImageIcon/ImageIcon.web.test.tsx
index e93e06f74a8..7c69bd902d7 100644
--- a/packages/blade/src/components/Icons/ImageIcon/ImageIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ImageIcon/ImageIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ImageIcon />', () => {
   it('should render ImageIcon', () => {
     const { container } = renderWithTheme(
-      <ImageIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ImageIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.native.test.tsx.snap
index 157415c9479..823972acb80 100644
--- a/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ImageIcon /> should render ImageIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6 8.5C6 7.11929 7.11929 6 8.5 6C9.88071 6 11 7.11929 11 8.5C11 9.88071 9.88071 11 8.5 11C7.11929 11 6 9.88071 6 8.5ZM8.5 8C8.22386 8 8 8.22386 8 8.5C8 8.77614 8.22386 9 8.5 9C8.77614 9 9 8.77614 9 8.5C9 8.22386 8.77614 8 8.5 8Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<ImageIcon /> should render ImageIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.4288 4.2699 19.7946 4.64909 19.9367L15.2929 9.29289C15.6835 8.90237 16.3166 8.90237 16.7072 9.29289L20 12.5857V5C20 4.44772 19.5523 4 19 4H5ZM20 15.4142L16 11.4142L7.41422 20H19C19.5523 20 20 19.5523 20 19V15.4142Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.web.test.tsx.snap
index 889e14bf390..67af2cd7590 100644
--- a/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<ImageIcon /> should render ImageIcon 1`] = `
       clip-rule="evenodd"
       d="M6 8.5C6 7.11929 7.11929 6 8.5 6C9.88071 6 11 7.11929 11 8.5C11 9.88071 9.88071 11 8.5 11C7.11929 11 6 9.88071 6 8.5ZM8.5 8C8.22386 8 8 8.22386 8 8.5C8 8.77614 8.22386 9 8.5 9C8.77614 9 9 8.77614 9 8.5C9 8.22386 8.77614 8 8.5 8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.4288 4.2699 19.7946 4.64909 19.9367L15.2929 9.29289C15.6835 8.90237 16.3166 8.90237 16.7072 9.29289L20 12.5857V5C20 4.44772 19.5523 4 19 4H5ZM20 15.4142L16 11.4142L7.41422 20H19C19.5523 20 20 19.5523 20 19V15.4142Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/InboxIcon/InboxIcon.native.test.tsx b/packages/blade/src/components/Icons/InboxIcon/InboxIcon.native.test.tsx
index 5dd4d0ac348..6d8087c7b25 100644
--- a/packages/blade/src/components/Icons/InboxIcon/InboxIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/InboxIcon/InboxIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<InboxIcon />', () => {
   it('should render InboxIcon', () => {
     const renderTree = renderWithTheme(
-      <InboxIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <InboxIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/InboxIcon/InboxIcon.web.test.tsx b/packages/blade/src/components/Icons/InboxIcon/InboxIcon.web.test.tsx
index 146f9987854..cd37ead47d1 100644
--- a/packages/blade/src/components/Icons/InboxIcon/InboxIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/InboxIcon/InboxIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<InboxIcon />', () => {
   it('should render InboxIcon', () => {
     const { container } = renderWithTheme(
-      <InboxIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <InboxIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.native.test.tsx.snap
index 3b08efe6854..f30ad389aae 100644
--- a/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<InboxIcon /> should render InboxIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M16.7 3H7.3003C6.1131 2.99946 5.03671 3.69961 4.55568 4.785L1.09497 12.5741C1.03406 12.7033 1 12.8477 1 13V18C1 19.6569 2.34315 21 4 21H20C21.6569 21 23 19.6569 23 18V13C23 12.9868 22.9997 12.9736 22.9992 12.9604C22.9938 12.8216 22.9601 12.69 22.9037 12.5713L19.4126 4.78105C19.4063 4.76715 19.3998 4.75339 19.3929 4.73979C19.2342 4.42502 18.938 4.0135 18.5158 3.67027C18.085 3.32012 17.4693 3 16.7 3ZM20.456 12L17.5993 5.62534C17.5516 5.53762 17.4313 5.36618 17.2542 5.22223C17.075 5.07655 16.8907 5 16.7 5L7.29932 5C6.90343 4.99973 6.54465 5.23303 6.38432 5.595L3.53856 12H8C8.33435 12 8.64658 12.1671 8.83205 12.4453L10.5352 15H13.4648L15.1679 12.4453C15.3534 12.1671 15.6656 12 16 12H20.456ZM3 14V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V14H16.5352L14.8321 16.5547C14.6466 16.8329 14.3344 17 14 17H10C9.66565 17 9.35342 16.8329 9.16795 16.5547L7.46482 14H3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.web.test.tsx.snap
index 616cb8c3969..6acdb96af30 100644
--- a/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<InboxIcon /> should render InboxIcon 1`] = `
       clip-rule="evenodd"
       d="M16.7 3H7.3003C6.1131 2.99946 5.03671 3.69961 4.55568 4.785L1.09497 12.5741C1.03406 12.7033 1 12.8477 1 13V18C1 19.6569 2.34315 21 4 21H20C21.6569 21 23 19.6569 23 18V13C23 12.9868 22.9997 12.9736 22.9992 12.9604C22.9938 12.8216 22.9601 12.69 22.9037 12.5713L19.4126 4.78105C19.4063 4.76715 19.3998 4.75339 19.3929 4.73979C19.2342 4.42502 18.938 4.0135 18.5158 3.67027C18.085 3.32012 17.4693 3 16.7 3ZM20.456 12L17.5993 5.62534C17.5516 5.53762 17.4313 5.36618 17.2542 5.22223C17.075 5.07655 16.8907 5 16.7 5L7.29932 5C6.90343 4.99973 6.54465 5.23303 6.38432 5.595L3.53856 12H8C8.33435 12 8.64658 12.1671 8.83205 12.4453L10.5352 15H13.4648L15.1679 12.4453C15.3534 12.1671 15.6656 12 16 12H20.456ZM3 14V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V14H16.5352L14.8321 16.5547C14.6466 16.8329 14.3344 17 14 17H10C9.66565 17 9.35342 16.8329 9.16795 16.5547L7.46482 14H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/InfoIcon/InfoIcon.native.test.tsx b/packages/blade/src/components/Icons/InfoIcon/InfoIcon.native.test.tsx
index 29360118685..5710d51d7ea 100644
--- a/packages/blade/src/components/Icons/InfoIcon/InfoIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/InfoIcon/InfoIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<InfoIcon />', () => {
   it('should render InfoIcon', () => {
     const renderTree = renderWithTheme(
-      <InfoIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <InfoIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/InfoIcon/InfoIcon.web.test.tsx b/packages/blade/src/components/Icons/InfoIcon/InfoIcon.web.test.tsx
index 159a8c536c9..91b1caadfca 100644
--- a/packages/blade/src/components/Icons/InfoIcon/InfoIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/InfoIcon/InfoIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<InfoIcon />', () => {
   it('should render InfoIcon', () => {
     const { container } = renderWithTheme(
-      <InfoIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <InfoIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.native.test.tsx.snap
index f847cb6cae6..d7becca42e2 100644
--- a/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<InfoIcon /> should render InfoIcon 1`] = `
     >
       <RNSVGPath
         d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<InfoIcon /> should render InfoIcon 1`] = `
       />
       <RNSVGPath
         d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -70,7 +70,7 @@ exports[`<InfoIcon /> should render InfoIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.web.test.tsx.snap
index b03c816fb0b..f7b7a40a86b 100644
--- a/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.web.test.tsx.snap
@@ -14,18 +14,18 @@ exports[`<InfoIcon /> should render InfoIcon 1`] = `
     <path
       d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/InstagramIcon/InstagramIcon.native.test.tsx b/packages/blade/src/components/Icons/InstagramIcon/InstagramIcon.native.test.tsx
index e474fed817f..7722383b0b5 100644
--- a/packages/blade/src/components/Icons/InstagramIcon/InstagramIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/InstagramIcon/InstagramIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<InstagramIcon />', () => {
   it('should render InstagramIcon', () => {
     const renderTree = renderWithTheme(
-      <InstagramIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <InstagramIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/InstagramIcon/InstagramIcon.web.test.tsx b/packages/blade/src/components/Icons/InstagramIcon/InstagramIcon.web.test.tsx
index 0603e0615ff..0d37d46a424 100644
--- a/packages/blade/src/components/Icons/InstagramIcon/InstagramIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/InstagramIcon/InstagramIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<InstagramIcon />', () => {
   it('should render InstagramIcon', () => {
     const { container } = renderWithTheme(
-      <InstagramIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <InstagramIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.native.test.tsx.snap
index d46bf6d250a..648ae989bec 100644
--- a/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<InstagramIcon /> should render InstagramIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12.7766 7.0108C10.6429 6.69439 8.54684 7.78201 7.57705 9.70876C6.60727 11.6355 6.98243 13.967 8.50769 15.4922C10.033 17.0175 12.3644 17.3927 14.2912 16.4229C16.2179 15.4531 17.3055 13.357 16.9891 11.2233C16.6661 9.04457 14.9554 7.33387 12.7766 7.0108ZM9.36352 10.6079C9.94539 9.45189 11.203 8.79932 12.4833 8.98916C13.7905 9.18301 14.8169 10.2094 15.0108 11.5167C15.2006 12.7969 14.548 14.0545 13.392 14.6364C12.2359 15.2183 10.8371 14.9932 9.92191 14.078C9.00675 13.1629 8.78165 11.764 9.36352 10.6079Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<InstagramIcon /> should render InstagramIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7 1C3.68629 1 1 3.68629 1 7V17C1 20.3137 3.68629 23 7 23H17C20.3137 23 23 20.3137 23 17V7C23 3.68629 20.3137 1 17 1H7ZM3 7C3 4.79086 4.79086 3 7 3H17C19.2091 3 21 4.79086 21 7V17C21 19.2091 19.2091 21 17 21H7C4.79086 21 3 19.2091 3 17V7Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.web.test.tsx.snap
index 3087ff1ecff..76cc65fe6b1 100644
--- a/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<InstagramIcon /> should render InstagramIcon 1`] = `
       clip-rule="evenodd"
       d="M12.7766 7.0108C10.6429 6.69439 8.54684 7.78201 7.57705 9.70876C6.60727 11.6355 6.98243 13.967 8.50769 15.4922C10.033 17.0175 12.3644 17.3927 14.2912 16.4229C16.2179 15.4531 17.3055 13.357 16.9891 11.2233C16.6661 9.04457 14.9554 7.33387 12.7766 7.0108ZM9.36352 10.6079C9.94539 9.45189 11.203 8.79932 12.4833 8.98916C13.7905 9.18301 14.8169 10.2094 15.0108 11.5167C15.2006 12.7969 14.548 14.0545 13.392 14.6364C12.2359 15.2183 10.8371 14.9932 9.92191 14.078C9.00675 13.1629 8.78165 11.764 9.36352 10.6079Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M7 1C3.68629 1 1 3.68629 1 7V17C1 20.3137 3.68629 23 7 23H17C20.3137 23 23 20.3137 23 17V7C23 3.68629 20.3137 1 17 1H7ZM3 7C3 4.79086 4.79086 3 7 3H17C19.2091 3 21 4.79086 21 7V17C21 19.2091 19.2091 21 17 21H7C4.79086 21 3 19.2091 3 17V7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/InvoicesIcon/InvoicesIcon.native.test.tsx b/packages/blade/src/components/Icons/InvoicesIcon/InvoicesIcon.native.test.tsx
index 6592d0d2493..bf7b77efdf4 100644
--- a/packages/blade/src/components/Icons/InvoicesIcon/InvoicesIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/InvoicesIcon/InvoicesIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<InvoicesIcon />', () => {
   it('should render InvoicesIcon', () => {
     const renderTree = renderWithTheme(
-      <InvoicesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <InvoicesIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/InvoicesIcon/InvoicesIcon.web.test.tsx b/packages/blade/src/components/Icons/InvoicesIcon/InvoicesIcon.web.test.tsx
index 641205c36f0..6e53a89b95b 100644
--- a/packages/blade/src/components/Icons/InvoicesIcon/InvoicesIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/InvoicesIcon/InvoicesIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<InvoicesIcon />', () => {
   it('should render InvoicesIcon', () => {
     const { container } = renderWithTheme(
-      <InvoicesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <InvoicesIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.native.test.tsx.snap
index 4fcab15023e..875ecec550a 100644
--- a/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<InvoicesIcon /> should render InvoicesIcon 1`] = `
     >
       <RNSVGPath
         d="M19.7778 3.2H15.1333C14.6667 1.924 13.4444 1 12 1C10.5556 1 9.33333 1.924 8.86667 3.2H4.22222C3 3.2 2 4.19 2 5.4V20.8C2 22.01 3 23 4.22222 23H19.7778C21 23 22 22.01 22 20.8V5.4C22 4.19 21 3.2 19.7778 3.2ZM12 3.2C12.6111 3.2 13.1111 3.695 13.1111 4.3C13.1111 4.905 12.6111 5.4 12 5.4C11.3889 5.4 10.8889 4.905 10.8889 4.3C10.8889 3.695 11.3889 3.2 12 3.2ZM14.2222 18.6H6.44444V16.4H14.2222V18.6ZM17.5556 14.2H6.44444V12H17.5556V14.2ZM17.5556 9.8H6.44444V7.6H17.5556V9.8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.web.test.tsx.snap
index 916cf555a44..af4068c9fb5 100644
--- a/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<InvoicesIcon /> should render InvoicesIcon 1`] = `
     <path
       d="M19.7778 3.2H15.1333C14.6667 1.924 13.4444 1 12 1C10.5556 1 9.33333 1.924 8.86667 3.2H4.22222C3 3.2 2 4.19 2 5.4V20.8C2 22.01 3 23 4.22222 23H19.7778C21 23 22 22.01 22 20.8V5.4C22 4.19 21 3.2 19.7778 3.2ZM12 3.2C12.6111 3.2 13.1111 3.695 13.1111 4.3C13.1111 4.905 12.6111 5.4 12 5.4C11.3889 5.4 10.8889 4.905 10.8889 4.3C10.8889 3.695 11.3889 3.2 12 3.2ZM14.2222 18.6H6.44444V16.4H14.2222V18.6ZM17.5556 14.2H6.44444V12H17.5556V14.2ZM17.5556 9.8H6.44444V7.6H17.5556V9.8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ItalicIcon/ItalicIcon.native.test.tsx b/packages/blade/src/components/Icons/ItalicIcon/ItalicIcon.native.test.tsx
index 3323336b057..2890d5b0fe7 100644
--- a/packages/blade/src/components/Icons/ItalicIcon/ItalicIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ItalicIcon/ItalicIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ItalicIcon />', () => {
   it('should render ItalicIcon', () => {
     const renderTree = renderWithTheme(
-      <ItalicIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ItalicIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ItalicIcon/ItalicIcon.web.test.tsx b/packages/blade/src/components/Icons/ItalicIcon/ItalicIcon.web.test.tsx
index ab3c531705a..7c10d4d7f36 100644
--- a/packages/blade/src/components/Icons/ItalicIcon/ItalicIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ItalicIcon/ItalicIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ItalicIcon />', () => {
   it('should render ItalicIcon', () => {
     const { container } = renderWithTheme(
-      <ItalicIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ItalicIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.native.test.tsx.snap
index 160c83d3db5..e53984af386 100644
--- a/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ItalicIcon /> should render ItalicIcon 1`] = `
     >
       <RNSVGPath
         d="M15.0222 3H19C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H15.693L10.443 19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H9.02418C9.00802 21.0004 8.99181 21.0004 8.97557 21H5C4.44772 21 4 20.5523 4 20C4 19.4477 4.44772 19 5 19H8.30704L13.557 5H10C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3H14.9782C14.9928 2.99968 15.0075 2.99967 15.0222 3Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.web.test.tsx.snap
index d64a8ca633e..d94a8e58c1f 100644
--- a/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ItalicIcon /> should render ItalicIcon 1`] = `
     <path
       d="M15.0222 3H19C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H15.693L10.443 19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H9.02418C9.00802 21.0004 8.99181 21.0004 8.97557 21H5C4.44772 21 4 20.5523 4 20C4 19.4477 4.44772 19 5 19H8.30704L13.557 5H10C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3H14.9782C14.9928 2.99968 15.0075 2.99967 15.0222 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/LayersIcon/LayersIcon.native.test.tsx b/packages/blade/src/components/Icons/LayersIcon/LayersIcon.native.test.tsx
index fc12be7c7da..9fe881ac82f 100644
--- a/packages/blade/src/components/Icons/LayersIcon/LayersIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/LayersIcon/LayersIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<LayersIcon />', () => {
   it('should render LayersIcon', () => {
     const renderTree = renderWithTheme(
-      <LayersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LayersIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LayersIcon/LayersIcon.web.test.tsx b/packages/blade/src/components/Icons/LayersIcon/LayersIcon.web.test.tsx
index 994a81a2147..ee72bbde364 100644
--- a/packages/blade/src/components/Icons/LayersIcon/LayersIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/LayersIcon/LayersIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<LayersIcon />', () => {
   it('should render LayersIcon', () => {
     const { container } = renderWithTheme(
-      <LayersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LayersIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.native.test.tsx.snap
index d916f0b2543..cd4f7a26fbd 100644
--- a/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<LayersIcon /> should render LayersIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.5528 1.10557C11.8343 0.964809 12.1657 0.964809 12.4472 1.10557L22.4472 6.10557C22.786 6.27496 23 6.62123 23 7C23 7.37877 22.786 7.72504 22.4472 7.89443L12.4472 12.8944C12.1657 13.0352 11.8343 13.0352 11.5528 12.8944L1.55279 7.89443C1.214 7.72504 1 7.37877 1 7C1 6.62123 1.214 6.27496 1.55279 6.10557L11.5528 1.10557ZM4.23607 7L12 10.882L19.7639 7L12 3.11803L4.23607 7Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<LayersIcon /> should render LayersIcon 1`] = `
       />
       <RNSVGPath
         d="M1.10555 16.5528C1.35254 16.0588 1.95321 15.8586 2.44719 16.1055L12 20.8819L21.5528 16.1055C22.0467 15.8586 22.6474 16.0588 22.8944 16.5528C23.1414 17.0467 22.9412 17.6474 22.4472 17.8944L12.4472 22.8944C12.1657 23.0352 11.8343 23.0352 11.5528 22.8944L1.55276 17.8944C1.05878 17.6474 0.858558 17.0467 1.10555 16.5528Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -72,7 +72,7 @@ exports[`<LayersIcon /> should render LayersIcon 1`] = `
       />
       <RNSVGPath
         d="M2.44719 11.1055C1.95321 10.8586 1.35254 11.0588 1.10555 11.5528C0.858558 12.0467 1.05878 12.6474 1.55276 12.8944L11.5528 17.8944C11.8343 18.0352 12.1657 18.0352 12.4472 17.8944L22.4472 12.8944C22.9412 12.6474 23.1414 12.0467 22.8944 11.5528C22.6474 11.0588 22.0467 10.8586 21.5528 11.1055L12 15.8819L2.44719 11.1055Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.web.test.tsx.snap
index fc439a906e8..a430099af54 100644
--- a/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.web.test.tsx.snap
@@ -15,18 +15,18 @@ exports[`<LayersIcon /> should render LayersIcon 1`] = `
       clip-rule="evenodd"
       d="M11.5528 1.10557C11.8343 0.964809 12.1657 0.964809 12.4472 1.10557L22.4472 6.10557C22.786 6.27496 23 6.62123 23 7C23 7.37877 22.786 7.72504 22.4472 7.89443L12.4472 12.8944C12.1657 13.0352 11.8343 13.0352 11.5528 12.8944L1.55279 7.89443C1.214 7.72504 1 7.37877 1 7C1 6.62123 1.214 6.27496 1.55279 6.10557L11.5528 1.10557ZM4.23607 7L12 10.882L19.7639 7L12 3.11803L4.23607 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M1.10555 16.5528C1.35254 16.0588 1.95321 15.8586 2.44719 16.1055L12 20.8819L21.5528 16.1055C22.0467 15.8586 22.6474 16.0588 22.8944 16.5528C23.1414 17.0467 22.9412 17.6474 22.4472 17.8944L12.4472 22.8944C12.1657 23.0352 11.8343 23.0352 11.5528 22.8944L1.55276 17.8944C1.05878 17.6474 0.858558 17.0467 1.10555 16.5528Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M2.44719 11.1055C1.95321 10.8586 1.35254 11.0588 1.10555 11.5528C0.858558 12.0467 1.05878 12.6474 1.55276 12.8944L11.5528 17.8944C11.8343 18.0352 12.1657 18.0352 12.4472 17.8944L22.4472 12.8944C22.9412 12.6474 23.1414 12.0467 22.8944 11.5528C22.6474 11.0588 22.0467 10.8586 21.5528 11.1055L12 15.8819L2.44719 11.1055Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/LayoutIcon/LayoutIcon.native.test.tsx b/packages/blade/src/components/Icons/LayoutIcon/LayoutIcon.native.test.tsx
index 34ed1ab27c6..a04ba0f5a8b 100644
--- a/packages/blade/src/components/Icons/LayoutIcon/LayoutIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/LayoutIcon/LayoutIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<LayoutIcon />', () => {
   it('should render LayoutIcon', () => {
     const renderTree = renderWithTheme(
-      <LayoutIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LayoutIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LayoutIcon/LayoutIcon.web.test.tsx b/packages/blade/src/components/Icons/LayoutIcon/LayoutIcon.web.test.tsx
index ed3bf33d67f..b2c71a2ff90 100644
--- a/packages/blade/src/components/Icons/LayoutIcon/LayoutIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/LayoutIcon/LayoutIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<LayoutIcon />', () => {
   it('should render LayoutIcon', () => {
     const { container } = renderWithTheme(
-      <LayoutIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LayoutIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.native.test.tsx.snap
index 3fcfbdf2100..44fa25a865b 100644
--- a/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<LayoutIcon /> should render LayoutIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM10 20H19C19.5523 20 20 19.5523 20 19V10H10V20ZM8 10V20H5C4.44772 20 4 19.5523 4 19V10H8ZM20 8V5C20 4.44772 19.5523 4 19 4H5C4.44772 4 4 4.44772 4 5V8H20Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.web.test.tsx.snap
index 1ac17b55f2d..aacf4b37125 100644
--- a/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<LayoutIcon /> should render LayoutIcon 1`] = `
       clip-rule="evenodd"
       d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM10 20H19C19.5523 20 20 19.5523 20 19V10H10V20ZM8 10V20H5C4.44772 20 4 19.5523 4 19V10H8ZM20 8V5C20 4.44772 19.5523 4 19 4H5C4.44772 4 4 4.44772 4 5V8H20Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/LifeBuoyIcon/LifeBuoyIcon.native.test.tsx b/packages/blade/src/components/Icons/LifeBuoyIcon/LifeBuoyIcon.native.test.tsx
index da8ddef2d64..3ed1f45ddfb 100644
--- a/packages/blade/src/components/Icons/LifeBuoyIcon/LifeBuoyIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/LifeBuoyIcon/LifeBuoyIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<LifeBuoyIcon />', () => {
   it('should render LifeBuoyIcon', () => {
     const renderTree = renderWithTheme(
-      <LifeBuoyIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LifeBuoyIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LifeBuoyIcon/LifeBuoyIcon.web.test.tsx b/packages/blade/src/components/Icons/LifeBuoyIcon/LifeBuoyIcon.web.test.tsx
index 60ab3531423..f27d20fd467 100644
--- a/packages/blade/src/components/Icons/LifeBuoyIcon/LifeBuoyIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/LifeBuoyIcon/LifeBuoyIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<LifeBuoyIcon />', () => {
   it('should render LifeBuoyIcon', () => {
     const { container } = renderWithTheme(
-      <LifeBuoyIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LifeBuoyIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.native.test.tsx.snap
index a1ac681d44e..3afedae7a97 100644
--- a/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<LifeBuoyIcon /> should render LifeBuoyIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM4.96813 6.38228C3.73648 7.92196 3 9.87497 3 12C3 14.125 3.73649 16.078 4.96813 17.6177L7.82842 14.7574C7.30489 13.967 7 13.0191 7 12C7 10.9809 7.30489 10.033 7.82842 9.24257L4.96813 6.38228ZM9.24265 16.1716L6.38235 19.0319C7.92202 20.2635 9.875 21 12 21C14.125 21 16.078 20.2635 17.6177 19.0319L14.7574 16.1716C13.9669 16.6951 13.0191 17 12 17C10.9809 17 10.0331 16.6951 9.24265 16.1716ZM21 12C21 14.125 20.2635 16.078 19.0319 17.6177L16.1716 14.7574C16.6951 13.967 17 13.0191 17 12C17 10.9809 16.6951 10.033 16.1716 9.24258L19.0319 6.38228C20.2635 7.92196 21 9.87497 21 12ZM17.6177 4.96808L14.7574 7.82838C13.9669 7.30487 13.0191 7 12 7C10.9809 7 10.0331 7.30487 9.24265 7.82837L6.38235 4.96807C7.92201 3.73646 9.875 3 12 3C14.125 3 16.078 3.73646 17.6177 4.96808ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.web.test.tsx.snap
index df004d76cf9..790a61aecb7 100644
--- a/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<LifeBuoyIcon /> should render LifeBuoyIcon 1`] = `
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM4.96813 6.38228C3.73648 7.92196 3 9.87497 3 12C3 14.125 3.73649 16.078 4.96813 17.6177L7.82842 14.7574C7.30489 13.967 7 13.0191 7 12C7 10.9809 7.30489 10.033 7.82842 9.24257L4.96813 6.38228ZM9.24265 16.1716L6.38235 19.0319C7.92202 20.2635 9.875 21 12 21C14.125 21 16.078 20.2635 17.6177 19.0319L14.7574 16.1716C13.9669 16.6951 13.0191 17 12 17C10.9809 17 10.0331 16.6951 9.24265 16.1716ZM21 12C21 14.125 20.2635 16.078 19.0319 17.6177L16.1716 14.7574C16.6951 13.967 17 13.0191 17 12C17 10.9809 16.6951 10.033 16.1716 9.24258L19.0319 6.38228C20.2635 7.92196 21 9.87497 21 12ZM17.6177 4.96808L14.7574 7.82838C13.9669 7.30487 13.0191 7 12 7C10.9809 7 10.0331 7.30487 9.24265 7.82837L6.38235 4.96807C7.92201 3.73646 9.875 3 12 3C14.125 3 16.078 3.73646 17.6177 4.96808ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/LinkIcon/LinkIcon.native.test.tsx b/packages/blade/src/components/Icons/LinkIcon/LinkIcon.native.test.tsx
index 16899d76101..9de5150dffe 100644
--- a/packages/blade/src/components/Icons/LinkIcon/LinkIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/LinkIcon/LinkIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<LinkIcon />', () => {
   it('should render LinkIcon', () => {
     const renderTree = renderWithTheme(
-      <LinkIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LinkIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LinkIcon/LinkIcon.web.test.tsx b/packages/blade/src/components/Icons/LinkIcon/LinkIcon.web.test.tsx
index 3d1dcad69b1..9901dd0c94b 100644
--- a/packages/blade/src/components/Icons/LinkIcon/LinkIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/LinkIcon/LinkIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<LinkIcon />', () => {
   it('should render LinkIcon', () => {
     const { container } = renderWithTheme(
-      <LinkIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LinkIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.native.test.tsx.snap
index 884a11f7212..b72d09dc7a3 100644
--- a/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<LinkIcon /> should render LinkIcon 1`] = `
     >
       <RNSVGPath
         d="M20.1863 1.82377C17.8719 -0.490636 14.1296 -0.523155 11.7753 1.75068L11.765 1.7608L10.045 3.4708C9.65336 3.86019 9.65151 4.49335 10.0409 4.88501C10.4303 5.27667 11.0634 5.27852 11.4551 4.88913L13.1697 3.18451C14.7395 1.67341 17.2307 1.69666 18.772 3.23798C20.313 4.77898 20.3366 7.26948 18.8265 8.83934L15.833 11.8329C15.0124 12.6537 13.8758 13.0778 12.7181 12.9949C11.5605 12.9119 10.496 12.3303 9.80083 11.401C9.47002 10.9587 8.84333 10.8684 8.40108 11.1992C7.95883 11.53 7.86849 12.1567 8.1993 12.5989C9.24204 13.993 10.8388 14.8654 12.5753 14.9897C14.3117 15.1141 16.0165 14.4782 17.2473 13.2469L20.2472 10.2471L20.2593 10.2347C22.5332 7.8804 22.5007 4.13817 20.1863 1.82377Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<LinkIcon /> should render LinkIcon 1`] = `
       />
       <RNSVGPath
         d="M9.42474 7.01016C7.68837 6.8858 5.9836 7.52171 4.75285 8.75283L1.75285 11.7528L1.74067 11.7652C-0.533165 14.1195 -0.500646 17.8617 1.81376 20.1761C4.12816 22.4905 7.8704 22.5231 10.2247 20.2492L10.2371 20.237L11.9471 18.527C12.3376 18.1365 12.3376 17.5034 11.9471 17.1128C11.5565 16.7223 10.9234 16.7223 10.5329 17.1128L8.82933 18.8164C7.25947 20.3265 4.76897 20.3029 3.22797 18.7619C1.68697 17.2209 1.66341 14.7304 3.17354 13.1606L6.16719 10.1669C6.9877 9.34611 8.12425 8.92214 9.28187 9.00505C10.4395 9.08796 11.504 9.66956 12.1992 10.5989C12.53 11.0412 13.1567 11.1315 13.5989 10.8007C14.0412 10.4699 14.1315 9.84321 13.8007 9.40096C12.758 8.00693 11.1612 7.13452 9.42474 7.01016Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.web.test.tsx.snap
index f2e28fa1c61..0ac64f3d368 100644
--- a/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<LinkIcon /> should render LinkIcon 1`] = `
     <path
       d="M20.1863 1.82377C17.8719 -0.490636 14.1296 -0.523155 11.7753 1.75068L11.765 1.7608L10.045 3.4708C9.65336 3.86019 9.65151 4.49335 10.0409 4.88501C10.4303 5.27667 11.0634 5.27852 11.4551 4.88913L13.1697 3.18451C14.7395 1.67341 17.2307 1.69666 18.772 3.23798C20.313 4.77898 20.3366 7.26948 18.8265 8.83934L15.833 11.8329C15.0124 12.6537 13.8758 13.0778 12.7181 12.9949C11.5605 12.9119 10.496 12.3303 9.80083 11.401C9.47002 10.9587 8.84333 10.8684 8.40108 11.1992C7.95883 11.53 7.86849 12.1567 8.1993 12.5989C9.24204 13.993 10.8388 14.8654 12.5753 14.9897C14.3117 15.1141 16.0165 14.4782 17.2473 13.2469L20.2472 10.2471L20.2593 10.2347C22.5332 7.8804 22.5007 4.13817 20.1863 1.82377Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M9.42474 7.01016C7.68837 6.8858 5.9836 7.52171 4.75285 8.75283L1.75285 11.7528L1.74067 11.7652C-0.533165 14.1195 -0.500646 17.8617 1.81376 20.1761C4.12816 22.4905 7.8704 22.5231 10.2247 20.2492L10.2371 20.237L11.9471 18.527C12.3376 18.1365 12.3376 17.5034 11.9471 17.1128C11.5565 16.7223 10.9234 16.7223 10.5329 17.1128L8.82933 18.8164C7.25947 20.3265 4.76897 20.3029 3.22797 18.7619C1.68697 17.2209 1.66341 14.7304 3.17354 13.1606L6.16719 10.1669C6.9877 9.34611 8.12425 8.92214 9.28187 9.00505C10.4395 9.08796 11.504 9.66956 12.1992 10.5989C12.53 11.0412 13.1567 11.1315 13.5989 10.8007C14.0412 10.4699 14.1315 9.84321 13.8007 9.40096C12.758 8.00693 11.1612 7.13452 9.42474 7.01016Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ListIcon/ListIcon.native.test.tsx b/packages/blade/src/components/Icons/ListIcon/ListIcon.native.test.tsx
index 60f13846d11..746d3506f42 100644
--- a/packages/blade/src/components/Icons/ListIcon/ListIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ListIcon/ListIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ListIcon />', () => {
   it('should render ListIcon', () => {
     const renderTree = renderWithTheme(
-      <ListIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ListIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ListIcon/ListIcon.web.test.tsx b/packages/blade/src/components/Icons/ListIcon/ListIcon.web.test.tsx
index 6b633f54582..2cce7dd5300 100644
--- a/packages/blade/src/components/Icons/ListIcon/ListIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ListIcon/ListIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ListIcon />', () => {
   it('should render ListIcon', () => {
     const { container } = renderWithTheme(
-      <ListIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ListIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.native.test.tsx.snap
index 43259c6e924..e4510abc59e 100644
--- a/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
     >
       <RNSVGPath
         d="M4 5C4.55228 5 5 5.44772 5 6C5 6.55228 4.55228 7 4 7H3C2.44772 7 2 6.55228 2 6C2 5.44772 2.44772 5 3 5H4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
       />
       <RNSVGPath
         d="M8 5C7.44772 5 7 5.44772 7 6C7 6.55228 7.44772 7 8 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
       />
       <RNSVGPath
         d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H21C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -78,7 +78,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
       />
       <RNSVGPath
         d="M7 18C7 17.4477 7.44772 17 8 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H8C7.44772 19 7 18.5523 7 18Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -87,7 +87,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
       />
       <RNSVGPath
         d="M5 12C5 11.4477 4.55228 11 4 11H3C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H4C4.55228 13 5 12.5523 5 12Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -96,7 +96,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
       />
       <RNSVGPath
         d="M4 17C4.55228 17 5 17.4477 5 18C5 18.5523 4.55228 19 4 19H3C2.44772 19 2 18.5523 2 18C2 17.4477 2.44772 17 3 17H4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.web.test.tsx.snap
index 0cc704573da..e92406b5d2b 100644
--- a/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.web.test.tsx.snap
@@ -14,32 +14,32 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
     <path
       d="M4 5C4.55228 5 5 5.44772 5 6C5 6.55228 4.55228 7 4 7H3C2.44772 7 2 6.55228 2 6C2 5.44772 2.44772 5 3 5H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M8 5C7.44772 5 7 5.44772 7 6C7 6.55228 7.44772 7 8 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H21C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M7 18C7 17.4477 7.44772 17 8 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H8C7.44772 19 7 18.5523 7 18Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M5 12C5 11.4477 4.55228 11 4 11H3C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H4C4.55228 13 5 12.5523 5 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M4 17C4.55228 17 5 17.4477 5 18C5 18.5523 4.55228 19 4 19H3C2.44772 19 2 18.5523 2 18C2 17.4477 2.44772 17 3 17H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/LoaderIcon/LoaderIcon.native.test.tsx b/packages/blade/src/components/Icons/LoaderIcon/LoaderIcon.native.test.tsx
index 82c9e53e5f4..95aa214d125 100644
--- a/packages/blade/src/components/Icons/LoaderIcon/LoaderIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/LoaderIcon/LoaderIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<LoaderIcon />', () => {
   it('should render LoaderIcon', () => {
     const renderTree = renderWithTheme(
-      <LoaderIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LoaderIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LoaderIcon/LoaderIcon.web.test.tsx b/packages/blade/src/components/Icons/LoaderIcon/LoaderIcon.web.test.tsx
index a4ee086db22..8fb822813b9 100644
--- a/packages/blade/src/components/Icons/LoaderIcon/LoaderIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/LoaderIcon/LoaderIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<LoaderIcon />', () => {
   it('should render LoaderIcon', () => {
     const { container } = renderWithTheme(
-      <LoaderIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LoaderIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.native.test.tsx.snap
index 4bc992d0bb1..b0a9b27da74 100644
--- a/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
     >
       <RNSVGPath
         d="M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6V2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
       />
       <RNSVGPath
         d="M13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V18Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
       />
       <RNSVGPath
         d="M4.22289 4.22289C4.61341 3.83236 5.24658 3.83236 5.6371 4.22289L8.4671 7.05289C8.85762 7.44341 8.85762 8.07658 8.4671 8.4671C8.07658 8.85762 7.44341 8.85762 7.05289 8.4671L4.22289 5.6371C3.83236 5.24658 3.83236 4.61341 4.22289 4.22289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -78,7 +78,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
       />
       <RNSVGPath
         d="M16.9471 15.5329C16.5566 15.1424 15.9234 15.1424 15.5329 15.5329C15.1424 15.9234 15.1424 16.5566 15.5329 16.9471L18.3629 19.7771C18.7534 20.1676 19.3866 20.1676 19.7771 19.7771C20.1676 19.3866 20.1676 18.7534 19.7771 18.3629L16.9471 15.5329Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -87,7 +87,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
       />
       <RNSVGPath
         d="M1 12C1 11.4477 1.44772 11 2 11H6C6.55228 11 7 11.4477 7 12C7 12.5523 6.55228 13 6 13H2C1.44772 13 1 12.5523 1 12Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -96,7 +96,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
       />
       <RNSVGPath
         d="M18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H18Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -105,7 +105,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
       />
       <RNSVGPath
         d="M8.4671 15.5329C8.85762 15.9234 8.85762 16.5566 8.4671 16.9471L5.6371 19.7771C5.24658 20.1676 4.61341 20.1676 4.22289 19.7771C3.83236 19.3866 3.83236 18.7534 4.22289 18.3629L7.05289 15.5329C7.44341 15.1424 8.07658 15.1424 8.4671 15.5329Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -114,7 +114,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
       />
       <RNSVGPath
         d="M19.7771 5.6371C20.1676 5.24658 20.1676 4.61341 19.7771 4.22289C19.3866 3.83236 18.7534 3.83236 18.3629 4.22289L15.5329 7.05289C15.1424 7.44341 15.1424 8.07658 15.5329 8.4671C15.9234 8.85762 16.5566 8.85762 16.9471 8.4671L19.7771 5.6371Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.web.test.tsx.snap
index 0ec8da6ce51..487212ff712 100644
--- a/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.web.test.tsx.snap
@@ -14,42 +14,42 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
     <path
       d="M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6V2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V18Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M4.22289 4.22289C4.61341 3.83236 5.24658 3.83236 5.6371 4.22289L8.4671 7.05289C8.85762 7.44341 8.85762 8.07658 8.4671 8.4671C8.07658 8.85762 7.44341 8.85762 7.05289 8.4671L4.22289 5.6371C3.83236 5.24658 3.83236 4.61341 4.22289 4.22289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M16.9471 15.5329C16.5566 15.1424 15.9234 15.1424 15.5329 15.5329C15.1424 15.9234 15.1424 16.5566 15.5329 16.9471L18.3629 19.7771C18.7534 20.1676 19.3866 20.1676 19.7771 19.7771C20.1676 19.3866 20.1676 18.7534 19.7771 18.3629L16.9471 15.5329Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M1 12C1 11.4477 1.44772 11 2 11H6C6.55228 11 7 11.4477 7 12C7 12.5523 6.55228 13 6 13H2C1.44772 13 1 12.5523 1 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H18Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M8.4671 15.5329C8.85762 15.9234 8.85762 16.5566 8.4671 16.9471L5.6371 19.7771C5.24658 20.1676 4.61341 20.1676 4.22289 19.7771C3.83236 19.3866 3.83236 18.7534 4.22289 18.3629L7.05289 15.5329C7.44341 15.1424 8.07658 15.1424 8.4671 15.5329Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M19.7771 5.6371C20.1676 5.24658 20.1676 4.61341 19.7771 4.22289C19.3866 3.83236 18.7534 3.83236 18.3629 4.22289L15.5329 7.05289C15.1424 7.44341 15.1424 8.07658 15.5329 8.4671C15.9234 8.85762 16.5566 8.85762 16.9471 8.4671L19.7771 5.6371Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/LockIcon/LockIcon.native.test.tsx b/packages/blade/src/components/Icons/LockIcon/LockIcon.native.test.tsx
index 8fa094e444e..1d8dd49e5cc 100644
--- a/packages/blade/src/components/Icons/LockIcon/LockIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/LockIcon/LockIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<LockIcon />', () => {
   it('should render LockIcon', () => {
     const renderTree = renderWithTheme(
-      <LockIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LockIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LockIcon/LockIcon.web.test.tsx b/packages/blade/src/components/Icons/LockIcon/LockIcon.web.test.tsx
index 44f149c3fce..c7890a4408d 100644
--- a/packages/blade/src/components/Icons/LockIcon/LockIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/LockIcon/LockIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<LockIcon />', () => {
   it('should render LockIcon', () => {
     const { container } = renderWithTheme(
-      <LockIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LockIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.native.test.tsx.snap
index 4fca216d4f3..8ce18d38ca4 100644
--- a/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<LockIcon /> should render LockIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6 10V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V10H19C20.6569 10 22 11.3431 22 13V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V13C2 11.3431 3.34315 10 5 10H6ZM8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V10H8V7ZM5 12C4.44772 12 4 12.4477 4 13V20C4 20.5523 4.44772 21 5 21H19C19.5523 21 20 20.5523 20 20V13C20 12.4477 19.5523 12 19 12H5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.web.test.tsx.snap
index 4d880aeef14..c48f0ec8ce6 100644
--- a/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<LockIcon /> should render LockIcon 1`] = `
       clip-rule="evenodd"
       d="M6 10V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V10H19C20.6569 10 22 11.3431 22 13V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V13C2 11.3431 3.34315 10 5 10H6ZM8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V10H8V7ZM5 12C4.44772 12 4 12.4477 4 13V20C4 20.5523 4.44772 21 5 21H19C19.5523 21 20 20.5523 20 20V13C20 12.4477 19.5523 12 19 12H5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/LogInIcon/LogInIcon.native.test.tsx b/packages/blade/src/components/Icons/LogInIcon/LogInIcon.native.test.tsx
index 6d69e4d4786..d266d5dd099 100644
--- a/packages/blade/src/components/Icons/LogInIcon/LogInIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/LogInIcon/LogInIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<LogInIcon />', () => {
   it('should render LogInIcon', () => {
     const renderTree = renderWithTheme(
-      <LogInIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LogInIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LogInIcon/LogInIcon.web.test.tsx b/packages/blade/src/components/Icons/LogInIcon/LogInIcon.web.test.tsx
index a2317335cd2..17d73a066bc 100644
--- a/packages/blade/src/components/Icons/LogInIcon/LogInIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/LogInIcon/LogInIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<LogInIcon />', () => {
   it('should render LogInIcon', () => {
     const { container } = renderWithTheme(
-      <LogInIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LogInIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.native.test.tsx.snap
index e906bafe6ba..b7d8b6f6fea 100644
--- a/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<LogInIcon /> should render LogInIcon 1`] = `
     >
       <RNSVGPath
         d="M13 2C13 1.44772 13.4477 1 14 1H19C20.6569 1 22 2.34315 22 4V20C22 21.6569 20.6569 23 19 23H14C13.4477 23 13 22.5523 13 22C13 21.4477 13.4477 21 14 21H19C19.5523 21 20 20.5523 20 20V4C20 3.44772 19.5523 3 19 3H14C13.4477 3 13 2.55228 13 2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<LogInIcon /> should render LogInIcon 1`] = `
       />
       <RNSVGPath
         d="M10.2929 7.29289C10.6834 6.90237 11.3166 6.90237 11.7071 7.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L11.7071 16.7071C11.3166 17.0976 10.6834 17.0976 10.2929 16.7071C9.90237 16.3166 9.90237 15.6834 10.2929 15.2929L12.5858 13H3C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11H12.5858L10.2929 8.70711C9.90237 8.31658 9.90237 7.68342 10.2929 7.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.web.test.tsx.snap
index ed9dcbbbc70..0eb98b704c6 100644
--- a/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<LogInIcon /> should render LogInIcon 1`] = `
     <path
       d="M13 2C13 1.44772 13.4477 1 14 1H19C20.6569 1 22 2.34315 22 4V20C22 21.6569 20.6569 23 19 23H14C13.4477 23 13 22.5523 13 22C13 21.4477 13.4477 21 14 21H19C19.5523 21 20 20.5523 20 20V4C20 3.44772 19.5523 3 19 3H14C13.4477 3 13 2.55228 13 2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M10.2929 7.29289C10.6834 6.90237 11.3166 6.90237 11.7071 7.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L11.7071 16.7071C11.3166 17.0976 10.6834 17.0976 10.2929 16.7071C9.90237 16.3166 9.90237 15.6834 10.2929 15.2929L12.5858 13H3C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11H12.5858L10.2929 8.70711C9.90237 8.31658 9.90237 7.68342 10.2929 7.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/LogOutIcon/LogOutIcon.native.test.tsx b/packages/blade/src/components/Icons/LogOutIcon/LogOutIcon.native.test.tsx
index b27b2fc476e..e41ff548651 100644
--- a/packages/blade/src/components/Icons/LogOutIcon/LogOutIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/LogOutIcon/LogOutIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<LogOutIcon />', () => {
   it('should render LogOutIcon', () => {
     const renderTree = renderWithTheme(
-      <LogOutIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LogOutIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LogOutIcon/LogOutIcon.web.test.tsx b/packages/blade/src/components/Icons/LogOutIcon/LogOutIcon.web.test.tsx
index 76d52f73cbd..6a5872e22f8 100644
--- a/packages/blade/src/components/Icons/LogOutIcon/LogOutIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/LogOutIcon/LogOutIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<LogOutIcon />', () => {
   it('should render LogOutIcon', () => {
     const { container } = renderWithTheme(
-      <LogOutIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <LogOutIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.native.test.tsx.snap
index 3ad29393119..730d0611653 100644
--- a/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<LogOutIcon /> should render LogOutIcon 1`] = `
     >
       <RNSVGPath
         d="M5 3C4.44772 3 4 3.44772 4 4V20C4 20.5523 4.44772 21 5 21H10C10.5523 21 11 21.4477 11 22C11 22.5523 10.5523 23 10 23H5C3.34315 23 2 21.6569 2 20V4C2 2.34315 3.34315 1 5 1H10C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3H5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<LogOutIcon /> should render LogOutIcon 1`] = `
       />
       <RNSVGPath
         d="M16.2929 7.29289C16.6834 6.90237 17.3166 6.90237 17.7071 7.29289L21.7071 11.2929C22.0976 11.6834 22.0976 12.3166 21.7071 12.7071L17.7071 16.7071C17.3166 17.0976 16.6834 17.0976 16.2929 16.7071C15.9024 16.3166 15.9024 15.6834 16.2929 15.2929L18.5858 13H9C8.44772 13 8 12.5523 8 12C8 11.4477 8.44772 11 9 11H18.5858L16.2929 8.70711C15.9024 8.31658 15.9024 7.68342 16.2929 7.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.web.test.tsx.snap
index 4aeb41c7960..a3e2980dd85 100644
--- a/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<LogOutIcon /> should render LogOutIcon 1`] = `
     <path
       d="M5 3C4.44772 3 4 3.44772 4 4V20C4 20.5523 4.44772 21 5 21H10C10.5523 21 11 21.4477 11 22C11 22.5523 10.5523 23 10 23H5C3.34315 23 2 21.6569 2 20V4C2 2.34315 3.34315 1 5 1H10C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3H5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M16.2929 7.29289C16.6834 6.90237 17.3166 6.90237 17.7071 7.29289L21.7071 11.2929C22.0976 11.6834 22.0976 12.3166 21.7071 12.7071L17.7071 16.7071C17.3166 17.0976 16.6834 17.0976 16.2929 16.7071C15.9024 16.3166 15.9024 15.6834 16.2929 15.2929L18.5858 13H9C8.44772 13 8 12.5523 8 12C8 11.4477 8.44772 11 9 11H18.5858L16.2929 8.70711C15.9024 8.31658 15.9024 7.68342 16.2929 7.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/MailIcon/MailIcon.native.test.tsx b/packages/blade/src/components/Icons/MailIcon/MailIcon.native.test.tsx
index 4151d3259b3..68882c9f119 100644
--- a/packages/blade/src/components/Icons/MailIcon/MailIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MailIcon/MailIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MailIcon />', () => {
   it('should render MailIcon', () => {
     const renderTree = renderWithTheme(
-      <MailIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MailIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MailIcon/MailIcon.web.test.tsx b/packages/blade/src/components/Icons/MailIcon/MailIcon.web.test.tsx
index 435b356764d..e34c3b57914 100644
--- a/packages/blade/src/components/Icons/MailIcon/MailIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MailIcon/MailIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MailIcon />', () => {
   it('should render MailIcon', () => {
     const { container } = renderWithTheme(
-      <MailIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MailIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.native.test.tsx.snap
index 5cb508a2abf..8124fc9a86b 100644
--- a/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MailIcon /> should render MailIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M23 6.01769V18C23 19.6523 21.6523 21 20 21H4C2.34772 21 1 19.6523 1 18V6C1 4.34772 2.34772 3 4 3H20C21.6443 3 22.987 4.33473 22.9999 5.97608C23.0002 5.98996 23.0003 6.00383 23 6.01769ZM3.10659 5.55392C3.27198 5.22691 3.61205 5 4 5H20C20.388 5 20.7281 5.22695 20.8935 5.55401L12.0001 11.7794L3.10659 5.55392ZM3 7.92062V18C3 18.5477 3.45228 19 4 19H20C20.5477 19 21 18.5477 21 18V7.92074L12.5735 13.8193C12.2292 14.0603 11.7709 14.0603 11.4266 13.8193L3 7.92062Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.web.test.tsx.snap
index 27d4deb04a8..c9dd8082442 100644
--- a/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MailIcon /> should render MailIcon 1`] = `
       clip-rule="evenodd"
       d="M23 6.01769V18C23 19.6523 21.6523 21 20 21H4C2.34772 21 1 19.6523 1 18V6C1 4.34772 2.34772 3 4 3H20C21.6443 3 22.987 4.33473 22.9999 5.97608C23.0002 5.98996 23.0003 6.00383 23 6.01769ZM3.10659 5.55392C3.27198 5.22691 3.61205 5 4 5H20C20.388 5 20.7281 5.22695 20.8935 5.55401L12.0001 11.7794L3.10659 5.55392ZM3 7.92062V18C3 18.5477 3.45228 19 4 19H20C20.5477 19 21 18.5477 21 18V7.92074L12.5735 13.8193C12.2292 14.0603 11.7709 14.0603 11.4266 13.8193L3 7.92062Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MailOpenIcon/MailOpenIcon.native.test.tsx b/packages/blade/src/components/Icons/MailOpenIcon/MailOpenIcon.native.test.tsx
index bb31fbd67eb..7094845353a 100644
--- a/packages/blade/src/components/Icons/MailOpenIcon/MailOpenIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MailOpenIcon/MailOpenIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MailOpenIcon />', () => {
   it('should render MailOpenIcon', () => {
     const renderTree = renderWithTheme(
-      <MailOpenIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MailOpenIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MailOpenIcon/MailOpenIcon.web.test.tsx b/packages/blade/src/components/Icons/MailOpenIcon/MailOpenIcon.web.test.tsx
index a8adb28d5cb..fb48e463f04 100644
--- a/packages/blade/src/components/Icons/MailOpenIcon/MailOpenIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MailOpenIcon/MailOpenIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MailOpenIcon />', () => {
   it('should render MailOpenIcon', () => {
     const { container } = renderWithTheme(
-      <MailOpenIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MailOpenIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.native.test.tsx.snap
index bbb5649e9fa..fef06c35bd3 100644
--- a/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MailOpenIcon /> should render MailOpenIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M22.7829 8.36084C22.6408 8.11932 22.4368 7.92021 22.1918 7.7841L19.4643 6.26881V3.75C19.4643 3.02065 19.1746 2.32118 18.6588 1.80546C18.1431 1.28973 17.4436 1 16.7143 1H7.28571C6.55637 1 5.8569 1.28973 5.34117 1.80546C4.82544 2.32118 4.53571 3.02065 4.53571 3.75V6.26881L1.80824 7.78408C1.56328 7.92018 1.35917 8.11931 1.21706 8.36084C1.07495 8.60236 1.00001 8.8775 1 9.15773V19.0714C1 20.1133 1.4139 21.1126 2.15065 21.8493C2.8874 22.5861 3.88665 23 4.92857 23H19.0714C20.1133 23 21.1126 22.5861 21.8493 21.8493C22.5861 21.1126 23 20.1133 23 19.0714V9.15773C23 8.87749 22.925 8.60236 22.7829 8.36084ZM4.92857 7.84824V7.84823L2.57142 9.15773L2.57143 19.0714V9.15773L4.92857 7.84824ZM4.53571 8.51589V10.4482C4.37829 10.4162 4.21392 10.4229 4.05726 10.47C3.80784 10.5449 3.59835 10.7157 3.47483 10.945C3.35131 11.1742 3.32386 11.4431 3.39851 11.6926C3.47316 11.9421 3.64421 12.152 3.87336 12.2757L11.5348 16.4011C11.6779 16.4777 11.8377 16.5179 12 16.5179C12.1623 16.5179 12.3228 16.4774 12.4659 16.4007L20.127 12.2755C20.3562 12.1517 20.5268 11.9421 20.6015 11.6926C20.6761 11.4431 20.6487 11.1742 20.5252 10.945C20.4016 10.7157 20.1922 10.5449 19.9427 10.47C19.7861 10.4229 19.6217 10.4162 19.4643 10.4482V8.51589L21.0357 9.38889V19.071C21.0351 19.5919 20.8279 20.0913 20.4596 20.4596C20.0913 20.8279 19.5919 21.0351 19.071 21.0357H4.92902C4.40813 21.0351 3.90873 20.8279 3.5404 20.4596C3.17211 20.0913 2.96492 19.5918 2.96429 19.071L2.96429 9.38889L4.53571 8.51589ZM6.73053 3.19481C6.87788 3.04746 7.07779 2.96456 7.28616 2.96429H16.7138C16.9222 2.96456 17.1221 3.04746 17.2695 3.19481C17.4169 3.3422 17.4998 3.54202 17.5 3.75045V11.4584L12 14.4202L6.5 11.4584V3.75018C6.50031 3.54185 6.58321 3.34213 6.73053 3.19481ZM7.28571 2.57143H16.7143L7.28571 2.57142C6.97324 2.57178 6.67368 2.69607 6.45273 2.91702C6.23178 3.13796 6.1075 3.43753 6.10714 3.75L6.10714 11.6931V3.75C6.1075 3.43753 6.23179 3.13797 6.45273 2.91702C6.67368 2.69607 6.97325 2.57179 7.28571 2.57143Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.web.test.tsx.snap
index e3c2dbf3081..ebf20891ddb 100644
--- a/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MailOpenIcon /> should render MailOpenIcon 1`] = `
       clip-rule="evenodd"
       d="M22.7829 8.36084C22.6408 8.11932 22.4368 7.92021 22.1918 7.7841L19.4643 6.26881V3.75C19.4643 3.02065 19.1746 2.32118 18.6588 1.80546C18.1431 1.28973 17.4436 1 16.7143 1H7.28571C6.55637 1 5.8569 1.28973 5.34117 1.80546C4.82544 2.32118 4.53571 3.02065 4.53571 3.75V6.26881L1.80824 7.78408C1.56328 7.92018 1.35917 8.11931 1.21706 8.36084C1.07495 8.60236 1.00001 8.8775 1 9.15773V19.0714C1 20.1133 1.4139 21.1126 2.15065 21.8493C2.8874 22.5861 3.88665 23 4.92857 23H19.0714C20.1133 23 21.1126 22.5861 21.8493 21.8493C22.5861 21.1126 23 20.1133 23 19.0714V9.15773C23 8.87749 22.925 8.60236 22.7829 8.36084ZM4.92857 7.84824V7.84823L2.57142 9.15773L2.57143 19.0714V9.15773L4.92857 7.84824ZM4.53571 8.51589V10.4482C4.37829 10.4162 4.21392 10.4229 4.05726 10.47C3.80784 10.5449 3.59835 10.7157 3.47483 10.945C3.35131 11.1742 3.32386 11.4431 3.39851 11.6926C3.47316 11.9421 3.64421 12.152 3.87336 12.2757L11.5348 16.4011C11.6779 16.4777 11.8377 16.5179 12 16.5179C12.1623 16.5179 12.3228 16.4774 12.4659 16.4007L20.127 12.2755C20.3562 12.1517 20.5268 11.9421 20.6015 11.6926C20.6761 11.4431 20.6487 11.1742 20.5252 10.945C20.4016 10.7157 20.1922 10.5449 19.9427 10.47C19.7861 10.4229 19.6217 10.4162 19.4643 10.4482V8.51589L21.0357 9.38889V19.071C21.0351 19.5919 20.8279 20.0913 20.4596 20.4596C20.0913 20.8279 19.5919 21.0351 19.071 21.0357H4.92902C4.40813 21.0351 3.90873 20.8279 3.5404 20.4596C3.17211 20.0913 2.96492 19.5918 2.96429 19.071L2.96429 9.38889L4.53571 8.51589ZM6.73053 3.19481C6.87788 3.04746 7.07779 2.96456 7.28616 2.96429H16.7138C16.9222 2.96456 17.1221 3.04746 17.2695 3.19481C17.4169 3.3422 17.4998 3.54202 17.5 3.75045V11.4584L12 14.4202L6.5 11.4584V3.75018C6.50031 3.54185 6.58321 3.34213 6.73053 3.19481ZM7.28571 2.57143H16.7143L7.28571 2.57142C6.97324 2.57178 6.67368 2.69607 6.45273 2.91702C6.23178 3.13796 6.1075 3.43753 6.10714 3.75L6.10714 11.6931V3.75C6.1075 3.43753 6.23179 3.13797 6.45273 2.91702C6.67368 2.69607 6.97325 2.57179 7.28571 2.57143Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MapIcon/MapIcon.native.test.tsx b/packages/blade/src/components/Icons/MapIcon/MapIcon.native.test.tsx
index de30129f3e2..3b2df5a491e 100644
--- a/packages/blade/src/components/Icons/MapIcon/MapIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MapIcon/MapIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MapIcon />', () => {
   it('should render MapIcon', () => {
     const renderTree = renderWithTheme(
-      <MapIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MapIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MapIcon/MapIcon.web.test.tsx b/packages/blade/src/components/Icons/MapIcon/MapIcon.web.test.tsx
index fd08d4d1139..d43f9425df2 100644
--- a/packages/blade/src/components/Icons/MapIcon/MapIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MapIcon/MapIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MapIcon />', () => {
   it('should render MapIcon', () => {
     const { container } = renderWithTheme(
-      <MapIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MapIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.native.test.tsx.snap
index 29e2c67eae8..1129c7a2e11 100644
--- a/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MapIcon /> should render MapIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 1C7.81313 1 7.63824 1.05126 7.4886 1.14048L0.503861 5.13176C0.192286 5.3098 0 5.64114 0 6V22C0 22.3565 0.189758 22.686 0.498073 22.8649C0.806388 23.0438 1.18664 23.0451 1.49614 22.8682L8.03147 19.1338L15.5348 22.8854C15.6646 22.9538 15.8112 22.9944 15.9669 22.9995C15.9779 22.9998 15.989 23 16 23C16.1869 23 16.3618 22.9487 16.5114 22.8595L23.4961 18.8682C23.8077 18.6902 24 18.3589 24 18V2C24 1.64353 23.8102 1.31401 23.5019 1.13509C23.1936 0.956168 22.8134 0.954898 22.5039 1.13176L15.9685 4.86623L8.46522 1.11457C8.32625 1.04141 8.16796 1 8 1ZM17 20.2768L22 17.4197V3.72318L17 6.58032V20.2768ZM15 6.61803L9 3.61803V17.382L15 20.382V6.61803ZM2 6.58032L7 3.72318V17.4197L2 20.2768V6.58032Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.web.test.tsx.snap
index 9b019fedd2b..8c0d59795e2 100644
--- a/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MapIcon /> should render MapIcon 1`] = `
       clip-rule="evenodd"
       d="M8 1C7.81313 1 7.63824 1.05126 7.4886 1.14048L0.503861 5.13176C0.192286 5.3098 0 5.64114 0 6V22C0 22.3565 0.189758 22.686 0.498073 22.8649C0.806388 23.0438 1.18664 23.0451 1.49614 22.8682L8.03147 19.1338L15.5348 22.8854C15.6646 22.9538 15.8112 22.9944 15.9669 22.9995C15.9779 22.9998 15.989 23 16 23C16.1869 23 16.3618 22.9487 16.5114 22.8595L23.4961 18.8682C23.8077 18.6902 24 18.3589 24 18V2C24 1.64353 23.8102 1.31401 23.5019 1.13509C23.1936 0.956168 22.8134 0.954898 22.5039 1.13176L15.9685 4.86623L8.46522 1.11457C8.32625 1.04141 8.16796 1 8 1ZM17 20.2768L22 17.4197V3.72318L17 6.58032V20.2768ZM15 6.61803L9 3.61803V17.382L15 20.382V6.61803ZM2 6.58032L7 3.72318V17.4197L2 20.2768V6.58032Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MapPinIcon/MapPinIcon.native.test.tsx b/packages/blade/src/components/Icons/MapPinIcon/MapPinIcon.native.test.tsx
index bc013247d0e..d21d3bec4b5 100644
--- a/packages/blade/src/components/Icons/MapPinIcon/MapPinIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MapPinIcon/MapPinIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MapPinIcon />', () => {
   it('should render MapPinIcon', () => {
     const renderTree = renderWithTheme(
-      <MapPinIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MapPinIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MapPinIcon/MapPinIcon.web.test.tsx b/packages/blade/src/components/Icons/MapPinIcon/MapPinIcon.web.test.tsx
index 4d4fe1a74dc..9328659e05f 100644
--- a/packages/blade/src/components/Icons/MapPinIcon/MapPinIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MapPinIcon/MapPinIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MapPinIcon />', () => {
   it('should render MapPinIcon', () => {
     const { container } = renderWithTheme(
-      <MapPinIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MapPinIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.native.test.tsx.snap
index 7aed9cca8db..f8027b595fc 100644
--- a/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
     >
       <RNSVGPath
         d="M11.4448 23.8317C11.4448 23.8317 11.4453 23.8321 12 23L12.5547 23.8321C12.2188 24.056 11.7807 24.0556 11.4448 23.8317Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 6C9.79086 6 8 7.79086 8 10C8 12.2091 9.79086 14 12 14C14.2091 14 16 12.2091 16 10C16 7.79086 14.2091 6 12 6ZM10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -73,7 +73,7 @@ exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.4448 23.8317L12 23C12.5547 23.8321 12.556 23.8312 12.556 23.8312L12.5581 23.8298L12.5648 23.8253L12.5877 23.8098C12.6072 23.7966 12.6349 23.7776 12.6704 23.753C12.7415 23.7038 12.8435 23.6321 12.9722 23.5392C13.2295 23.3534 13.5936 23.0822 14.0292 22.7354C14.8987 22.043 16.0606 21.0428 17.226 19.8127C19.5157 17.3958 22 13.9019 22 10C22 4.47715 17.5228 0 12 0C6.47715 0 2 4.47715 2 10C2 13.9019 4.48426 17.3958 6.77405 19.8127C7.93939 21.0428 9.10133 22.043 9.97082 22.7354C10.4064 23.0822 10.7705 23.3534 11.0278 23.5392C11.1565 23.6321 11.2585 23.7038 11.3296 23.753C11.3651 23.7776 11.3928 23.7966 11.4123 23.8098L11.4352 23.8253L11.4419 23.8298L11.4448 23.8317ZM4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 13.0981 17.9843 16.1042 15.774 18.4373C14.6894 19.5822 13.6013 20.5195 12.7833 21.1708C12.4789 21.4133 12.213 21.6152 12 21.7726C11.787 21.6152 11.5211 21.4133 11.2167 21.1708C10.3987 20.5195 9.31061 19.5822 8.22595 18.4373C6.01574 16.1042 4 13.0981 4 10Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.web.test.tsx.snap
index bb5f90e45d2..973e1755904 100644
--- a/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.web.test.tsx.snap
@@ -14,20 +14,20 @@ exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
     <path
       d="M11.4448 23.8317C11.4448 23.8317 11.4453 23.8321 12 23L12.5547 23.8321C12.2188 24.056 11.7807 24.0556 11.4448 23.8317Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M12 6C9.79086 6 8 7.79086 8 10C8 12.2091 9.79086 14 12 14C14.2091 14 16 12.2091 16 10C16 7.79086 14.2091 6 12 6ZM10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M11.4448 23.8317L12 23C12.5547 23.8321 12.556 23.8312 12.556 23.8312L12.5581 23.8298L12.5648 23.8253L12.5877 23.8098C12.6072 23.7966 12.6349 23.7776 12.6704 23.753C12.7415 23.7038 12.8435 23.6321 12.9722 23.5392C13.2295 23.3534 13.5936 23.0822 14.0292 22.7354C14.8987 22.043 16.0606 21.0428 17.226 19.8127C19.5157 17.3958 22 13.9019 22 10C22 4.47715 17.5228 0 12 0C6.47715 0 2 4.47715 2 10C2 13.9019 4.48426 17.3958 6.77405 19.8127C7.93939 21.0428 9.10133 22.043 9.97082 22.7354C10.4064 23.0822 10.7705 23.3534 11.0278 23.5392C11.1565 23.6321 11.2585 23.7038 11.3296 23.753C11.3651 23.7776 11.3928 23.7966 11.4123 23.8098L11.4352 23.8253L11.4419 23.8298L11.4448 23.8317ZM4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 13.0981 17.9843 16.1042 15.774 18.4373C14.6894 19.5822 13.6013 20.5195 12.7833 21.1708C12.4789 21.4133 12.213 21.6152 12 21.7726C11.787 21.6152 11.5211 21.4133 11.2167 21.1708C10.3987 20.5195 9.31061 19.5822 8.22595 18.4373C6.01574 16.1042 4 13.0981 4 10Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MaximizeIcon/MaximizeIcon.native.test.tsx b/packages/blade/src/components/Icons/MaximizeIcon/MaximizeIcon.native.test.tsx
index 61449237dda..7c45c6de0fc 100644
--- a/packages/blade/src/components/Icons/MaximizeIcon/MaximizeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MaximizeIcon/MaximizeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MaximizeIcon />', () => {
   it('should render MaximizeIcon', () => {
     const renderTree = renderWithTheme(
-      <MaximizeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MaximizeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MaximizeIcon/MaximizeIcon.web.test.tsx b/packages/blade/src/components/Icons/MaximizeIcon/MaximizeIcon.web.test.tsx
index 8ca05483a76..5f66dfd92d4 100644
--- a/packages/blade/src/components/Icons/MaximizeIcon/MaximizeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MaximizeIcon/MaximizeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MaximizeIcon />', () => {
   it('should render MaximizeIcon', () => {
     const { container } = renderWithTheme(
-      <MaximizeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MaximizeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.native.test.tsx.snap
index 82b001c0afc..fd78856c0ae 100644
--- a/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<MaximizeIcon /> should render MaximizeIcon 1`] = `
     >
       <RNSVGPath
         d="M15 2C14.4477 2 14 2.44772 14 3C14 3.55228 14.4477 4 15 4H18.5858L13.2929 9.29289C12.9024 9.68342 12.9024 10.3166 13.2929 10.7071C13.6834 11.0976 14.3166 11.0976 14.7071 10.7071L20 5.41421V9C20 9.55228 20.4477 10 21 10C21.5523 10 22 9.55228 22 9V3C22 2.44772 21.5523 2 21 2H15Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<MaximizeIcon /> should render MaximizeIcon 1`] = `
       />
       <RNSVGPath
         d="M4 15C4 14.4477 3.55228 14 3 14C2.44772 14 2 14.4477 2 15V21C2 21.5523 2.44772 22 3 22H9C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20H5.41421L10.7071 14.7071C11.0976 14.3166 11.0976 13.6834 10.7071 13.2929C10.3166 12.9024 9.68342 12.9024 9.29289 13.2929L4 18.5858V15Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.web.test.tsx.snap
index f45a08d168a..8837cdb0314 100644
--- a/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<MaximizeIcon /> should render MaximizeIcon 1`] = `
     <path
       d="M15 2C14.4477 2 14 2.44772 14 3C14 3.55228 14.4477 4 15 4H18.5858L13.2929 9.29289C12.9024 9.68342 12.9024 10.3166 13.2929 10.7071C13.6834 11.0976 14.3166 11.0976 14.7071 10.7071L20 5.41421V9C20 9.55228 20.4477 10 21 10C21.5523 10 22 9.55228 22 9V3C22 2.44772 21.5523 2 21 2H15Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M4 15C4 14.4477 3.55228 14 3 14C2.44772 14 2 14.4477 2 15V21C2 21.5523 2.44772 22 3 22H9C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20H5.41421L10.7071 14.7071C11.0976 14.3166 11.0976 13.6834 10.7071 13.2929C10.3166 12.9024 9.68342 12.9024 9.29289 13.2929L4 18.5858V15Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/MenuDotsIcon/MenuDotsIcon.native.test.tsx b/packages/blade/src/components/Icons/MenuDotsIcon/MenuDotsIcon.native.test.tsx
index 504c4338b41..068ec7daf8d 100644
--- a/packages/blade/src/components/Icons/MenuDotsIcon/MenuDotsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MenuDotsIcon/MenuDotsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MenuDotsIcon />', () => {
   it('should render MenuDotsIcon', () => {
     const renderTree = renderWithTheme(
-      <MenuDotsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MenuDotsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MenuDotsIcon/MenuDotsIcon.web.test.tsx b/packages/blade/src/components/Icons/MenuDotsIcon/MenuDotsIcon.web.test.tsx
index c6c68329b99..420d6ff1c61 100644
--- a/packages/blade/src/components/Icons/MenuDotsIcon/MenuDotsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MenuDotsIcon/MenuDotsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MenuDotsIcon />', () => {
   it('should render MenuDotsIcon', () => {
     const { container } = renderWithTheme(
-      <MenuDotsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MenuDotsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.native.test.tsx.snap
index 30f68342005..141b3272c26 100644
--- a/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MenuDotsIcon /> should render MenuDotsIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6.07692 3.53846C6.07692 4.94042 4.94042 6.07692 3.53846 6.07692C2.13651 6.07692 1 4.94042 1 3.53846C1 2.13651 2.13651 1 3.53846 1C4.94042 1 6.07692 2.13651 6.07692 3.53846ZM6.07692 12.0002C6.07692 13.4021 4.94042 14.5386 3.53846 14.5386C2.13651 14.5386 1 13.4021 1 12.0002C1 10.5982 2.13651 9.46171 3.53846 9.46171C4.94042 9.46171 6.07692 10.5982 6.07692 12.0002ZM3.53846 22.9999C4.94042 22.9999 6.07692 21.8634 6.07692 20.4614C6.07692 19.0595 4.94042 17.923 3.53846 17.923C2.13651 17.923 1 19.0595 1 20.4614C1 21.8634 2.13651 22.9999 3.53846 22.9999ZM14.5384 3.53846C14.5384 4.94042 13.4019 6.07692 11.9999 6.07692C10.598 6.07692 9.46149 4.94042 9.46149 3.53846C9.46149 2.13651 10.598 1 11.9999 1C13.4019 1 14.5384 2.13651 14.5384 3.53846ZM11.9999 14.5386C13.4019 14.5386 14.5384 13.4021 14.5384 12.0002C14.5384 10.5982 13.4019 9.46171 11.9999 9.46171C10.598 9.46171 9.46149 10.5982 9.46149 12.0002C9.46149 13.4021 10.598 14.5386 11.9999 14.5386ZM14.5384 20.4614C14.5384 21.8634 13.4019 22.9999 11.9999 22.9999C10.598 22.9999 9.46149 21.8634 9.46149 20.4614C9.46149 19.0595 10.598 17.923 11.9999 17.923C13.4019 17.923 14.5384 19.0595 14.5384 20.4614ZM20.4614 6.07692C21.8634 6.07692 22.9999 4.94042 22.9999 3.53846C22.9999 2.13651 21.8634 1 20.4614 1C19.0595 1 17.923 2.13651 17.923 3.53846C17.923 4.94042 19.0595 6.07692 20.4614 6.07692ZM22.9999 12.0002C22.9999 13.4021 21.8634 14.5386 20.4614 14.5386C19.0595 14.5386 17.923 13.4021 17.923 12.0002C17.923 10.5982 19.0595 9.46171 20.4614 9.46171C21.8634 9.46171 22.9999 10.5982 22.9999 12.0002ZM20.4614 22.9999C21.8634 22.9999 22.9999 21.8634 22.9999 20.4614C22.9999 19.0595 21.8634 17.923 20.4614 17.923C19.0595 17.923 17.923 19.0595 17.923 20.4614C17.923 21.8634 19.0595 22.9999 20.4614 22.9999Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.web.test.tsx.snap
index 29b9bb9ed95..64dbacad024 100644
--- a/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MenuDotsIcon /> should render MenuDotsIcon 1`] = `
       clip-rule="evenodd"
       d="M6.07692 3.53846C6.07692 4.94042 4.94042 6.07692 3.53846 6.07692C2.13651 6.07692 1 4.94042 1 3.53846C1 2.13651 2.13651 1 3.53846 1C4.94042 1 6.07692 2.13651 6.07692 3.53846ZM6.07692 12.0002C6.07692 13.4021 4.94042 14.5386 3.53846 14.5386C2.13651 14.5386 1 13.4021 1 12.0002C1 10.5982 2.13651 9.46171 3.53846 9.46171C4.94042 9.46171 6.07692 10.5982 6.07692 12.0002ZM3.53846 22.9999C4.94042 22.9999 6.07692 21.8634 6.07692 20.4614C6.07692 19.0595 4.94042 17.923 3.53846 17.923C2.13651 17.923 1 19.0595 1 20.4614C1 21.8634 2.13651 22.9999 3.53846 22.9999ZM14.5384 3.53846C14.5384 4.94042 13.4019 6.07692 11.9999 6.07692C10.598 6.07692 9.46149 4.94042 9.46149 3.53846C9.46149 2.13651 10.598 1 11.9999 1C13.4019 1 14.5384 2.13651 14.5384 3.53846ZM11.9999 14.5386C13.4019 14.5386 14.5384 13.4021 14.5384 12.0002C14.5384 10.5982 13.4019 9.46171 11.9999 9.46171C10.598 9.46171 9.46149 10.5982 9.46149 12.0002C9.46149 13.4021 10.598 14.5386 11.9999 14.5386ZM14.5384 20.4614C14.5384 21.8634 13.4019 22.9999 11.9999 22.9999C10.598 22.9999 9.46149 21.8634 9.46149 20.4614C9.46149 19.0595 10.598 17.923 11.9999 17.923C13.4019 17.923 14.5384 19.0595 14.5384 20.4614ZM20.4614 6.07692C21.8634 6.07692 22.9999 4.94042 22.9999 3.53846C22.9999 2.13651 21.8634 1 20.4614 1C19.0595 1 17.923 2.13651 17.923 3.53846C17.923 4.94042 19.0595 6.07692 20.4614 6.07692ZM22.9999 12.0002C22.9999 13.4021 21.8634 14.5386 20.4614 14.5386C19.0595 14.5386 17.923 13.4021 17.923 12.0002C17.923 10.5982 19.0595 9.46171 20.4614 9.46171C21.8634 9.46171 22.9999 10.5982 22.9999 12.0002ZM20.4614 22.9999C21.8634 22.9999 22.9999 21.8634 22.9999 20.4614C22.9999 19.0595 21.8634 17.923 20.4614 17.923C19.0595 17.923 17.923 19.0595 17.923 20.4614C17.923 21.8634 19.0595 22.9999 20.4614 22.9999Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MenuIcon/MenuIcon.native.test.tsx b/packages/blade/src/components/Icons/MenuIcon/MenuIcon.native.test.tsx
index 9598cef04d2..dd0949e2668 100644
--- a/packages/blade/src/components/Icons/MenuIcon/MenuIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MenuIcon/MenuIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MenuIcon />', () => {
   it('should render MenuIcon', () => {
     const renderTree = renderWithTheme(
-      <MenuIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MenuIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MenuIcon/MenuIcon.web.test.tsx b/packages/blade/src/components/Icons/MenuIcon/MenuIcon.web.test.tsx
index 5dd1ec7dc84..8cec48d416e 100644
--- a/packages/blade/src/components/Icons/MenuIcon/MenuIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MenuIcon/MenuIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MenuIcon />', () => {
   it('should render MenuIcon', () => {
     const { container } = renderWithTheme(
-      <MenuIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MenuIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.native.test.tsx.snap
index b3fe31599f1..9fa3f70710c 100644
--- a/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MenuIcon /> should render MenuIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<MenuIcon /> should render MenuIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<MenuIcon /> should render MenuIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.web.test.tsx.snap
index 684545223da..29c30d37e23 100644
--- a/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.web.test.tsx.snap
@@ -15,21 +15,21 @@ exports[`<MenuIcon /> should render MenuIcon 1`] = `
       clip-rule="evenodd"
       d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MessageCircleIcon/MessageCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/MessageCircleIcon/MessageCircleIcon.native.test.tsx
index 21a9bc527ca..44f0bcfa37b 100644
--- a/packages/blade/src/components/Icons/MessageCircleIcon/MessageCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MessageCircleIcon/MessageCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MessageCircleIcon />', () => {
   it('should render MessageCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <MessageCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MessageCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MessageCircleIcon/MessageCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/MessageCircleIcon/MessageCircleIcon.web.test.tsx
index fb23713d043..dde69ec2768 100644
--- a/packages/blade/src/components/Icons/MessageCircleIcon/MessageCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MessageCircleIcon/MessageCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MessageCircleIcon />', () => {
   it('should render MessageCircleIcon', () => {
     const { container } = renderWithTheme(
-      <MessageCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MessageCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.native.test.tsx.snap
index bc199412872..79a5cfbb3bb 100644
--- a/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<MessageCircleIcon /> should render MessageCircleIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M12.4974 4.00003C11.3351 3.99699 10.1884 4.26857 9.15088 4.79263L9.14709 4.79454L9.14709 4.79453C6.6065 6.06427 5.00113 8.6602 5.00003 11.5004L5.00002 11.5026C4.99699 12.665 5.26857 13.8116 5.79263 14.8492C5.91284 15.0872 5.93303 15.3633 5.84871 15.6163L4.58117 19.4189L8.3838 18.1513C8.63541 18.0675 8.91002 18.087 9.14724 18.2056C10.7487 19.0064 12.0577 19.0475 12.376 19.0078C12.4229 19.0019 12.4703 18.9994 12.5176 19.0002C13.3301 19.0144 14.6949 18.8253 16.0136 18.1992C17.3158 17.5809 18.5247 16.5627 19.1702 14.932C19.1814 14.9038 19.1938 14.8762 19.2074 14.8492C19.7315 13.8116 20.0031 12.665 20 11.5026L20 11.5V11.0284C19.7778 7.24294 16.7571 4.22222 12.9716 4.00003H12.5L12.4974 4.00003ZM12.5013 2.00003C11.0251 1.99639 9.56887 2.34122 8.25107 3.00647C5.03442 4.615 3.00182 7.90209 3.00003 11.4986C2.99671 12.8332 3.27825 14.1516 3.82392 15.3661L2.05134 20.6838C1.93157 21.0431 2.02509 21.4393 2.29292 21.7071C2.56075 21.975 2.95692 22.0685 3.31625 21.9487L8.63453 20.176C10.3336 20.9427 11.8187 21.0711 12.548 21.0007C13.6365 21.0092 15.2775 20.7627 16.8714 20.0059C18.5037 19.2308 20.1343 17.8947 21.0129 15.7105C21.6655 14.4029 22.0036 12.9607 22 11.4989V11C22 10.9817 21.9995 10.9633 21.9985 10.9449C21.7323 6.12019 17.8799 2.26772 13.0551 2.00155C13.0368 2.00053 13.0184 2.00003 13 2.00003H12.5013Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<MessageCircleIcon /> should render MessageCircleIcon 1`] = `
           name="clip0_59_164"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.web.test.tsx.snap
index 243a85125a3..1e6d036c6cd 100644
--- a/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<MessageCircleIcon /> should render MessageCircleIcon 1`] = `
         clip-rule="evenodd"
         d="M12.4974 4.00003C11.3351 3.99699 10.1884 4.26857 9.15088 4.79263L9.14709 4.79454L9.14709 4.79453C6.6065 6.06427 5.00113 8.6602 5.00003 11.5004L5.00002 11.5026C4.99699 12.665 5.26857 13.8116 5.79263 14.8492C5.91284 15.0872 5.93303 15.3633 5.84871 15.6163L4.58117 19.4189L8.3838 18.1513C8.63541 18.0675 8.91002 18.087 9.14724 18.2056C10.7487 19.0064 12.0577 19.0475 12.376 19.0078C12.4229 19.0019 12.4703 18.9994 12.5176 19.0002C13.3301 19.0144 14.6949 18.8253 16.0136 18.1992C17.3158 17.5809 18.5247 16.5627 19.1702 14.932C19.1814 14.9038 19.1938 14.8762 19.2074 14.8492C19.7315 13.8116 20.0031 12.665 20 11.5026L20 11.5V11.0284C19.7778 7.24294 16.7571 4.22222 12.9716 4.00003H12.5L12.4974 4.00003ZM12.5013 2.00003C11.0251 1.99639 9.56887 2.34122 8.25107 3.00647C5.03442 4.615 3.00182 7.90209 3.00003 11.4986C2.99671 12.8332 3.27825 14.1516 3.82392 15.3661L2.05134 20.6838C1.93157 21.0431 2.02509 21.4393 2.29292 21.7071C2.56075 21.975 2.95692 22.0685 3.31625 21.9487L8.63453 20.176C10.3336 20.9427 11.8187 21.0711 12.548 21.0007C13.6365 21.0092 15.2775 20.7627 16.8714 20.0059C18.5037 19.2308 20.1343 17.8947 21.0129 15.7105C21.6655 14.4029 22.0036 12.9607 22 11.4989V11C22 10.9817 21.9995 10.9633 21.9985 10.9449C21.7323 6.12019 17.8799 2.26772 13.0551 2.00155C13.0368 2.00053 13.0184 2.00003 13 2.00003H12.5013Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<MessageCircleIcon /> should render MessageCircleIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/MessageSquareIcon/MessageSquareIcon.native.test.tsx b/packages/blade/src/components/Icons/MessageSquareIcon/MessageSquareIcon.native.test.tsx
index 75bbe09a74a..b9b58010240 100644
--- a/packages/blade/src/components/Icons/MessageSquareIcon/MessageSquareIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MessageSquareIcon/MessageSquareIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MessageSquareIcon />', () => {
   it('should render MessageSquareIcon', () => {
     const renderTree = renderWithTheme(
-      <MessageSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MessageSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MessageSquareIcon/MessageSquareIcon.web.test.tsx b/packages/blade/src/components/Icons/MessageSquareIcon/MessageSquareIcon.web.test.tsx
index 804f0d13581..3ac66cb2f81 100644
--- a/packages/blade/src/components/Icons/MessageSquareIcon/MessageSquareIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MessageSquareIcon/MessageSquareIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MessageSquareIcon />', () => {
   it('should render MessageSquareIcon', () => {
     const { container } = renderWithTheme(
-      <MessageSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MessageSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.native.test.tsx.snap
index 986e0b4bf98..d05e224b2ab 100644
--- a/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MessageSquareIcon /> should render MessageSquareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5 4C4.44772 4 4 4.44772 4 5V18.5858L6.29289 16.2929C6.48043 16.1054 6.73478 16 7 16H19C19.5523 16 20 15.5523 20 15V5C20 4.44772 19.5523 4 19 4H5ZM2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V15C22 16.6569 20.6569 18 19 18H7.41421L3.70711 21.7071C3.42111 21.9931 2.99099 22.0787 2.61732 21.9239C2.24364 21.7691 2 21.4045 2 21V5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.web.test.tsx.snap
index 8f223c7ad2a..7708d6542fe 100644
--- a/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MessageSquareIcon /> should render MessageSquareIcon 1`] = `
       clip-rule="evenodd"
       d="M5 4C4.44772 4 4 4.44772 4 5V18.5858L6.29289 16.2929C6.48043 16.1054 6.73478 16 7 16H19C19.5523 16 20 15.5523 20 15V5C20 4.44772 19.5523 4 19 4H5ZM2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V15C22 16.6569 20.6569 18 19 18H7.41421L3.70711 21.7071C3.42111 21.9931 2.99099 22.0787 2.61732 21.9239C2.24364 21.7691 2 21.4045 2 21V5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MicIcon/MicIcon.native.test.tsx b/packages/blade/src/components/Icons/MicIcon/MicIcon.native.test.tsx
index 3278dbdee5e..51d850e276f 100644
--- a/packages/blade/src/components/Icons/MicIcon/MicIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MicIcon/MicIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MicIcon />', () => {
   it('should render MicIcon', () => {
     const renderTree = renderWithTheme(
-      <MicIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MicIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MicIcon/MicIcon.web.test.tsx b/packages/blade/src/components/Icons/MicIcon/MicIcon.web.test.tsx
index 576a0ccce35..344fa5dba9e 100644
--- a/packages/blade/src/components/Icons/MicIcon/MicIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MicIcon/MicIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MicIcon />', () => {
   it('should render MicIcon', () => {
     const { container } = renderWithTheme(
-      <MicIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MicIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.native.test.tsx.snap
index 37cfefea129..e8ef03b3c96 100644
--- a/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MicIcon /> should render MicIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 0C9.79086 0 8 1.79086 8 4V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0ZM10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4V12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12V4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<MicIcon /> should render MicIcon 1`] = `
       />
       <RNSVGPath
         d="M6 10C6 9.44771 5.55228 9 5 9C4.44772 9 4 9.44771 4 10V12C4 16.0796 7.05369 19.446 11 19.9381V22H8C7.44772 22 7 22.4477 7 23C7 23.5523 7.44772 24 8 24H16C16.5523 24 17 23.5523 17 23C17 22.4477 16.5523 22 16 22H13V19.9381C16.9463 19.446 20 16.0796 20 12V10C20 9.44771 19.5523 9 19 9C18.4477 9 18 9.44771 18 10V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V10Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.web.test.tsx.snap
index 7123f542736..3d3e8a5143c 100644
--- a/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<MicIcon /> should render MicIcon 1`] = `
       clip-rule="evenodd"
       d="M12 0C9.79086 0 8 1.79086 8 4V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0ZM10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4V12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M6 10C6 9.44771 5.55228 9 5 9C4.44772 9 4 9.44771 4 10V12C4 16.0796 7.05369 19.446 11 19.9381V22H8C7.44772 22 7 22.4477 7 23C7 23.5523 7.44772 24 8 24H16C16.5523 24 17 23.5523 17 23C17 22.4477 16.5523 22 16 22H13V19.9381C16.9463 19.446 20 16.0796 20 12V10C20 9.44771 19.5523 9 19 9C18.4477 9 18 9.44771 18 10V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V10Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/MicOffIcon/MicOffIcon.native.test.tsx b/packages/blade/src/components/Icons/MicOffIcon/MicOffIcon.native.test.tsx
index 2fc80d9790c..4d5d0c61678 100644
--- a/packages/blade/src/components/Icons/MicOffIcon/MicOffIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MicOffIcon/MicOffIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MicOffIcon />', () => {
   it('should render MicOffIcon', () => {
     const renderTree = renderWithTheme(
-      <MicOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MicOffIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MicOffIcon/MicOffIcon.web.test.tsx b/packages/blade/src/components/Icons/MicOffIcon/MicOffIcon.web.test.tsx
index 0e3fc8c979c..aef1374c2ea 100644
--- a/packages/blade/src/components/Icons/MicOffIcon/MicOffIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MicOffIcon/MicOffIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MicOffIcon />', () => {
   it('should render MicOffIcon', () => {
     const { container } = renderWithTheme(
-      <MicOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MicOffIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.native.test.tsx.snap
index f3feb418e80..d3b1185f4b3 100644
--- a/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
       >
         <RNSVGPath
           d="M12.3535 0.0126975C13.8025 0.0334948 14.7788 0.713743 15.3459 1.598C15.876 2.42454 16.0189 3.37324 16 4.01597V9.50006C16 10.0523 15.5523 10.5001 15 10.5001C14.4477 10.5001 14 10.0523 14 9.50006V4.00006C14 3.98851 14.0002 3.97697 14.0006 3.96543C14.0127 3.61648 13.9246 3.0866 13.6624 2.6777C13.4382 2.32811 13.0632 2.01557 12.2972 2.01223C12.2651 2.01209 12.233 2.01041 12.2011 2.00718C11.1788 1.90392 10.2445 2.59211 10.0401 3.59907C9.93016 4.1403 9.4023 4.48997 8.86106 4.38007C8.31982 4.27017 7.97016 3.74231 8.08006 3.20107C8.48576 1.20311 10.3279 -0.167383 12.3535 0.0126975Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -64,7 +64,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M0.292893 1.70717L8 9.41428V12.001C8.00142 13.6177 8.97597 15.0746 10.4697 15.6931C11.6471 16.1807 12.9646 16.0717 14.03 15.4443L15.5061 16.9204C14.5584 17.6032 13.4401 17.9875 12.2945 18.0441C12.2014 18.0155 12.1025 18.0001 12 18.0001C11.8973 18.0001 11.7983 18.0155 11.705 18.0443C11.032 18.0113 10.358 17.8645 9.71177 17.5979C7.45063 16.6652 5.98205 14.4533 5.99994 12.0074V10.0001C5.99994 9.44778 5.55223 9.00006 4.99994 9.00006C4.44766 9.00006 3.99994 9.44778 3.99994 10.0001V11.9965C3.97763 15.2562 5.93542 18.2036 8.94911 19.4468C9.61646 19.7221 10.306 19.9016 11 19.989V22.0001H8C7.44772 22.0001 7 22.4478 7 23.0001C7 23.5523 7.44772 24.0001 8 24.0001H16C16.5523 24.0001 17 23.5523 17 23.0001C17 22.4478 16.5523 22.0001 16 22.0001H13V19.9885C14.4179 19.8097 15.7816 19.2523 16.9342 18.3485L22.2929 23.7072C22.6834 24.0977 23.3166 24.0977 23.7071 23.7072C24.0976 23.3166 24.0976 22.6835 23.7071 22.293L17.869 16.4549C17.8241 16.3762 17.7677 16.3023 17.6998 16.2357C17.637 16.1742 17.5681 16.1226 17.4951 16.081L1.70711 0.292954C1.31658 -0.0975701 0.683417 -0.0975701 0.292893 0.292954C-0.0976311 0.683479 -0.0976311 1.31664 0.292893 1.70717ZM10 11.9996V11.4143L12.5156 13.9298C12.0997 14.0408 11.6499 14.0171 11.2349 13.8453C10.4881 13.5361 10.0009 12.8078 10 11.9996Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -75,7 +75,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
         />
         <RNSVGPath
           d="M20 10.0001C20 9.44778 19.5523 9.00006 19 9.00006C18.4477 9.00006 18 9.44778 18 10.0001V12.0001C18 12.215 17.9214 12.9213 17.6056 13.5528C17.3586 14.0468 17.5588 14.6475 18.0528 14.8945C18.5468 15.1415 19.1474 14.9413 19.3944 14.4473C19.8786 13.4789 20 12.4518 20 12.0001V10.0001Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -88,7 +88,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
           name="clip0_59_171"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.web.test.tsx.snap
index 721f3cb0ed2..0b52800c521 100644
--- a/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.web.test.tsx.snap
@@ -18,19 +18,19 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
       <path
         d="M12.3535 0.0126975C13.8025 0.0334948 14.7788 0.713743 15.3459 1.598C15.876 2.42454 16.0189 3.37324 16 4.01597V9.50006C16 10.0523 15.5523 10.5001 15 10.5001C14.4477 10.5001 14 10.0523 14 9.50006V4.00006C14 3.98851 14.0002 3.97697 14.0006 3.96543C14.0127 3.61648 13.9246 3.0866 13.6624 2.6777C13.4382 2.32811 13.0632 2.01557 12.2972 2.01223C12.2651 2.01209 12.233 2.01041 12.2011 2.00718C11.1788 1.90392 10.2445 2.59211 10.0401 3.59907C9.93016 4.1403 9.4023 4.48997 8.86106 4.38007C8.31982 4.27017 7.97016 3.74231 8.08006 3.20107C8.48576 1.20311 10.3279 -0.167383 12.3535 0.0126975Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         clip-rule="evenodd"
         d="M0.292893 1.70717L8 9.41428V12.001C8.00142 13.6177 8.97597 15.0746 10.4697 15.6931C11.6471 16.1807 12.9646 16.0717 14.03 15.4443L15.5061 16.9204C14.5584 17.6032 13.4401 17.9875 12.2945 18.0441C12.2014 18.0155 12.1025 18.0001 12 18.0001C11.8973 18.0001 11.7983 18.0155 11.705 18.0443C11.032 18.0113 10.358 17.8645 9.71177 17.5979C7.45063 16.6652 5.98205 14.4533 5.99994 12.0074V10.0001C5.99994 9.44778 5.55223 9.00006 4.99994 9.00006C4.44766 9.00006 3.99994 9.44778 3.99994 10.0001V11.9965C3.97763 15.2562 5.93542 18.2036 8.94911 19.4468C9.61646 19.7221 10.306 19.9016 11 19.989V22.0001H8C7.44772 22.0001 7 22.4478 7 23.0001C7 23.5523 7.44772 24.0001 8 24.0001H16C16.5523 24.0001 17 23.5523 17 23.0001C17 22.4478 16.5523 22.0001 16 22.0001H13V19.9885C14.4179 19.8097 15.7816 19.2523 16.9342 18.3485L22.2929 23.7072C22.6834 24.0977 23.3166 24.0977 23.7071 23.7072C24.0976 23.3166 24.0976 22.6835 23.7071 22.293L17.869 16.4549C17.8241 16.3762 17.7677 16.3023 17.6998 16.2357C17.637 16.1742 17.5681 16.1226 17.4951 16.081L1.70711 0.292954C1.31658 -0.0975701 0.683417 -0.0975701 0.292893 0.292954C-0.0976311 0.683479 -0.0976311 1.31664 0.292893 1.70717ZM10 11.9996V11.4143L12.5156 13.9298C12.0997 14.0408 11.6499 14.0171 11.2349 13.8453C10.4881 13.5361 10.0009 12.8078 10 11.9996Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         d="M20 10.0001C20 9.44778 19.5523 9.00006 19 9.00006C18.4477 9.00006 18 9.44778 18 10.0001V12.0001C18 12.215 17.9214 12.9213 17.6056 13.5528C17.3586 14.0468 17.5588 14.6475 18.0528 14.8945C18.5468 15.1415 19.1474 14.9413 19.3944 14.4473C19.8786 13.4789 20 12.4518 20 12.0001V10.0001Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -42,7 +42,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/MinimizeIcon/MinimizeIcon.native.test.tsx b/packages/blade/src/components/Icons/MinimizeIcon/MinimizeIcon.native.test.tsx
index 27056da2911..f7224935445 100644
--- a/packages/blade/src/components/Icons/MinimizeIcon/MinimizeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MinimizeIcon/MinimizeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MinimizeIcon />', () => {
   it('should render MinimizeIcon', () => {
     const renderTree = renderWithTheme(
-      <MinimizeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MinimizeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MinimizeIcon/MinimizeIcon.web.test.tsx b/packages/blade/src/components/Icons/MinimizeIcon/MinimizeIcon.web.test.tsx
index ef9e0666d8a..b702f3f8505 100644
--- a/packages/blade/src/components/Icons/MinimizeIcon/MinimizeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MinimizeIcon/MinimizeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MinimizeIcon />', () => {
   it('should render MinimizeIcon', () => {
     const { container } = renderWithTheme(
-      <MinimizeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MinimizeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.native.test.tsx.snap
index d8157cb296b..b5152868191 100644
--- a/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<MinimizeIcon /> should render MinimizeIcon 1`] = `
     >
       <RNSVGPath
         d="M21.7071 3.70711L16.4142 9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H14.0007L13.997 11C13.743 10.9992 13.4892 10.9023 13.295 10.7092L13.2908 10.705C13.196 10.6096 13.1243 10.4999 13.0759 10.3828C13.0273 10.2657 13.0004 10.1375 13 10.003L13 10V4C13 3.44772 13.4477 3 14 3C14.5523 3 15 3.44772 15 4V7.58579L20.2929 2.29289C20.6834 1.90237 21.3166 1.90237 21.7071 2.29289C22.0976 2.68342 22.0976 3.31658 21.7071 3.70711Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<MinimizeIcon /> should render MinimizeIcon 1`] = `
       />
       <RNSVGPath
         d="M4 13C3.44772 13 3 13.4477 3 14C3 14.5523 3.44772 15 4 15H7.58579L2.29289 20.2929C1.90237 20.6834 1.90237 21.3166 2.29289 21.7071C2.68342 22.0976 3.31658 22.0976 3.70711 21.7071L9 16.4142V20C9 20.5523 9.44772 21 10 21C10.5523 21 11 20.5523 11 20V14.0007C11 13.9997 11 13.998 11 13.997C10.9992 13.7231 10.8883 13.4752 10.7092 13.295C10.7078 13.2936 10.7064 13.2922 10.705 13.2908C10.6096 13.196 10.4999 13.1243 10.3828 13.0759C10.2657 13.0273 10.1375 13.0004 10.003 13C10.002 13 10.001 13 10 13H4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.web.test.tsx.snap
index c0161524457..7d1d02a4d52 100644
--- a/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<MinimizeIcon /> should render MinimizeIcon 1`] = `
     <path
       d="M21.7071 3.70711L16.4142 9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H14.0007L13.997 11C13.743 10.9992 13.4892 10.9023 13.295 10.7092L13.2908 10.705C13.196 10.6096 13.1243 10.4999 13.0759 10.3828C13.0273 10.2657 13.0004 10.1375 13 10.003L13 10V4C13 3.44772 13.4477 3 14 3C14.5523 3 15 3.44772 15 4V7.58579L20.2929 2.29289C20.6834 1.90237 21.3166 1.90237 21.7071 2.29289C22.0976 2.68342 22.0976 3.31658 21.7071 3.70711Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M4 13C3.44772 13 3 13.4477 3 14C3 14.5523 3.44772 15 4 15H7.58579L2.29289 20.2929C1.90237 20.6834 1.90237 21.3166 2.29289 21.7071C2.68342 22.0976 3.31658 22.0976 3.70711 21.7071L9 16.4142V20C9 20.5523 9.44772 21 10 21C10.5523 21 11 20.5523 11 20V14.0007C11 13.9997 11 13.998 11 13.997C10.9992 13.7231 10.8883 13.4752 10.7092 13.295C10.7078 13.2936 10.7064 13.2922 10.705 13.2908C10.6096 13.196 10.4999 13.1243 10.3828 13.0759C10.2657 13.0273 10.1375 13.0004 10.003 13C10.002 13 10.001 13 10 13H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/MinusCircleIcon/MinusCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/MinusCircleIcon/MinusCircleIcon.native.test.tsx
index 214e788ad5d..04e9d5d50a4 100644
--- a/packages/blade/src/components/Icons/MinusCircleIcon/MinusCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MinusCircleIcon/MinusCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MinusCircleIcon />', () => {
   it('should render MinusCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <MinusCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MinusCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MinusCircleIcon/MinusCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/MinusCircleIcon/MinusCircleIcon.web.test.tsx
index 635e9218525..fbc7d0403ab 100644
--- a/packages/blade/src/components/Icons/MinusCircleIcon/MinusCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MinusCircleIcon/MinusCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MinusCircleIcon />', () => {
   it('should render MinusCircleIcon', () => {
     const { container } = renderWithTheme(
-      <MinusCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MinusCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.native.test.tsx.snap
index fb20b55b5f5..72287ff712e 100644
--- a/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<MinusCircleIcon /> should render MinusCircleIcon 1`] = `
     >
       <RNSVGPath
         d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<MinusCircleIcon /> should render MinusCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.web.test.tsx.snap
index d6496a7e2dc..59860763946 100644
--- a/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<MinusCircleIcon /> should render MinusCircleIcon 1`] = `
     <path
       d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MinusIcon/MinusIcon.native.test.tsx b/packages/blade/src/components/Icons/MinusIcon/MinusIcon.native.test.tsx
index 04c8f1853b6..63bdfbb48e1 100644
--- a/packages/blade/src/components/Icons/MinusIcon/MinusIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MinusIcon/MinusIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MinusIcon />', () => {
   it('should render MinusIcon', () => {
     const renderTree = renderWithTheme(
-      <MinusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MinusIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MinusIcon/MinusIcon.web.test.tsx b/packages/blade/src/components/Icons/MinusIcon/MinusIcon.web.test.tsx
index 76ad6046309..2a69a1b55c8 100644
--- a/packages/blade/src/components/Icons/MinusIcon/MinusIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MinusIcon/MinusIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MinusIcon />', () => {
   it('should render MinusIcon', () => {
     const { container } = renderWithTheme(
-      <MinusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MinusIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.native.test.tsx.snap
index a2a4a771ecb..22ba7ac3924 100644
--- a/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MinusIcon /> should render MinusIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.web.test.tsx.snap
index 46226bb447e..37d0b13248b 100644
--- a/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MinusIcon /> should render MinusIcon 1`] = `
       clip-rule="evenodd"
       d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MinusSquareIcon/MinusSquareIcon.native.test.tsx b/packages/blade/src/components/Icons/MinusSquareIcon/MinusSquareIcon.native.test.tsx
index 7d2a6a89f01..74ed873932a 100644
--- a/packages/blade/src/components/Icons/MinusSquareIcon/MinusSquareIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MinusSquareIcon/MinusSquareIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MinusSquareIcon />', () => {
   it('should render MinusSquareIcon', () => {
     const renderTree = renderWithTheme(
-      <MinusSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MinusSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MinusSquareIcon/MinusSquareIcon.web.test.tsx b/packages/blade/src/components/Icons/MinusSquareIcon/MinusSquareIcon.web.test.tsx
index 26a37956462..c18820a5b5b 100644
--- a/packages/blade/src/components/Icons/MinusSquareIcon/MinusSquareIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MinusSquareIcon/MinusSquareIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MinusSquareIcon />', () => {
   it('should render MinusSquareIcon', () => {
     const { container } = renderWithTheme(
-      <MinusSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MinusSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.native.test.tsx.snap
index 7ad54619678..d4e76332f24 100644
--- a/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<MinusSquareIcon /> should render MinusSquareIcon 1`] = `
     >
       <RNSVGPath
         d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<MinusSquareIcon /> should render MinusSquareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM4 5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.web.test.tsx.snap
index e2813ba0385..b06c2949267 100644
--- a/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<MinusSquareIcon /> should render MinusSquareIcon 1`] = `
     <path
       d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM4 5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MonitorIcon/MonitorIcon.native.test.tsx b/packages/blade/src/components/Icons/MonitorIcon/MonitorIcon.native.test.tsx
index f20f0257b5c..7e8a78246d0 100644
--- a/packages/blade/src/components/Icons/MonitorIcon/MonitorIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MonitorIcon/MonitorIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MonitorIcon />', () => {
   it('should render MonitorIcon', () => {
     const renderTree = renderWithTheme(
-      <MonitorIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MonitorIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MonitorIcon/MonitorIcon.web.test.tsx b/packages/blade/src/components/Icons/MonitorIcon/MonitorIcon.web.test.tsx
index 17f7dd25319..3767bf5b34e 100644
--- a/packages/blade/src/components/Icons/MonitorIcon/MonitorIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MonitorIcon/MonitorIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MonitorIcon />', () => {
   it('should render MonitorIcon', () => {
     const { container } = renderWithTheme(
-      <MonitorIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MonitorIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.native.test.tsx.snap
index 925196df74f..fbd9c14795b 100644
--- a/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MonitorIcon /> should render MonitorIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 5C1 3.34315 2.34315 2 4 2H20C21.6569 2 23 3.34315 23 5V15C23 16.6569 21.6569 18 20 18H13V20H16C16.5523 20 17 20.4477 17 21C17 21.5523 16.5523 22 16 22H8C7.44772 22 7 21.5523 7 21C7 20.4477 7.44772 20 8 20H11V18H4C2.34315 18 1 16.6569 1 15V5ZM20 16C20.5523 16 21 15.5523 21 15V5C21 4.44772 20.5523 4 20 4H4C3.44772 4 3 4.44772 3 5V15C3 15.5523 3.44772 16 4 16H20Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.web.test.tsx.snap
index e23be3855e7..a6d03615b8b 100644
--- a/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MonitorIcon /> should render MonitorIcon 1`] = `
       clip-rule="evenodd"
       d="M1 5C1 3.34315 2.34315 2 4 2H20C21.6569 2 23 3.34315 23 5V15C23 16.6569 21.6569 18 20 18H13V20H16C16.5523 20 17 20.4477 17 21C17 21.5523 16.5523 22 16 22H8C7.44772 22 7 21.5523 7 21C7 20.4477 7.44772 20 8 20H11V18H4C2.34315 18 1 16.6569 1 15V5ZM20 16C20.5523 16 21 15.5523 21 15V5C21 4.44772 20.5523 4 20 4H4C3.44772 4 3 4.44772 3 5V15C3 15.5523 3.44772 16 4 16H20Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MoonIcon/MoonIcon.native.test.tsx b/packages/blade/src/components/Icons/MoonIcon/MoonIcon.native.test.tsx
index bd78997d86d..c4e48a569f0 100644
--- a/packages/blade/src/components/Icons/MoonIcon/MoonIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MoonIcon/MoonIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MoonIcon />', () => {
   it('should render MoonIcon', () => {
     const renderTree = renderWithTheme(
-      <MoonIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MoonIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MoonIcon/MoonIcon.web.test.tsx b/packages/blade/src/components/Icons/MoonIcon/MoonIcon.web.test.tsx
index caa90a61d0d..4f63f285fb4 100644
--- a/packages/blade/src/components/Icons/MoonIcon/MoonIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MoonIcon/MoonIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MoonIcon />', () => {
   it('should render MoonIcon', () => {
     const { container } = renderWithTheme(
-      <MoonIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MoonIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.native.test.tsx.snap
index 0991f033705..bf0e599e1a3 100644
--- a/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MoonIcon /> should render MoonIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12.0812 2.50904C12.2747 2.85242 12.2484 3.27745 12.0141 3.59442C10.2487 5.98281 10.4964 9.30338 12.5965 11.4035C14.6966 13.5036 18.0172 13.7513 20.4056 11.9859C20.7225 11.7516 21.1476 11.7253 21.491 11.9188C21.8343 12.1124 22.032 12.4895 21.9957 12.882C21.5095 18.144 17.013 22.1194 11.731 21.9571C6.4491 21.7948 2.20518 17.5509 2.04288 12.269C1.88059 6.98701 5.85595 2.49054 11.118 2.00426C11.5104 1.96799 11.8876 2.16566 12.0812 2.50904ZM9.31561 4.43767C6.13442 5.587 3.93349 8.67806 4.04194 12.2075C4.17178 16.4331 7.56692 19.8282 11.7925 19.9581C15.3219 20.0665 18.413 17.8656 19.5623 14.6844C16.7077 15.7179 13.4237 15.0591 11.1823 12.8177C8.94088 10.5763 8.28206 7.2923 9.31561 4.43767Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.web.test.tsx.snap
index fc30c2bac40..c01cf029a4b 100644
--- a/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MoonIcon /> should render MoonIcon 1`] = `
       clip-rule="evenodd"
       d="M12.0812 2.50904C12.2747 2.85242 12.2484 3.27745 12.0141 3.59442C10.2487 5.98281 10.4964 9.30338 12.5965 11.4035C14.6966 13.5036 18.0172 13.7513 20.4056 11.9859C20.7225 11.7516 21.1476 11.7253 21.491 11.9188C21.8343 12.1124 22.032 12.4895 21.9957 12.882C21.5095 18.144 17.013 22.1194 11.731 21.9571C6.4491 21.7948 2.20518 17.5509 2.04288 12.269C1.88059 6.98701 5.85595 2.49054 11.118 2.00426C11.5104 1.96799 11.8876 2.16566 12.0812 2.50904ZM9.31561 4.43767C6.13442 5.587 3.93349 8.67806 4.04194 12.2075C4.17178 16.4331 7.56692 19.8282 11.7925 19.9581C15.3219 20.0665 18.413 17.8656 19.5623 14.6844C16.7077 15.7179 13.4237 15.0591 11.1823 12.8177C8.94088 10.5763 8.28206 7.2923 9.31561 4.43767Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MoreHorizontalIcon/MoreHorizontalIcon.native.test.tsx b/packages/blade/src/components/Icons/MoreHorizontalIcon/MoreHorizontalIcon.native.test.tsx
index 832eead7134..e3f27505537 100644
--- a/packages/blade/src/components/Icons/MoreHorizontalIcon/MoreHorizontalIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MoreHorizontalIcon/MoreHorizontalIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MoreHorizontalIcon />', () => {
   it('should render MoreHorizontalIcon', () => {
     const renderTree = renderWithTheme(
-      <MoreHorizontalIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MoreHorizontalIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MoreHorizontalIcon/MoreHorizontalIcon.web.test.tsx b/packages/blade/src/components/Icons/MoreHorizontalIcon/MoreHorizontalIcon.web.test.tsx
index 97ddad4256d..ee3161bd603 100644
--- a/packages/blade/src/components/Icons/MoreHorizontalIcon/MoreHorizontalIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MoreHorizontalIcon/MoreHorizontalIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MoreHorizontalIcon />', () => {
   it('should render MoreHorizontalIcon', () => {
     const { container } = renderWithTheme(
-      <MoreHorizontalIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MoreHorizontalIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.native.test.tsx.snap
index e90cbc1ccd7..fb0494fb006 100644
--- a/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M17 12C17 10.3431 18.3431 9 20 9C21.6569 9 23 10.3431 23 12C23 13.6569 21.6569 15 20 15C18.3431 15 17 13.6569 17 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.web.test.tsx.snap
index 1f32bdcbe96..1656b408eeb 100644
--- a/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.web.test.tsx.snap
@@ -15,21 +15,21 @@ exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
       clip-rule="evenodd"
       d="M9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M17 12C17 10.3431 18.3431 9 20 9C21.6569 9 23 10.3431 23 12C23 13.6569 21.6569 15 20 15C18.3431 15 17 13.6569 17 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MoreVerticalIcon/MoreVerticalIcon.native.test.tsx b/packages/blade/src/components/Icons/MoreVerticalIcon/MoreVerticalIcon.native.test.tsx
index 595473bde28..106692d3283 100644
--- a/packages/blade/src/components/Icons/MoreVerticalIcon/MoreVerticalIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MoreVerticalIcon/MoreVerticalIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MoreVerticalIcon />', () => {
   it('should render MoreVerticalIcon', () => {
     const renderTree = renderWithTheme(
-      <MoreVerticalIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MoreVerticalIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MoreVerticalIcon/MoreVerticalIcon.web.test.tsx b/packages/blade/src/components/Icons/MoreVerticalIcon/MoreVerticalIcon.web.test.tsx
index b6f2b8ec9e3..b624218a73c 100644
--- a/packages/blade/src/components/Icons/MoreVerticalIcon/MoreVerticalIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MoreVerticalIcon/MoreVerticalIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MoreVerticalIcon />', () => {
   it('should render MoreVerticalIcon', () => {
     const { container } = renderWithTheme(
-      <MoreVerticalIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MoreVerticalIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.native.test.tsx.snap
index ea76edac4a5..969638765df 100644
--- a/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 4C9 2.34315 10.3431 1 12 1C13.6569 1 15 2.34315 15 4C15 5.65685 13.6569 7 12 7C10.3431 7 9 5.65685 9 4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 20C9 18.3431 10.3431 17 12 17C13.6569 17 15 18.3431 15 20C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.web.test.tsx.snap
index 75d079e6301..739db9c32dc 100644
--- a/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.web.test.tsx.snap
@@ -15,21 +15,21 @@ exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
       clip-rule="evenodd"
       d="M9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M9 4C9 2.34315 10.3431 1 12 1C13.6569 1 15 2.34315 15 4C15 5.65685 13.6569 7 12 7C10.3431 7 9 5.65685 9 4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M9 20C9 18.3431 10.3431 17 12 17C13.6569 17 15 18.3431 15 20C15 21.6569 13.6569 23 12 23C10.3431 23 9 21.6569 9 20Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MoveIcon/MoveIcon.native.test.tsx b/packages/blade/src/components/Icons/MoveIcon/MoveIcon.native.test.tsx
index d40afcfd9aa..892b1b5aabc 100644
--- a/packages/blade/src/components/Icons/MoveIcon/MoveIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MoveIcon/MoveIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MoveIcon />', () => {
   it('should render MoveIcon', () => {
     const renderTree = renderWithTheme(
-      <MoveIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MoveIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MoveIcon/MoveIcon.web.test.tsx b/packages/blade/src/components/Icons/MoveIcon/MoveIcon.web.test.tsx
index ed9749b8d79..dee8a03f9c3 100644
--- a/packages/blade/src/components/Icons/MoveIcon/MoveIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MoveIcon/MoveIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MoveIcon />', () => {
   it('should render MoveIcon', () => {
     const { container } = renderWithTheme(
-      <MoveIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MoveIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.native.test.tsx.snap
index 2340b781c3a..ae67d207aa7 100644
--- a/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MoveIcon /> should render MoveIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12.7071 1.29289C12.3166 0.902369 11.6834 0.902369 11.2929 1.29289L8.29289 4.29289C7.90237 4.68342 7.90237 5.31658 8.29289 5.70711C8.68342 6.09763 9.31658 6.09763 9.70711 5.70711L11 4.41421V11H4.41421L5.70711 9.70711C6.09763 9.31658 6.09763 8.68342 5.70711 8.29289C5.31658 7.90237 4.68342 7.90237 4.29289 8.29289L1.29289 11.2929C0.902369 11.6834 0.902369 12.3166 1.29289 12.7071L4.29289 15.7071C4.68342 16.0976 5.31658 16.0976 5.70711 15.7071C6.09763 15.3166 6.09763 14.6834 5.70711 14.2929L4.41421 13H11V19.5858L9.70711 18.2929C9.31658 17.9024 8.68342 17.9024 8.29289 18.2929C7.90237 18.6834 7.90237 19.3166 8.29289 19.7071L11.2929 22.7071C11.6834 23.0976 12.3166 23.0976 12.7071 22.7071L15.7071 19.7071C16.0976 19.3166 16.0976 18.6834 15.7071 18.2929C15.3166 17.9024 14.6834 17.9024 14.2929 18.2929L13 19.5858V13H19.5858L18.2929 14.2929C17.9024 14.6834 17.9024 15.3166 18.2929 15.7071C18.6834 16.0976 19.3166 16.0976 19.7071 15.7071L22.7071 12.7071C23.0976 12.3166 23.0976 11.6834 22.7071 11.2929L19.7071 8.29289C19.3166 7.90237 18.6834 7.90237 18.2929 8.29289C17.9024 8.68342 17.9024 9.31658 18.2929 9.70711L19.5858 11H13V4.41421L14.2929 5.70711C14.6834 6.09763 15.3166 6.09763 15.7071 5.70711C16.0976 5.31658 16.0976 4.68342 15.7071 4.29289L12.7071 1.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.web.test.tsx.snap
index 99c4846d79e..6dab4d0be7f 100644
--- a/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MoveIcon /> should render MoveIcon 1`] = `
       clip-rule="evenodd"
       d="M12.7071 1.29289C12.3166 0.902369 11.6834 0.902369 11.2929 1.29289L8.29289 4.29289C7.90237 4.68342 7.90237 5.31658 8.29289 5.70711C8.68342 6.09763 9.31658 6.09763 9.70711 5.70711L11 4.41421V11H4.41421L5.70711 9.70711C6.09763 9.31658 6.09763 8.68342 5.70711 8.29289C5.31658 7.90237 4.68342 7.90237 4.29289 8.29289L1.29289 11.2929C0.902369 11.6834 0.902369 12.3166 1.29289 12.7071L4.29289 15.7071C4.68342 16.0976 5.31658 16.0976 5.70711 15.7071C6.09763 15.3166 6.09763 14.6834 5.70711 14.2929L4.41421 13H11V19.5858L9.70711 18.2929C9.31658 17.9024 8.68342 17.9024 8.29289 18.2929C7.90237 18.6834 7.90237 19.3166 8.29289 19.7071L11.2929 22.7071C11.6834 23.0976 12.3166 23.0976 12.7071 22.7071L15.7071 19.7071C16.0976 19.3166 16.0976 18.6834 15.7071 18.2929C15.3166 17.9024 14.6834 17.9024 14.2929 18.2929L13 19.5858V13H19.5858L18.2929 14.2929C17.9024 14.6834 17.9024 15.3166 18.2929 15.7071C18.6834 16.0976 19.3166 16.0976 19.7071 15.7071L22.7071 12.7071C23.0976 12.3166 23.0976 11.6834 22.7071 11.2929L19.7071 8.29289C19.3166 7.90237 18.6834 7.90237 18.2929 8.29289C17.9024 8.68342 17.9024 9.31658 18.2929 9.70711L19.5858 11H13V4.41421L14.2929 5.70711C14.6834 6.09763 15.3166 6.09763 15.7071 5.70711C16.0976 5.31658 16.0976 4.68342 15.7071 4.29289L12.7071 1.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MusicIcon/MusicIcon.native.test.tsx b/packages/blade/src/components/Icons/MusicIcon/MusicIcon.native.test.tsx
index e602a197732..f6aedaaa41f 100644
--- a/packages/blade/src/components/Icons/MusicIcon/MusicIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MusicIcon/MusicIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MusicIcon />', () => {
   it('should render MusicIcon', () => {
     const renderTree = renderWithTheme(
-      <MusicIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MusicIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MusicIcon/MusicIcon.web.test.tsx b/packages/blade/src/components/Icons/MusicIcon/MusicIcon.web.test.tsx
index e9be105b2b3..f893a8b4940 100644
--- a/packages/blade/src/components/Icons/MusicIcon/MusicIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MusicIcon/MusicIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MusicIcon />', () => {
   it('should render MusicIcon', () => {
     const { container } = renderWithTheme(
-      <MusicIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MusicIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.native.test.tsx.snap
index 028280ddfd4..021cc9d213d 100644
--- a/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<MusicIcon /> should render MusicIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M21.6464 2.23699C21.8707 2.42699 22 2.70606 22 3.00001V16C22 18.2091 20.2091 20 18 20C15.7909 20 14 18.2091 14 16C14 13.7909 15.7909 12 18 12C18.7286 12 19.4117 12.1948 20 12.5351V4.18047L10 5.84713V18L9.99999 18.0032C9.99824 20.2109 8.20806 22 6 22C3.79086 22 2 20.2091 2 18C2 15.7909 3.79086 14 6 14C6.72857 14 7.41165 14.1948 8 14.5351V5.00001C8 4.51117 8.35341 4.09398 8.8356 4.01361L20.8356 2.01361C21.1256 1.96529 21.4221 2.04698 21.6464 2.23699ZM6 16C7.10457 16 8 16.8954 8 18C8 19.1046 7.10457 20 6 20C4.89543 20 4 19.1046 4 18C4 16.8954 4.89543 16 6 16ZM16 16C16 14.8954 16.8954 14 18 14C19.1046 14 20 14.8954 20 16C20 17.1046 19.1046 18 18 18C16.8954 18 16 17.1046 16 16Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.web.test.tsx.snap
index ea540a73e29..2fe2f051f23 100644
--- a/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<MusicIcon /> should render MusicIcon 1`] = `
       clip-rule="evenodd"
       d="M21.6464 2.23699C21.8707 2.42699 22 2.70606 22 3.00001V16C22 18.2091 20.2091 20 18 20C15.7909 20 14 18.2091 14 16C14 13.7909 15.7909 12 18 12C18.7286 12 19.4117 12.1948 20 12.5351V4.18047L10 5.84713V18L9.99999 18.0032C9.99824 20.2109 8.20806 22 6 22C3.79086 22 2 20.2091 2 18C2 15.7909 3.79086 14 6 14C6.72857 14 7.41165 14.1948 8 14.5351V5.00001C8 4.51117 8.35341 4.09398 8.8356 4.01361L20.8356 2.01361C21.1256 1.96529 21.4221 2.04698 21.6464 2.23699ZM6 16C7.10457 16 8 16.8954 8 18C8 19.1046 7.10457 20 6 20C4.89543 20 4 19.1046 4 18C4 16.8954 4.89543 16 6 16ZM16 16C16 14.8954 16.8954 14 18 14C19.1046 14 20 14.8954 20 16C20 17.1046 19.1046 18 18 18C16.8954 18 16 17.1046 16 16Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/MyAccountIcon/MyAccountIcon.native.test.tsx b/packages/blade/src/components/Icons/MyAccountIcon/MyAccountIcon.native.test.tsx
index ab539d976dd..530edb460bc 100644
--- a/packages/blade/src/components/Icons/MyAccountIcon/MyAccountIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/MyAccountIcon/MyAccountIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<MyAccountIcon />', () => {
   it('should render MyAccountIcon', () => {
     const renderTree = renderWithTheme(
-      <MyAccountIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MyAccountIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MyAccountIcon/MyAccountIcon.web.test.tsx b/packages/blade/src/components/Icons/MyAccountIcon/MyAccountIcon.web.test.tsx
index 23fadd81708..3065d968f25 100644
--- a/packages/blade/src/components/Icons/MyAccountIcon/MyAccountIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/MyAccountIcon/MyAccountIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<MyAccountIcon />', () => {
   it('should render MyAccountIcon', () => {
     const { container } = renderWithTheme(
-      <MyAccountIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <MyAccountIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.native.test.tsx.snap
index 08a59e69e24..dde6d41a0b9 100644
--- a/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<MyAccountIcon /> should render MyAccountIcon 1`] = `
     >
       <RNSVGPath
         d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.web.test.tsx.snap
index 054071dda73..a1ad555cee1 100644
--- a/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<MyAccountIcon /> should render MyAccountIcon 1`] = `
     <path
       d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/NavigationIcon/NavigationIcon.native.test.tsx b/packages/blade/src/components/Icons/NavigationIcon/NavigationIcon.native.test.tsx
index 5c0657571b9..dfd0956a12b 100644
--- a/packages/blade/src/components/Icons/NavigationIcon/NavigationIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/NavigationIcon/NavigationIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<NavigationIcon />', () => {
   it('should render NavigationIcon', () => {
     const renderTree = renderWithTheme(
-      <NavigationIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <NavigationIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/NavigationIcon/NavigationIcon.web.test.tsx b/packages/blade/src/components/Icons/NavigationIcon/NavigationIcon.web.test.tsx
index e5d8e70d1f5..04ff75f9dc5 100644
--- a/packages/blade/src/components/Icons/NavigationIcon/NavigationIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/NavigationIcon/NavigationIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<NavigationIcon />', () => {
   it('should render NavigationIcon', () => {
     const { container } = renderWithTheme(
-      <NavigationIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <NavigationIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.native.test.tsx.snap
index 3d5bf3316d7..74f06548e3a 100644
--- a/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<NavigationIcon /> should render NavigationIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M21.7071 2.29292C22.006 2.59175 22.0847 3.04618 21.9038 3.42811L12.9038 22.4281C12.7229 22.8098 12.3218 23.0368 11.9015 22.9952C11.4812 22.9535 11.1323 22.6523 11.0299 22.2426L9.1754 14.8246L1.75749 12.9702C1.34773 12.8677 1.04651 12.5189 1.00489 12.0986C0.963272 11.6782 1.19022 11.2771 1.57194 11.0963L20.5719 2.09629C20.9539 1.91538 21.4083 1.99409 21.7071 2.29292ZM4.95337 11.7076L10.2426 13.0299C10.6008 13.1195 10.8806 13.3992 10.9702 13.7575L12.2925 19.0467L18.8976 5.10241L4.95337 11.7076Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.web.test.tsx.snap
index ca2587a1710..7ff5503ed21 100644
--- a/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<NavigationIcon /> should render NavigationIcon 1`] = `
       clip-rule="evenodd"
       d="M21.7071 2.29292C22.006 2.59175 22.0847 3.04618 21.9038 3.42811L12.9038 22.4281C12.7229 22.8098 12.3218 23.0368 11.9015 22.9952C11.4812 22.9535 11.1323 22.6523 11.0299 22.2426L9.1754 14.8246L1.75749 12.9702C1.34773 12.8677 1.04651 12.5189 1.00489 12.0986C0.963272 11.6782 1.19022 11.2771 1.57194 11.0963L20.5719 2.09629C20.9539 1.91538 21.4083 1.99409 21.7071 2.29292ZM4.95337 11.7076L10.2426 13.0299C10.6008 13.1195 10.8806 13.3992 10.9702 13.7575L12.2925 19.0467L18.8976 5.10241L4.95337 11.7076Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/OctagonIcon/OctagonIcon.native.test.tsx b/packages/blade/src/components/Icons/OctagonIcon/OctagonIcon.native.test.tsx
index a78ac19e89a..40bab32f4cf 100644
--- a/packages/blade/src/components/Icons/OctagonIcon/OctagonIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/OctagonIcon/OctagonIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<OctagonIcon />', () => {
   it('should render OctagonIcon', () => {
     const renderTree = renderWithTheme(
-      <OctagonIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <OctagonIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/OctagonIcon/OctagonIcon.web.test.tsx b/packages/blade/src/components/Icons/OctagonIcon/OctagonIcon.web.test.tsx
index 0f62f14c208..5996dca39fa 100644
--- a/packages/blade/src/components/Icons/OctagonIcon/OctagonIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/OctagonIcon/OctagonIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<OctagonIcon />', () => {
   it('should render OctagonIcon', () => {
     const { container } = renderWithTheme(
-      <OctagonIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <OctagonIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.native.test.tsx.snap
index b26883d0afe..6f551a29623 100644
--- a/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<OctagonIcon /> should render OctagonIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7.15289 1.29289C7.33386 1.11193 7.58386 1 7.86 1H16.14C16.4052 1 16.6596 1.10536 16.8471 1.29289L22.7071 7.15289C22.8946 7.34043 23 7.59478 23 7.86V16.14C23 16.4052 22.8946 16.6596 22.7071 16.8471L16.8471 22.7071C16.6596 22.8946 16.4052 23 16.14 23H7.86C7.59478 23 7.34043 22.8946 7.15289 22.7071L1.29289 16.8471C1.10536 16.6596 1 16.4052 1 16.14V7.86C1 7.59478 1.10536 7.34043 1.29289 7.15289L7.15253 1.29326C7.15265 1.29314 7.15277 1.29301 7.15289 1.29289ZM8.27421 3L3 8.27421V15.7258L8.27421 21H15.7258L21 15.7258V8.27421L15.7258 3H8.27421Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.web.test.tsx.snap
index 02cb57e8da0..0302f61fe5f 100644
--- a/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<OctagonIcon /> should render OctagonIcon 1`] = `
       clip-rule="evenodd"
       d="M7.15289 1.29289C7.33386 1.11193 7.58386 1 7.86 1H16.14C16.4052 1 16.6596 1.10536 16.8471 1.29289L22.7071 7.15289C22.8946 7.34043 23 7.59478 23 7.86V16.14C23 16.4052 22.8946 16.6596 22.7071 16.8471L16.8471 22.7071C16.6596 22.8946 16.4052 23 16.14 23H7.86C7.59478 23 7.34043 22.8946 7.15289 22.7071L1.29289 16.8471C1.10536 16.6596 1 16.4052 1 16.14V7.86C1 7.59478 1.10536 7.34043 1.29289 7.15289L7.15253 1.29326C7.15265 1.29314 7.15277 1.29301 7.15289 1.29289ZM8.27421 3L3 8.27421V15.7258L8.27421 21H15.7258L21 15.7258V8.27421L15.7258 3H8.27421Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/OffersIcon/OffersIcon.native.test.tsx b/packages/blade/src/components/Icons/OffersIcon/OffersIcon.native.test.tsx
index 5d994dacc8f..957bd518a96 100644
--- a/packages/blade/src/components/Icons/OffersIcon/OffersIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/OffersIcon/OffersIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<OffersIcon />', () => {
   it('should render OffersIcon', () => {
     const renderTree = renderWithTheme(
-      <OffersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <OffersIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/OffersIcon/OffersIcon.web.test.tsx b/packages/blade/src/components/Icons/OffersIcon/OffersIcon.web.test.tsx
index d63a0e0568e..b2eea833f8f 100644
--- a/packages/blade/src/components/Icons/OffersIcon/OffersIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/OffersIcon/OffersIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<OffersIcon />', () => {
   it('should render OffersIcon', () => {
     const { container } = renderWithTheme(
-      <OffersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <OffersIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.native.test.tsx.snap
index 82c83f24781..68eac1e0460 100644
--- a/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<OffersIcon /> should render OffersIcon 1`] = `
     >
       <RNSVGPath
         d="M21.41 11.58L12.415 2.585C12.05 2.225 11.55 2 11 2H4C2.895 2 2 2.895 2 4V11C2 11.555 2.225 12.055 2.59 12.415L11.59 21.415C11.95 21.775 12.45 22 13 22C13.55 22 14.055 21.775 14.415 21.415L21.415 14.415C21.775 14.05 22 13.55 22 13C22 12.445 21.775 11.945 21.41 11.58ZM5.5 7C4.67 7 4 6.33 4 5.5C4 4.67 4.67 4 5.5 4C6.33 4 7 4.67 7 5.5C7 6.33 6.33 7 5.5 7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.web.test.tsx.snap
index 9783f883aef..9c6c05a8d6a 100644
--- a/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<OffersIcon /> should render OffersIcon 1`] = `
     <path
       d="M21.41 11.58L12.415 2.585C12.05 2.225 11.55 2 11 2H4C2.895 2 2 2.895 2 4V11C2 11.555 2.225 12.055 2.59 12.415L11.59 21.415C11.95 21.775 12.45 22 13 22C13.55 22 14.055 21.775 14.415 21.415L21.415 14.415C21.775 14.05 22 13.55 22 13C22 12.445 21.775 11.945 21.41 11.58ZM5.5 7C4.67 7 4 6.33 4 5.5C4 4.67 4.67 4 5.5 4C6.33 4 7 4.67 7 5.5C7 6.33 6.33 7 5.5 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/PackageIcon/PackageIcon.native.test.tsx b/packages/blade/src/components/Icons/PackageIcon/PackageIcon.native.test.tsx
index 4cfb93872d1..db76c5fd450 100644
--- a/packages/blade/src/components/Icons/PackageIcon/PackageIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PackageIcon/PackageIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PackageIcon />', () => {
   it('should render PackageIcon', () => {
     const renderTree = renderWithTheme(
-      <PackageIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PackageIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PackageIcon/PackageIcon.web.test.tsx b/packages/blade/src/components/Icons/PackageIcon/PackageIcon.web.test.tsx
index c4d1c30828f..09411bd8c97 100644
--- a/packages/blade/src/components/Icons/PackageIcon/PackageIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PackageIcon/PackageIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PackageIcon />', () => {
   it('should render PackageIcon', () => {
     const { container } = renderWithTheme(
-      <PackageIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PackageIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.native.test.tsx.snap
index ace6c239ac2..e85083b64b0 100644
--- a/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PackageIcon /> should render PackageIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6.49335 2.63762L2.55877 4.60249C1.97162 4.88819 0.999978 5.76032 0.999988 7.23992V16.7568C0.993506 17.8958 1.63264 18.9403 2.65001 19.4529L2.65277 19.4543L10.6525 23.4542C11.4975 23.8771 12.4924 23.8771 13.3375 23.4542L21.335 19.4554L21.336 19.4549C22.3549 18.9482 22.9994 17.9079 23 16.7699V7.23938C22.9994 6.10147 22.3551 5.06191 21.3364 4.55506L21.335 4.55438L13.3372 0.555476L13.335 0.554375C12.494 0.136497 11.5059 0.136497 10.665 0.554375L6.61373 2.57751C6.57239 2.5948 6.53216 2.61487 6.49335 2.63762ZM9.23962 3.50169L11.555 2.34544C11.8348 2.20666 12.1642 2.20627 12.4441 2.34499L12.445 2.34544L19.7589 6.00242L17 7.38188L9.23962 3.50169ZM7.00218 4.61904L14.7639 8.49992L12 9.88188L4.23654 6.00015L7.00218 4.61904ZM2.99999 7.61794V16.7669C2.99734 17.1467 3.21012 17.4952 3.54914 17.6665L11 21.3919V11.618L2.99999 7.61794ZM13 21.3869L20.4428 17.6655L20.445 17.6644C20.7848 17.4955 20.9998 17.1488 21 16.7694V7.61796L13 11.618V21.3869Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.web.test.tsx.snap
index 5ddd80d07b0..f991dca7b84 100644
--- a/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<PackageIcon /> should render PackageIcon 1`] = `
       clip-rule="evenodd"
       d="M6.49335 2.63762L2.55877 4.60249C1.97162 4.88819 0.999978 5.76032 0.999988 7.23992V16.7568C0.993506 17.8958 1.63264 18.9403 2.65001 19.4529L2.65277 19.4543L10.6525 23.4542C11.4975 23.8771 12.4924 23.8771 13.3375 23.4542L21.335 19.4554L21.336 19.4549C22.3549 18.9482 22.9994 17.9079 23 16.7699V7.23938C22.9994 6.10147 22.3551 5.06191 21.3364 4.55506L21.335 4.55438L13.3372 0.555476L13.335 0.554375C12.494 0.136497 11.5059 0.136497 10.665 0.554375L6.61373 2.57751C6.57239 2.5948 6.53216 2.61487 6.49335 2.63762ZM9.23962 3.50169L11.555 2.34544C11.8348 2.20666 12.1642 2.20627 12.4441 2.34499L12.445 2.34544L19.7589 6.00242L17 7.38188L9.23962 3.50169ZM7.00218 4.61904L14.7639 8.49992L12 9.88188L4.23654 6.00015L7.00218 4.61904ZM2.99999 7.61794V16.7669C2.99734 17.1467 3.21012 17.4952 3.54914 17.6665L11 21.3919V11.618L2.99999 7.61794ZM13 21.3869L20.4428 17.6655L20.445 17.6644C20.7848 17.4955 20.9998 17.1488 21 16.7694V7.61796L13 11.618V21.3869Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PaperclipIcon/PaperclipIcon.native.test.tsx b/packages/blade/src/components/Icons/PaperclipIcon/PaperclipIcon.native.test.tsx
index 878444bbdb8..739a4a50ef9 100644
--- a/packages/blade/src/components/Icons/PaperclipIcon/PaperclipIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PaperclipIcon/PaperclipIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PaperclipIcon />', () => {
   it('should render PaperclipIcon', () => {
     const renderTree = renderWithTheme(
-      <PaperclipIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PaperclipIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PaperclipIcon/PaperclipIcon.web.test.tsx b/packages/blade/src/components/Icons/PaperclipIcon/PaperclipIcon.web.test.tsx
index a5b22de1a35..0a74d13a587 100644
--- a/packages/blade/src/components/Icons/PaperclipIcon/PaperclipIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PaperclipIcon/PaperclipIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PaperclipIcon />', () => {
   it('should render PaperclipIcon', () => {
     const { container } = renderWithTheme(
-      <PaperclipIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PaperclipIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.native.test.tsx.snap
index 850308cc53d..b92a4002bc5 100644
--- a/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PaperclipIcon /> should render PaperclipIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M17.9012 3.87933C16.7288 2.70689 14.8279 2.70689 13.6554 3.87933L4.46544 13.0693C2.51152 15.0233 2.51152 18.1912 4.46544 20.1451C6.41937 22.099 9.58731 22.099 11.5412 20.1451L20.7312 10.9551C21.1218 10.5646 21.7549 10.5646 22.1454 10.9551C22.536 11.3456 22.536 11.9788 22.1454 12.3693L12.9554 21.5593C10.2205 24.2943 5.7862 24.2943 3.05123 21.5593C0.316257 18.8244 0.316257 14.3901 3.05123 11.6551L12.2412 2.46512C14.1947 0.511628 17.362 0.511627 19.3154 2.46512C21.2689 4.41861 21.2689 7.58584 19.3154 9.53933L10.1154 18.7293C8.94344 19.9013 7.04324 19.9013 5.87123 18.7293C4.69922 17.5573 4.69922 15.6571 5.87123 14.4851L14.3616 6.0047C14.7524 5.61441 15.3856 5.61478 15.7759 6.00553C16.1662 6.39629 16.1658 7.02945 15.775 7.41975L7.28544 15.8993C6.8949 16.2903 6.89462 16.9243 7.28544 17.3151C7.6764 17.7061 8.31027 17.7061 8.70123 17.3151L17.9012 8.12512C19.0733 6.95264 19.0735 5.05164 17.9012 3.87933Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.web.test.tsx.snap
index 67e4343f443..ef0728dabf6 100644
--- a/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<PaperclipIcon /> should render PaperclipIcon 1`] = `
       clip-rule="evenodd"
       d="M17.9012 3.87933C16.7288 2.70689 14.8279 2.70689 13.6554 3.87933L4.46544 13.0693C2.51152 15.0233 2.51152 18.1912 4.46544 20.1451C6.41937 22.099 9.58731 22.099 11.5412 20.1451L20.7312 10.9551C21.1218 10.5646 21.7549 10.5646 22.1454 10.9551C22.536 11.3456 22.536 11.9788 22.1454 12.3693L12.9554 21.5593C10.2205 24.2943 5.7862 24.2943 3.05123 21.5593C0.316257 18.8244 0.316257 14.3901 3.05123 11.6551L12.2412 2.46512C14.1947 0.511628 17.362 0.511627 19.3154 2.46512C21.2689 4.41861 21.2689 7.58584 19.3154 9.53933L10.1154 18.7293C8.94344 19.9013 7.04324 19.9013 5.87123 18.7293C4.69922 17.5573 4.69922 15.6571 5.87123 14.4851L14.3616 6.0047C14.7524 5.61441 15.3856 5.61478 15.7759 6.00553C16.1662 6.39629 16.1658 7.02945 15.775 7.41975L7.28544 15.8993C6.8949 16.2903 6.89462 16.9243 7.28544 17.3151C7.6764 17.7061 8.31027 17.7061 8.70123 17.3151L17.9012 8.12512C19.0733 6.95264 19.0735 5.05164 17.9012 3.87933Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PauseCircleIcon/PauseCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/PauseCircleIcon/PauseCircleIcon.native.test.tsx
index 4a71c15d672..ca488cd243c 100644
--- a/packages/blade/src/components/Icons/PauseCircleIcon/PauseCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PauseCircleIcon/PauseCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PauseCircleIcon />', () => {
   it('should render PauseCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <PauseCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PauseCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PauseCircleIcon/PauseCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/PauseCircleIcon/PauseCircleIcon.web.test.tsx
index 0fe6f32b27b..7771052da27 100644
--- a/packages/blade/src/components/Icons/PauseCircleIcon/PauseCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PauseCircleIcon/PauseCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PauseCircleIcon />', () => {
   it('should render PauseCircleIcon', () => {
     const { container } = renderWithTheme(
-      <PauseCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PauseCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.native.test.tsx.snap
index 3e5f14b9003..38473f090e2 100644
--- a/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
     >
       <RNSVGPath
         d="M10 8C10.5523 8 11 8.44772 11 9V15C11 15.5523 10.5523 16 10 16C9.44771 16 9 15.5523 9 15V9C9 8.44772 9.44771 8 10 8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
       />
       <RNSVGPath
         d="M15 9C15 8.44772 14.5523 8 14 8C13.4477 8 13 8.44772 13 9V15C13 15.5523 13.4477 16 14 16C14.5523 16 15 15.5523 15 15V9Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -70,7 +70,7 @@ exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.web.test.tsx.snap
index 6f6eebc5d4c..988bd2cf7a4 100644
--- a/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.web.test.tsx.snap
@@ -14,18 +14,18 @@ exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
     <path
       d="M10 8C10.5523 8 11 8.44772 11 9V15C11 15.5523 10.5523 16 10 16C9.44771 16 9 15.5523 9 15V9C9 8.44772 9.44771 8 10 8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M15 9C15 8.44772 14.5523 8 14 8C13.4477 8 13 8.44772 13 9V15C13 15.5523 13.4477 16 14 16C14.5523 16 15 15.5523 15 15V9Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PauseIcon/PauseIcon.native.test.tsx b/packages/blade/src/components/Icons/PauseIcon/PauseIcon.native.test.tsx
index 51b87232265..53f44d51dbe 100644
--- a/packages/blade/src/components/Icons/PauseIcon/PauseIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PauseIcon/PauseIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PauseIcon />', () => {
   it('should render PauseIcon', () => {
     const renderTree = renderWithTheme(
-      <PauseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PauseIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PauseIcon/PauseIcon.web.test.tsx b/packages/blade/src/components/Icons/PauseIcon/PauseIcon.web.test.tsx
index 9d3cbc8e860..31b69f05eaf 100644
--- a/packages/blade/src/components/Icons/PauseIcon/PauseIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PauseIcon/PauseIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PauseIcon />', () => {
   it('should render PauseIcon', () => {
     const { container } = renderWithTheme(
-      <PauseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PauseIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.native.test.tsx.snap
index 2a884acad07..0600fa9bf48 100644
--- a/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PauseIcon /> should render PauseIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H6Zm1 16V5h2v14H7ZM14 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-4Zm1 16V5h2v14h-2Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.web.test.tsx.snap
index 14107848677..15b2387e74c 100644
--- a/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<PauseIcon /> should render PauseIcon 1`] = `
       clip-rule="evenodd"
       d="M6 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H6Zm1 16V5h2v14H7ZM14 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-4Zm1 16V5h2v14h-2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PaymentButtonsIcon/PaymentButtonsIcon.native.test.tsx b/packages/blade/src/components/Icons/PaymentButtonsIcon/PaymentButtonsIcon.native.test.tsx
index 150222964c9..63c3dbd265e 100644
--- a/packages/blade/src/components/Icons/PaymentButtonsIcon/PaymentButtonsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PaymentButtonsIcon/PaymentButtonsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PaymentButtonsIcon />', () => {
   it('should render PaymentButtonsIcon', () => {
     const renderTree = renderWithTheme(
-      <PaymentButtonsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PaymentButtonsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PaymentButtonsIcon/PaymentButtonsIcon.web.test.tsx b/packages/blade/src/components/Icons/PaymentButtonsIcon/PaymentButtonsIcon.web.test.tsx
index ccd6a4e3c9a..0abaa1f80b0 100644
--- a/packages/blade/src/components/Icons/PaymentButtonsIcon/PaymentButtonsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PaymentButtonsIcon/PaymentButtonsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PaymentButtonsIcon />', () => {
   it('should render PaymentButtonsIcon', () => {
     const { container } = renderWithTheme(
-      <PaymentButtonsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PaymentButtonsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.native.test.tsx.snap
index 1335a8d4c91..469d3c2b20f 100644
--- a/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PaymentButtonsIcon /> should render PaymentButtonsIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5.63688 11.375C4.74852 11.6022 4.09561 12.3621 4.09561 13.2646V14.0822C4.09561 15.1641 5.03385 16.0411 6.19123 16.0411H14.2275C15.1724 16.0411 15.9713 15.4565 16.2327 14.6532H9.77254C7.69079 14.6532 5.96353 13.2345 5.63688 11.375ZM18.38 14.6171C18.101 16.5278 16.3482 18 14.2275 18H6.19123C3.87647 18 2 16.2459 2 14.0822V13.2646C2 11.282 3.5755 9.64333 5.62004 9.38291C5.89908 7.47222 7.65188 6 9.77254 6H17.8088C20.1236 6 22 7.75404 22 9.91776V10.7354C22 12.718 20.4245 14.3567 18.38 14.6171Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.web.test.tsx.snap
index 4d90559c794..bcfe579c8dc 100644
--- a/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<PaymentButtonsIcon /> should render PaymentButtonsIcon 1`] = `
       clip-rule="evenodd"
       d="M5.63688 11.375C4.74852 11.6022 4.09561 12.3621 4.09561 13.2646V14.0822C4.09561 15.1641 5.03385 16.0411 6.19123 16.0411H14.2275C15.1724 16.0411 15.9713 15.4565 16.2327 14.6532H9.77254C7.69079 14.6532 5.96353 13.2345 5.63688 11.375ZM18.38 14.6171C18.101 16.5278 16.3482 18 14.2275 18H6.19123C3.87647 18 2 16.2459 2 14.0822V13.2646C2 11.282 3.5755 9.64333 5.62004 9.38291C5.89908 7.47222 7.65188 6 9.77254 6H17.8088C20.1236 6 22 7.75404 22 9.91776V10.7354C22 12.718 20.4245 14.3567 18.38 14.6171Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PaymentLinksIcon/PaymentLinksIcon.native.test.tsx b/packages/blade/src/components/Icons/PaymentLinksIcon/PaymentLinksIcon.native.test.tsx
index f48641d4ea5..49714630ff2 100644
--- a/packages/blade/src/components/Icons/PaymentLinksIcon/PaymentLinksIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PaymentLinksIcon/PaymentLinksIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PaymentLinksIcon />', () => {
   it('should render PaymentLinksIcon', () => {
     const renderTree = renderWithTheme(
-      <PaymentLinksIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PaymentLinksIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PaymentLinksIcon/PaymentLinksIcon.web.test.tsx b/packages/blade/src/components/Icons/PaymentLinksIcon/PaymentLinksIcon.web.test.tsx
index b0bd84212a4..da2647a5e28 100644
--- a/packages/blade/src/components/Icons/PaymentLinksIcon/PaymentLinksIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PaymentLinksIcon/PaymentLinksIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PaymentLinksIcon />', () => {
   it('should render PaymentLinksIcon', () => {
     const { container } = renderWithTheme(
-      <PaymentLinksIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PaymentLinksIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.native.test.tsx.snap
index 18e785b10b3..997b803bbd5 100644
--- a/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PaymentLinksIcon /> should render PaymentLinksIcon 1`] = `
     >
       <RNSVGPath
         d="M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12C20.1 13.71 18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.web.test.tsx.snap
index 28971d1fd92..e4441e88023 100644
--- a/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<PaymentLinksIcon /> should render PaymentLinksIcon 1`] = `
     <path
       d="M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12C20.1 13.71 18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/PaymentPagesIcon/PaymentPagesIcon.native.test.tsx b/packages/blade/src/components/Icons/PaymentPagesIcon/PaymentPagesIcon.native.test.tsx
index 5c4d7b9f5f5..08de64e2679 100644
--- a/packages/blade/src/components/Icons/PaymentPagesIcon/PaymentPagesIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PaymentPagesIcon/PaymentPagesIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PaymentPagesIcon />', () => {
   it('should render PaymentPagesIcon', () => {
     const renderTree = renderWithTheme(
-      <PaymentPagesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PaymentPagesIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PaymentPagesIcon/PaymentPagesIcon.web.test.tsx b/packages/blade/src/components/Icons/PaymentPagesIcon/PaymentPagesIcon.web.test.tsx
index 1a84ae12186..2e358d9e314 100644
--- a/packages/blade/src/components/Icons/PaymentPagesIcon/PaymentPagesIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PaymentPagesIcon/PaymentPagesIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PaymentPagesIcon />', () => {
   it('should render PaymentPagesIcon', () => {
     const { container } = renderWithTheme(
-      <PaymentPagesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PaymentPagesIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.native.test.tsx.snap
index dc07c11687f..db2af69c272 100644
--- a/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PaymentPagesIcon /> should render PaymentPagesIcon 1`] = `
     >
       <RNSVGPath
         d="M16.0588 2L21 7.26316V20.2456C21 21.2105 20.2588 21.9912 19.3529 21.9912L7.82353 22C6.91765 22 6.17647 21.2193 6.17647 20.2544V3.75439C6.17647 2.78947 6.91765 2 7.82353 2H16.0588ZM3 5.15789H4.71429V20.9474H3V5.15789ZM9.35294 10.4211V11.4737H17.8235V10.4211H9.35294ZM9.35294 12.5263V13.5789H17.8235V12.5263H9.35294ZM9.35294 14.6316V15.6842H17.8235V14.6316H9.35294ZM15 3.31579V8.14035H19.7143L15 3.31579Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.web.test.tsx.snap
index 556773150f2..6e404e823dc 100644
--- a/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<PaymentPagesIcon /> should render PaymentPagesIcon 1`] = `
     <path
       d="M16.0588 2L21 7.26316V20.2456C21 21.2105 20.2588 21.9912 19.3529 21.9912L7.82353 22C6.91765 22 6.17647 21.2193 6.17647 20.2544V3.75439C6.17647 2.78947 6.91765 2 7.82353 2H16.0588ZM3 5.15789H4.71429V20.9474H3V5.15789ZM9.35294 10.4211V11.4737H17.8235V10.4211H9.35294ZM9.35294 12.5263V13.5789H17.8235V12.5263H9.35294ZM9.35294 14.6316V15.6842H17.8235V14.6316H9.35294ZM15 3.31579V8.14035H19.7143L15 3.31579Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/PercentIcon/PercentIcon.native.test.tsx b/packages/blade/src/components/Icons/PercentIcon/PercentIcon.native.test.tsx
index 40a2d0b7b5e..7bc8d2062fe 100644
--- a/packages/blade/src/components/Icons/PercentIcon/PercentIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PercentIcon/PercentIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PercentIcon />', () => {
   it('should render PercentIcon', () => {
     const renderTree = renderWithTheme(
-      <PercentIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PercentIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PercentIcon/PercentIcon.web.test.tsx b/packages/blade/src/components/Icons/PercentIcon/PercentIcon.web.test.tsx
index 23fdfb70320..27b08659d07 100644
--- a/packages/blade/src/components/Icons/PercentIcon/PercentIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PercentIcon/PercentIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PercentIcon />', () => {
   it('should render PercentIcon', () => {
     const { container } = renderWithTheme(
-      <PercentIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PercentIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.native.test.tsx.snap
index 6b13dae16e0..5570bc798e5 100644
--- a/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PercentIcon /> should render PercentIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5ZM6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8C7.32843 8 8 7.32843 8 6.5C8 5.67157 7.32843 5 6.5 5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<PercentIcon /> should render PercentIcon 1`] = `
       />
       <RNSVGPath
         d="M19.7071 5.70711L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.6834 4.29289 18.2929L18.2929 4.29289C18.6834 3.90237 19.3166 3.90237 19.7071 4.29289C20.0976 4.68342 20.0976 5.31658 19.7071 5.70711Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -73,7 +73,7 @@ exports[`<PercentIcon /> should render PercentIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M17.5 14C15.567 14 14 15.567 14 17.5C14 19.433 15.567 21 17.5 21C19.433 21 21 19.433 21 17.5C21 15.567 19.433 14 17.5 14ZM16 17.5C16 16.6716 16.6716 16 17.5 16C18.3284 16 19 16.6716 19 17.5C19 18.3284 18.3284 19 17.5 19C16.6716 19 16 18.3284 16 17.5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.web.test.tsx.snap
index 66ee823fe6a..6d7794b01ee 100644
--- a/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.web.test.tsx.snap
@@ -15,19 +15,19 @@ exports[`<PercentIcon /> should render PercentIcon 1`] = `
       clip-rule="evenodd"
       d="M3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5ZM6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8C7.32843 8 8 7.32843 8 6.5C8 5.67157 7.32843 5 6.5 5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M19.7071 5.70711L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.6834 4.29289 18.2929L18.2929 4.29289C18.6834 3.90237 19.3166 3.90237 19.7071 4.29289C20.0976 4.68342 20.0976 5.31658 19.7071 5.70711Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M17.5 14C15.567 14 14 15.567 14 17.5C14 19.433 15.567 21 17.5 21C19.433 21 21 19.433 21 17.5C21 15.567 19.433 14 17.5 14ZM16 17.5C16 16.6716 16.6716 16 17.5 16C18.3284 16 19 16.6716 19 17.5C19 18.3284 18.3284 19 17.5 19C16.6716 19 16 18.3284 16 17.5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PhoneCallIcon/PhoneCallIcon.native.test.tsx b/packages/blade/src/components/Icons/PhoneCallIcon/PhoneCallIcon.native.test.tsx
index 66e2dcf3882..5ea93b3a505 100644
--- a/packages/blade/src/components/Icons/PhoneCallIcon/PhoneCallIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneCallIcon/PhoneCallIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PhoneCallIcon />', () => {
   it('should render PhoneCallIcon', () => {
     const renderTree = renderWithTheme(
-      <PhoneCallIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneCallIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneCallIcon/PhoneCallIcon.web.test.tsx b/packages/blade/src/components/Icons/PhoneCallIcon/PhoneCallIcon.web.test.tsx
index 2f730ab5af7..7def1df775d 100644
--- a/packages/blade/src/components/Icons/PhoneCallIcon/PhoneCallIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneCallIcon/PhoneCallIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PhoneCallIcon />', () => {
   it('should render PhoneCallIcon', () => {
     const { container } = renderWithTheme(
-      <PhoneCallIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneCallIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.native.test.tsx.snap
index ed95a05209c..a7a6f1c68c3 100644
--- a/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
     >
       <RNSVGPath
         d="M13.0561 1.88955C13.1171 1.34065 13.6115 0.945101 14.1604 1.00608C18.8043 1.52198 22.472 5.18501 22.9937 9.8283C23.0554 10.3771 22.6605 10.872 22.1116 10.9337C21.5628 10.9954 21.0679 10.6005 21.0062 10.0516C20.5888 6.337 17.6547 3.40658 13.9396 2.99385C13.3907 2.93287 12.9951 2.43846 13.0561 1.88955Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
       />
       <RNSVGPath
         d="M13.0685 5.80848C13.1742 5.26642 13.6994 4.91272 14.2415 5.01848C16.639 5.48626 18.5137 7.36089 18.9815 9.75848C19.0872 10.3005 18.7335 10.8257 18.1915 10.9315C17.6494 11.0372 17.1242 10.6835 17.0185 10.1415C16.7066 8.54308 15.4569 7.29332 13.8585 6.98147C13.3164 6.87571 12.9627 6.35054 13.0685 5.80848Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -70,7 +70,7 @@ exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2.99996 1.99997C2.28482 1.99997 1.47945 2.25291 0.883051 2.81817C0.253692 3.41466 -0.0695435 4.29417 0.130507 5.33177C0.480716 8.56088 1.58268 11.6632 3.34828 14.39C4.96126 16.9271 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.563 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9895 20.3527 23.7273 20.9683 23.1921C21.4415 22.8538 22 22.0999 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8997L19.4107 14.8986C18.5258 14.7818 17.6569 14.5654 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51063 10.1579 8.27533 9.74647 7.17932C9.43449 6.34303 9.21809 5.47414 9.10137 4.58921L9.09536 4.54365L9.0852 4.49884C8.98842 4.07201 8.74141 3.47995 8.28724 2.97572C7.81222 2.44832 7.0887 1.99997 6.10996 1.99997H2.99996ZM2.09885 4.97558C2.01626 4.58005 2.13282 4.38923 2.25886 4.26977C2.42845 4.10903 2.71509 3.99997 2.99996 3.99997H6.10996C6.41921 3.99997 6.6307 4.12495 6.80117 4.31422C6.97819 4.51075 7.08472 4.7548 7.12598 4.90624C7.26412 5.9219 7.51467 6.91913 7.87306 7.87957L7.87391 7.88183C8.011 8.24655 7.92376 8.65761 7.65052 8.93519L6.38285 10.2029C6.06454 10.5212 5.99815 11.0129 6.22066 11.4043C7.73319 14.0643 9.93565 16.2667 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.9889 16.1181 16.126L16.1204 16.1269C17.0966 16.4912 18.1109 16.744 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2132 19.944 21.3589 19.891 21.4505C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8122 21.5577 19.8085 21.5613 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3136L5.02924 13.3063C3.42461 10.8293 2.42602 8.00917 2.11437 5.07437L2.10908 5.02459L2.09885 4.97558Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.web.test.tsx.snap
index d821e5880cf..1c1d5deb399 100644
--- a/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.web.test.tsx.snap
@@ -14,18 +14,18 @@ exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
     <path
       d="M13.0561 1.88955C13.1171 1.34065 13.6115 0.945101 14.1604 1.00608C18.8043 1.52198 22.472 5.18501 22.9937 9.8283C23.0554 10.3771 22.6605 10.872 22.1116 10.9337C21.5628 10.9954 21.0679 10.6005 21.0062 10.0516C20.5888 6.337 17.6547 3.40658 13.9396 2.99385C13.3907 2.93287 12.9951 2.43846 13.0561 1.88955Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M13.0685 5.80848C13.1742 5.26642 13.6994 4.91272 14.2415 5.01848C16.639 5.48626 18.5137 7.36089 18.9815 9.75848C19.0872 10.3005 18.7335 10.8257 18.1915 10.9315C17.6494 11.0372 17.1242 10.6835 17.0185 10.1415C16.7066 8.54308 15.4569 7.29332 13.8585 6.98147C13.3164 6.87571 12.9627 6.35054 13.0685 5.80848Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M2.99996 1.99997C2.28482 1.99997 1.47945 2.25291 0.883051 2.81817C0.253692 3.41466 -0.0695435 4.29417 0.130507 5.33177C0.480716 8.56088 1.58268 11.6632 3.34828 14.39C4.96126 16.9271 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.563 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9895 20.3527 23.7273 20.9683 23.1921C21.4415 22.8538 22 22.0999 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8997L19.4107 14.8986C18.5258 14.7818 17.6569 14.5654 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51063 10.1579 8.27533 9.74647 7.17932C9.43449 6.34303 9.21809 5.47414 9.10137 4.58921L9.09536 4.54365L9.0852 4.49884C8.98842 4.07201 8.74141 3.47995 8.28724 2.97572C7.81222 2.44832 7.0887 1.99997 6.10996 1.99997H2.99996ZM2.09885 4.97558C2.01626 4.58005 2.13282 4.38923 2.25886 4.26977C2.42845 4.10903 2.71509 3.99997 2.99996 3.99997H6.10996C6.41921 3.99997 6.6307 4.12495 6.80117 4.31422C6.97819 4.51075 7.08472 4.7548 7.12598 4.90624C7.26412 5.9219 7.51467 6.91913 7.87306 7.87957L7.87391 7.88183C8.011 8.24655 7.92376 8.65761 7.65052 8.93519L6.38285 10.2029C6.06454 10.5212 5.99815 11.0129 6.22066 11.4043C7.73319 14.0643 9.93565 16.2667 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.9889 16.1181 16.126L16.1204 16.1269C17.0966 16.4912 18.1109 16.744 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2132 19.944 21.3589 19.891 21.4505C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8122 21.5577 19.8085 21.5613 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3136L5.02924 13.3063C3.42461 10.8293 2.42602 8.00917 2.11437 5.07437L2.10908 5.02459L2.09885 4.97558Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PhoneForwardedIcon/PhoneForwardedIcon.native.test.tsx b/packages/blade/src/components/Icons/PhoneForwardedIcon/PhoneForwardedIcon.native.test.tsx
index c624c2e1ade..0ae4cf2d04b 100644
--- a/packages/blade/src/components/Icons/PhoneForwardedIcon/PhoneForwardedIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneForwardedIcon/PhoneForwardedIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PhoneForwardedIcon />', () => {
   it('should render PhoneForwardedIcon', () => {
     const renderTree = renderWithTheme(
-      <PhoneForwardedIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneForwardedIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneForwardedIcon/PhoneForwardedIcon.web.test.tsx b/packages/blade/src/components/Icons/PhoneForwardedIcon/PhoneForwardedIcon.web.test.tsx
index 39cdb931989..c837c216a0a 100644
--- a/packages/blade/src/components/Icons/PhoneForwardedIcon/PhoneForwardedIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneForwardedIcon/PhoneForwardedIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PhoneForwardedIcon />', () => {
   it('should render PhoneForwardedIcon', () => {
     const { container } = renderWithTheme(
-      <PhoneForwardedIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneForwardedIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.native.test.tsx.snap
index 9161992565e..275caeb0ccf 100644
--- a/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PhoneForwardedIcon /> should render PhoneForwardedIcon 1`] = `
     >
       <RNSVGPath
         d="M17.2929 1.29289C17.6834 0.902369 18.3166 0.902369 18.7071 1.29289L22.7071 5.29289C23.0976 5.68342 23.0976 6.31658 22.7071 6.70711L18.7071 10.7071C18.3166 11.0976 17.6834 11.0976 17.2929 10.7071C16.9023 10.3166 16.9023 9.68342 17.2929 9.29289L19.5858 7H14C13.4477 7 13 6.55228 13 6C13 5.44772 13.4477 5 14 5H19.5858L17.2929 2.70711C16.9023 2.31658 16.9023 1.68342 17.2929 1.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<PhoneForwardedIcon /> should render PhoneForwardedIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2.99996 2C2.28482 2 1.47945 2.25294 0.883051 2.8182C0.253692 3.41469 -0.0695435 4.2942 0.130507 5.3318C0.480716 8.56092 1.58268 11.6633 3.34828 14.39C4.96126 16.9272 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.5631 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9896 20.3527 23.7273 20.9683 23.1922C21.4415 22.8538 22 22.1 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8998L19.4107 14.8986C18.5258 14.7819 17.6569 14.5655 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51066 10.1579 8.27536 9.74647 7.17935C9.43449 6.34306 9.21809 5.47417 9.10137 4.58924L9.09536 4.54368L9.0852 4.49887C8.98842 4.07204 8.74141 3.47998 8.28724 2.97575C7.81222 2.44835 7.0887 2 6.10996 2H2.99996ZM2.09885 4.97561C2.01626 4.58008 2.13282 4.38926 2.25886 4.2698C2.42845 4.10906 2.71509 4 2.99996 4H6.10996C6.41921 4 6.6307 4.12499 6.80117 4.31425C6.97819 4.51078 7.08472 4.75483 7.12598 4.90627C7.26412 5.92193 7.51467 6.91916 7.87306 7.8796L7.87391 7.88186C8.011 8.24658 7.92376 8.65764 7.65052 8.93522L6.38285 10.2029C6.06454 10.5212 5.99815 11.013 6.22066 11.4043C7.73319 14.0643 9.93565 16.2668 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.989 16.1181 16.1261L16.1204 16.1269C17.0966 16.4912 18.1109 16.7441 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2133 19.944 21.3589 19.891 21.4506C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8149 21.5548 19.8133 21.5564 19.8119 21.5579C19.8095 21.5603 19.8075 21.5623 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3137L5.02924 13.3063C3.42461 10.8293 2.42602 8.00921 2.11437 5.0744L2.10908 5.02462L2.09885 4.97561Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.web.test.tsx.snap
index 8eb7c03fb78..db563433237 100644
--- a/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<PhoneForwardedIcon /> should render PhoneForwardedIcon 1`] = `
     <path
       d="M17.2929 1.29289C17.6834 0.902369 18.3166 0.902369 18.7071 1.29289L22.7071 5.29289C23.0976 5.68342 23.0976 6.31658 22.7071 6.70711L18.7071 10.7071C18.3166 11.0976 17.6834 11.0976 17.2929 10.7071C16.9023 10.3166 16.9023 9.68342 17.2929 9.29289L19.5858 7H14C13.4477 7 13 6.55228 13 6C13 5.44772 13.4477 5 14 5H19.5858L17.2929 2.70711C16.9023 2.31658 16.9023 1.68342 17.2929 1.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M2.99996 2C2.28482 2 1.47945 2.25294 0.883051 2.8182C0.253692 3.41469 -0.0695435 4.2942 0.130507 5.3318C0.480716 8.56092 1.58268 11.6633 3.34828 14.39C4.96126 16.9272 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.5631 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9896 20.3527 23.7273 20.9683 23.1922C21.4415 22.8538 22 22.1 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8998L19.4107 14.8986C18.5258 14.7819 17.6569 14.5655 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51066 10.1579 8.27536 9.74647 7.17935C9.43449 6.34306 9.21809 5.47417 9.10137 4.58924L9.09536 4.54368L9.0852 4.49887C8.98842 4.07204 8.74141 3.47998 8.28724 2.97575C7.81222 2.44835 7.0887 2 6.10996 2H2.99996ZM2.09885 4.97561C2.01626 4.58008 2.13282 4.38926 2.25886 4.2698C2.42845 4.10906 2.71509 4 2.99996 4H6.10996C6.41921 4 6.6307 4.12499 6.80117 4.31425C6.97819 4.51078 7.08472 4.75483 7.12598 4.90627C7.26412 5.92193 7.51467 6.91916 7.87306 7.8796L7.87391 7.88186C8.011 8.24658 7.92376 8.65764 7.65052 8.93522L6.38285 10.2029C6.06454 10.5212 5.99815 11.013 6.22066 11.4043C7.73319 14.0643 9.93565 16.2668 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.989 16.1181 16.1261L16.1204 16.1269C17.0966 16.4912 18.1109 16.7441 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2133 19.944 21.3589 19.891 21.4506C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8149 21.5548 19.8133 21.5564 19.8119 21.5579C19.8095 21.5603 19.8075 21.5623 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3137L5.02924 13.3063C3.42461 10.8293 2.42602 8.00921 2.11437 5.0744L2.10908 5.02462L2.09885 4.97561Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PhoneIcon/PhoneIcon.native.test.tsx b/packages/blade/src/components/Icons/PhoneIcon/PhoneIcon.native.test.tsx
index 10af70bfcd1..0ca2b884a57 100644
--- a/packages/blade/src/components/Icons/PhoneIcon/PhoneIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneIcon/PhoneIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PhoneIcon />', () => {
   it('should render PhoneIcon', () => {
     const renderTree = renderWithTheme(
-      <PhoneIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneIcon/PhoneIcon.web.test.tsx b/packages/blade/src/components/Icons/PhoneIcon/PhoneIcon.web.test.tsx
index aeb4d75f5f6..669a1338188 100644
--- a/packages/blade/src/components/Icons/PhoneIcon/PhoneIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneIcon/PhoneIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PhoneIcon />', () => {
   it('should render PhoneIcon', () => {
     const { container } = renderWithTheme(
-      <PhoneIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.native.test.tsx.snap
index 1d92ec47e99..56e6a998a0f 100644
--- a/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PhoneIcon /> should render PhoneIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M0.883051 1.8182C1.47945 1.25294 2.28482 1 2.99996 1H6.10996C7.0887 1 7.81222 1.44835 8.28724 1.97575C8.74141 2.47998 8.98842 3.07204 9.0852 3.49887L9.09536 3.54368L9.10137 3.58924C9.21809 4.47417 9.43449 5.34306 9.74647 6.17935C10.1579 7.27536 9.89423 8.51066 9.07101 9.34314L9.06708 9.34712L8.34997 10.0642C9.52583 11.9088 11.0911 13.4741 12.9358 14.65L13.6529 13.9329L13.6568 13.9289C14.4893 13.1057 15.7246 12.842 16.8206 13.2535C17.6569 13.5655 18.5258 13.7819 19.4107 13.8986L19.4197 13.8998C20.9235 14.1119 22.0308 15.4142 22 16.9312V20C22 21.1 21.4415 21.8538 20.9683 22.1922C20.3527 22.7273 19.5446 22.9896 18.73 22.9159L18.7209 22.9151L18.7119 22.9141C15.4808 22.5631 12.377 21.4593 9.64971 19.6915C7.11256 18.0785 4.96126 15.9272 3.34828 13.39C1.58268 10.6633 0.480716 7.56092 0.130507 4.3318C-0.0695435 3.2942 0.253692 2.41469 0.883051 1.8182ZM2.25886 3.2698C2.13282 3.38926 2.01626 3.58008 2.09885 3.97561L2.10908 4.02462L2.11437 4.0744C2.42602 7.00921 3.42461 9.82933 5.02924 12.3063L5.034 12.3137C6.4906 14.6059 8.43401 16.5494 10.7263 18.006L10.7341 18.0109C13.1969 19.6081 15.9996 20.606 18.9175 20.9247C19.1954 20.9477 19.4704 20.8536 19.676 20.665L19.7452 20.6015L19.8058 20.5639C19.8085 20.5613 19.8122 20.5577 19.8166 20.553C19.8359 20.5325 19.8634 20.4985 19.891 20.4506C19.944 20.3589 20 20.2133 20 20V16.9076L20.0003 16.8952C20.0128 16.3888 19.6448 15.9532 19.1439 15.8807C18.1109 15.7441 17.0966 15.4912 16.1204 15.1269L16.1181 15.1261C15.7534 14.989 15.3423 15.0762 15.0647 15.3494L13.7971 16.6171C13.4788 16.9354 12.987 17.0018 12.5957 16.7793C9.93565 15.2668 7.73319 13.0643 6.22066 10.4043C5.99815 10.013 6.06454 9.52121 6.38285 9.20289L7.65052 7.93522C7.92376 7.65764 8.011 7.24658 7.87391 6.88186L7.87306 6.8796C7.51467 5.91916 7.26412 4.92193 7.12598 3.90627C7.08472 3.75483 6.97819 3.51078 6.80117 3.31425C6.6307 3.12499 6.41921 3 6.10996 3H2.99996C2.71509 3 2.42845 3.10906 2.25886 3.2698Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.web.test.tsx.snap
index 044b5e7bb8d..07575f266f8 100644
--- a/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<PhoneIcon /> should render PhoneIcon 1`] = `
       clip-rule="evenodd"
       d="M0.883051 1.8182C1.47945 1.25294 2.28482 1 2.99996 1H6.10996C7.0887 1 7.81222 1.44835 8.28724 1.97575C8.74141 2.47998 8.98842 3.07204 9.0852 3.49887L9.09536 3.54368L9.10137 3.58924C9.21809 4.47417 9.43449 5.34306 9.74647 6.17935C10.1579 7.27536 9.89423 8.51066 9.07101 9.34314L9.06708 9.34712L8.34997 10.0642C9.52583 11.9088 11.0911 13.4741 12.9358 14.65L13.6529 13.9329L13.6568 13.9289C14.4893 13.1057 15.7246 12.842 16.8206 13.2535C17.6569 13.5655 18.5258 13.7819 19.4107 13.8986L19.4197 13.8998C20.9235 14.1119 22.0308 15.4142 22 16.9312V20C22 21.1 21.4415 21.8538 20.9683 22.1922C20.3527 22.7273 19.5446 22.9896 18.73 22.9159L18.7209 22.9151L18.7119 22.9141C15.4808 22.5631 12.377 21.4593 9.64971 19.6915C7.11256 18.0785 4.96126 15.9272 3.34828 13.39C1.58268 10.6633 0.480716 7.56092 0.130507 4.3318C-0.0695435 3.2942 0.253692 2.41469 0.883051 1.8182ZM2.25886 3.2698C2.13282 3.38926 2.01626 3.58008 2.09885 3.97561L2.10908 4.02462L2.11437 4.0744C2.42602 7.00921 3.42461 9.82933 5.02924 12.3063L5.034 12.3137C6.4906 14.6059 8.43401 16.5494 10.7263 18.006L10.7341 18.0109C13.1969 19.6081 15.9996 20.606 18.9175 20.9247C19.1954 20.9477 19.4704 20.8536 19.676 20.665L19.7452 20.6015L19.8058 20.5639C19.8085 20.5613 19.8122 20.5577 19.8166 20.553C19.8359 20.5325 19.8634 20.4985 19.891 20.4506C19.944 20.3589 20 20.2133 20 20V16.9076L20.0003 16.8952C20.0128 16.3888 19.6448 15.9532 19.1439 15.8807C18.1109 15.7441 17.0966 15.4912 16.1204 15.1269L16.1181 15.1261C15.7534 14.989 15.3423 15.0762 15.0647 15.3494L13.7971 16.6171C13.4788 16.9354 12.987 17.0018 12.5957 16.7793C9.93565 15.2668 7.73319 13.0643 6.22066 10.4043C5.99815 10.013 6.06454 9.52121 6.38285 9.20289L7.65052 7.93522C7.92376 7.65764 8.011 7.24658 7.87391 6.88186L7.87306 6.8796C7.51467 5.91916 7.26412 4.92193 7.12598 3.90627C7.08472 3.75483 6.97819 3.51078 6.80117 3.31425C6.6307 3.12499 6.41921 3 6.10996 3H2.99996C2.71509 3 2.42845 3.10906 2.25886 3.2698Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PhoneIncomingIcon/PhoneIncomingIcon.native.test.tsx b/packages/blade/src/components/Icons/PhoneIncomingIcon/PhoneIncomingIcon.native.test.tsx
index e076d589a57..6a886a3b970 100644
--- a/packages/blade/src/components/Icons/PhoneIncomingIcon/PhoneIncomingIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneIncomingIcon/PhoneIncomingIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PhoneIncomingIcon />', () => {
   it('should render PhoneIncomingIcon', () => {
     const renderTree = renderWithTheme(
-      <PhoneIncomingIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneIncomingIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneIncomingIcon/PhoneIncomingIcon.web.test.tsx b/packages/blade/src/components/Icons/PhoneIncomingIcon/PhoneIncomingIcon.web.test.tsx
index 2a4d89ca13a..45f4fd560d2 100644
--- a/packages/blade/src/components/Icons/PhoneIncomingIcon/PhoneIncomingIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneIncomingIcon/PhoneIncomingIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PhoneIncomingIcon />', () => {
   it('should render PhoneIncomingIcon', () => {
     const { container } = renderWithTheme(
-      <PhoneIncomingIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneIncomingIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.native.test.tsx.snap
index 27f3743cb8c..463125cdb8a 100644
--- a/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PhoneIncomingIcon /> should render PhoneIncomingIcon 1`] = `
     >
       <RNSVGPath
         d="M22.7071 2.70711L17.4142 8H21C21.5523 8 22 8.44772 22 9C22 9.55228 21.5523 10 21 10H15.0007L14.997 10C14.7421 9.99924 14.4874 9.90161 14.2929 9.70711C14.197 9.61123 14.1247 9.50073 14.0759 9.38278C14.027 9.26488 14 9.13559 14 9V3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V6.58579L21.2929 1.29289C21.6834 0.902369 22.3166 0.902369 22.7071 1.29289C23.0976 1.68342 23.0976 2.31658 22.7071 2.70711Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<PhoneIncomingIcon /> should render PhoneIncomingIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2.99996 2C2.28482 2 1.47945 2.25294 0.883051 2.8182C0.253692 3.41469 -0.0695435 4.2942 0.130507 5.3318C0.480716 8.56092 1.58268 11.6633 3.34828 14.39C4.96126 16.9272 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.5631 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9896 20.3527 23.7273 20.9683 23.1922C21.4415 22.8538 22 22.1 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8998L19.4107 14.8986C18.5258 14.7819 17.6569 14.5655 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51066 10.1579 8.27536 9.74647 7.17935C9.43449 6.34306 9.21809 5.47417 9.10137 4.58924L9.09536 4.54368L9.0852 4.49887C8.98842 4.07204 8.74141 3.47998 8.28724 2.97575C7.81222 2.44835 7.0887 2 6.10996 2H2.99996ZM2.09885 4.97561C2.01626 4.58008 2.13282 4.38926 2.25886 4.2698C2.42845 4.10906 2.71509 4 2.99996 4H6.10996C6.41921 4 6.6307 4.12499 6.80117 4.31425C6.97819 4.51078 7.08472 4.75483 7.12598 4.90627C7.26412 5.92193 7.51467 6.91916 7.87306 7.8796L7.87391 7.88186C8.011 8.24658 7.92376 8.65764 7.65052 8.93522L6.38285 10.2029C6.06454 10.5212 5.99815 11.013 6.22066 11.4043C7.73319 14.0643 9.93565 16.2668 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.989 16.1181 16.1261L16.1204 16.1269C17.0966 16.4912 18.1109 16.7441 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2133 19.944 21.3589 19.891 21.4506C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8149 21.5548 19.8133 21.5564 19.8119 21.5579C19.8095 21.5603 19.8075 21.5623 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3137L5.02924 13.3063C3.42461 10.8293 2.42602 8.00921 2.11437 5.0744L2.10908 5.02462L2.09885 4.97561Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.web.test.tsx.snap
index dcdcc5a9eae..f1ac4ba4b84 100644
--- a/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<PhoneIncomingIcon /> should render PhoneIncomingIcon 1`] = `
     <path
       d="M22.7071 2.70711L17.4142 8H21C21.5523 8 22 8.44772 22 9C22 9.55228 21.5523 10 21 10H15.0007L14.997 10C14.7421 9.99924 14.4874 9.90161 14.2929 9.70711C14.197 9.61123 14.1247 9.50073 14.0759 9.38278C14.027 9.26488 14 9.13559 14 9V3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V6.58579L21.2929 1.29289C21.6834 0.902369 22.3166 0.902369 22.7071 1.29289C23.0976 1.68342 23.0976 2.31658 22.7071 2.70711Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M2.99996 2C2.28482 2 1.47945 2.25294 0.883051 2.8182C0.253692 3.41469 -0.0695435 4.2942 0.130507 5.3318C0.480716 8.56092 1.58268 11.6633 3.34828 14.39C4.96126 16.9272 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.5631 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9896 20.3527 23.7273 20.9683 23.1922C21.4415 22.8538 22 22.1 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8998L19.4107 14.8986C18.5258 14.7819 17.6569 14.5655 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51066 10.1579 8.27536 9.74647 7.17935C9.43449 6.34306 9.21809 5.47417 9.10137 4.58924L9.09536 4.54368L9.0852 4.49887C8.98842 4.07204 8.74141 3.47998 8.28724 2.97575C7.81222 2.44835 7.0887 2 6.10996 2H2.99996ZM2.09885 4.97561C2.01626 4.58008 2.13282 4.38926 2.25886 4.2698C2.42845 4.10906 2.71509 4 2.99996 4H6.10996C6.41921 4 6.6307 4.12499 6.80117 4.31425C6.97819 4.51078 7.08472 4.75483 7.12598 4.90627C7.26412 5.92193 7.51467 6.91916 7.87306 7.8796L7.87391 7.88186C8.011 8.24658 7.92376 8.65764 7.65052 8.93522L6.38285 10.2029C6.06454 10.5212 5.99815 11.013 6.22066 11.4043C7.73319 14.0643 9.93565 16.2668 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.989 16.1181 16.1261L16.1204 16.1269C17.0966 16.4912 18.1109 16.7441 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2133 19.944 21.3589 19.891 21.4506C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8149 21.5548 19.8133 21.5564 19.8119 21.5579C19.8095 21.5603 19.8075 21.5623 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3137L5.02924 13.3063C3.42461 10.8293 2.42602 8.00921 2.11437 5.0744L2.10908 5.02462L2.09885 4.97561Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PhoneMissedIcon/PhoneMissedIcon.native.test.tsx b/packages/blade/src/components/Icons/PhoneMissedIcon/PhoneMissedIcon.native.test.tsx
index 6dd777caf4e..cf37bc9c0d2 100644
--- a/packages/blade/src/components/Icons/PhoneMissedIcon/PhoneMissedIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneMissedIcon/PhoneMissedIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PhoneMissedIcon />', () => {
   it('should render PhoneMissedIcon', () => {
     const renderTree = renderWithTheme(
-      <PhoneMissedIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneMissedIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneMissedIcon/PhoneMissedIcon.web.test.tsx b/packages/blade/src/components/Icons/PhoneMissedIcon/PhoneMissedIcon.web.test.tsx
index 0daa55e7959..6e4b033a7c3 100644
--- a/packages/blade/src/components/Icons/PhoneMissedIcon/PhoneMissedIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneMissedIcon/PhoneMissedIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PhoneMissedIcon />', () => {
   it('should render PhoneMissedIcon', () => {
     const { container } = renderWithTheme(
-      <PhoneMissedIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneMissedIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.native.test.tsx.snap
index 3059c7740a3..b1adad5d8e7 100644
--- a/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PhoneMissedIcon /> should render PhoneMissedIcon 1`] = `
     >
       <RNSVGPath
         d="M21.2929 1.29289C21.6834 0.902369 22.3166 0.902369 22.7071 1.29289C23.0976 1.68342 23.0976 2.31658 22.7071 2.70711L20.4142 5L22.7071 7.29289C23.0976 7.68342 23.0976 8.31658 22.7071 8.70711C22.3166 9.09763 21.6834 9.09763 21.2929 8.70711L19 6.41421L16.7071 8.70711C16.3166 9.09763 15.6834 9.09763 15.2929 8.70711C14.9024 8.31658 14.9024 7.68342 15.2929 7.29289L17.5858 5L15.2929 2.70711C14.9024 2.31658 14.9024 1.68342 15.2929 1.29289C15.6834 0.902369 16.3166 0.902369 16.7071 1.29289L19 3.58579L21.2929 1.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<PhoneMissedIcon /> should render PhoneMissedIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2.99996 2C2.28482 2 1.47945 2.25294 0.883051 2.8182C0.253692 3.41469 -0.0695435 4.2942 0.130507 5.3318C0.480716 8.56092 1.58268 11.6633 3.34828 14.39C4.96126 16.9272 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.5631 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9896 20.3527 23.7273 20.9683 23.1922C21.4415 22.8538 22 22.1 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8998L19.4107 14.8986C18.5258 14.7819 17.6569 14.5655 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51066 10.1579 8.27536 9.74647 7.17935C9.43449 6.34306 9.21809 5.47417 9.10137 4.58924L9.09536 4.54368L9.0852 4.49887C8.98842 4.07204 8.74141 3.47998 8.28724 2.97575C7.81222 2.44835 7.0887 2 6.10996 2H2.99996ZM2.09885 4.97561C2.01626 4.58008 2.13282 4.38926 2.25886 4.2698C2.42845 4.10906 2.71509 4 2.99996 4H6.10996C6.41921 4 6.6307 4.12499 6.80117 4.31425C6.97819 4.51078 7.08472 4.75483 7.12598 4.90627C7.26412 5.92193 7.51467 6.91916 7.87306 7.8796L7.87391 7.88186C8.011 8.24658 7.92376 8.65764 7.65052 8.93522L6.38285 10.2029C6.06454 10.5212 5.99815 11.013 6.22066 11.4043C7.73319 14.0643 9.93565 16.2668 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.989 16.1181 16.1261L16.1204 16.1269C17.0966 16.4912 18.1109 16.7441 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2133 19.944 21.3589 19.891 21.4506C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8149 21.5548 19.8133 21.5564 19.8119 21.5579C19.8095 21.5603 19.8075 21.5623 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3137L5.02924 13.3063C3.42461 10.8293 2.42602 8.00921 2.11437 5.0744L2.10908 5.02462L2.09885 4.97561Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.web.test.tsx.snap
index cc48392c618..d9ccf781bab 100644
--- a/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<PhoneMissedIcon /> should render PhoneMissedIcon 1`] = `
     <path
       d="M21.2929 1.29289C21.6834 0.902369 22.3166 0.902369 22.7071 1.29289C23.0976 1.68342 23.0976 2.31658 22.7071 2.70711L20.4142 5L22.7071 7.29289C23.0976 7.68342 23.0976 8.31658 22.7071 8.70711C22.3166 9.09763 21.6834 9.09763 21.2929 8.70711L19 6.41421L16.7071 8.70711C16.3166 9.09763 15.6834 9.09763 15.2929 8.70711C14.9024 8.31658 14.9024 7.68342 15.2929 7.29289L17.5858 5L15.2929 2.70711C14.9024 2.31658 14.9024 1.68342 15.2929 1.29289C15.6834 0.902369 16.3166 0.902369 16.7071 1.29289L19 3.58579L21.2929 1.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M2.99996 2C2.28482 2 1.47945 2.25294 0.883051 2.8182C0.253692 3.41469 -0.0695435 4.2942 0.130507 5.3318C0.480716 8.56092 1.58268 11.6633 3.34828 14.39C4.96126 16.9272 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.5631 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9896 20.3527 23.7273 20.9683 23.1922C21.4415 22.8538 22 22.1 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8998L19.4107 14.8986C18.5258 14.7819 17.6569 14.5655 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51066 10.1579 8.27536 9.74647 7.17935C9.43449 6.34306 9.21809 5.47417 9.10137 4.58924L9.09536 4.54368L9.0852 4.49887C8.98842 4.07204 8.74141 3.47998 8.28724 2.97575C7.81222 2.44835 7.0887 2 6.10996 2H2.99996ZM2.09885 4.97561C2.01626 4.58008 2.13282 4.38926 2.25886 4.2698C2.42845 4.10906 2.71509 4 2.99996 4H6.10996C6.41921 4 6.6307 4.12499 6.80117 4.31425C6.97819 4.51078 7.08472 4.75483 7.12598 4.90627C7.26412 5.92193 7.51467 6.91916 7.87306 7.8796L7.87391 7.88186C8.011 8.24658 7.92376 8.65764 7.65052 8.93522L6.38285 10.2029C6.06454 10.5212 5.99815 11.013 6.22066 11.4043C7.73319 14.0643 9.93565 16.2668 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.989 16.1181 16.1261L16.1204 16.1269C17.0966 16.4912 18.1109 16.7441 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2133 19.944 21.3589 19.891 21.4506C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8149 21.5548 19.8133 21.5564 19.8119 21.5579C19.8095 21.5603 19.8075 21.5623 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3137L5.02924 13.3063C3.42461 10.8293 2.42602 8.00921 2.11437 5.0744L2.10908 5.02462L2.09885 4.97561Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PhoneOffIcon/PhoneOffIcon.native.test.tsx b/packages/blade/src/components/Icons/PhoneOffIcon/PhoneOffIcon.native.test.tsx
index f3bc63a576a..ad7aae60a6c 100644
--- a/packages/blade/src/components/Icons/PhoneOffIcon/PhoneOffIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneOffIcon/PhoneOffIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PhoneOffIcon />', () => {
   it('should render PhoneOffIcon', () => {
     const renderTree = renderWithTheme(
-      <PhoneOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneOffIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneOffIcon/PhoneOffIcon.web.test.tsx b/packages/blade/src/components/Icons/PhoneOffIcon/PhoneOffIcon.web.test.tsx
index 3b49004b1fc..2f67fc83f17 100644
--- a/packages/blade/src/components/Icons/PhoneOffIcon/PhoneOffIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneOffIcon/PhoneOffIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PhoneOffIcon />', () => {
   it('should render PhoneOffIcon', () => {
     const { container } = renderWithTheme(
-      <PhoneOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneOffIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.native.test.tsx.snap
index 76e10f4807c..14ea9cb418e 100644
--- a/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M23.7071 1.70711C24.0976 1.31658 24.0976 0.683417 23.7071 0.292893C23.3166 -0.0976311 22.6834 -0.0976311 22.2929 0.292893L10.0624 12.5234C10.0315 12.5477 10.0017 12.5741 9.97321 12.6026C9.9445 12.6313 9.91791 12.6613 9.89342 12.6924L0.292893 22.2929C-0.0976311 22.6834 -0.0976311 23.3166 0.292893 23.7071C0.683417 24.0976 1.31658 24.0976 1.70711 23.7071L7.87171 17.5425C8.73506 18.3265 9.66444 19.0356 10.6498 19.6616C13.3771 21.4293 16.4809 22.5331 19.712 22.8842L19.73 22.8859C20.5399 22.9591 21.3434 22.7003 21.9576 22.1714C22.4472 21.8367 23 21.0933 23 20V16.8943C23.0121 15.3909 21.9092 14.1103 20.42 13.8998L20.4108 13.8986C19.5258 13.7819 18.6568 13.5654 17.8205 13.2534C16.7245 12.8421 15.4893 13.1058 14.6569 13.929L14.6529 13.9329L13.9358 14.65C13.298 14.2434 12.6919 13.7892 12.1228 13.2914L23.7071 1.70711ZM10.7058 14.7084L9.28774 16.1265C10.0474 16.8091 10.8629 17.4278 11.726 17.9758L11.7341 17.9809C14.197 19.5781 16.9997 20.576 19.9176 20.8947C20.1954 20.9177 20.4704 20.8236 20.6761 20.635C20.7227 20.5922 20.7734 20.5539 20.8273 20.5207L20.8321 20.5159C20.8476 20.5001 20.8719 20.4715 20.897 20.4291C20.9444 20.3493 21 20.2127 21 20V16.8802C21.0049 16.3795 20.6389 15.9525 20.1438 15.8807C19.1108 15.744 18.0966 15.4912 17.1204 15.1269L17.1181 15.1261C16.7534 14.989 16.3424 15.0762 16.0648 15.3494L14.7971 16.6171C14.4788 16.9354 13.987 17.0018 13.5957 16.7793C12.5619 16.1915 11.5934 15.4972 10.7058 14.7084Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -66,7 +66,7 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
         />
         <RNSVGPath
           d="M7.11985 2.99996C7.62052 2.99503 8.04746 3.36111 8.11931 3.85623C8.25597 4.88918 8.50883 5.9034 8.87311 6.87961L8.87395 6.88187C9.01105 7.24659 8.92381 7.65765 8.65057 7.93523L7.3829 9.2029C6.99237 9.59343 6.99237 10.2266 7.3829 10.6171C7.77342 11.0076 8.40659 11.0076 8.79711 10.6171L10.0671 9.34713L10.0711 9.34315C10.8943 8.51066 11.158 7.27537 10.7465 6.17936C10.4345 5.34307 10.2182 4.47417 10.1015 3.58924L10.1002 3.58006C9.88967 2.09079 8.60903 0.987878 7.10557 1.00001L4.10906 1.00001C3.26695 1.0008 2.46395 1.35549 1.89621 1.97744C1.32847 2.59939 1.04827 3.43132 1.12406 4.27001L1.12586 4.28803C1.47711 7.52069 2.58174 10.6259 4.35099 13.3541C4.65148 13.8175 5.27073 13.9495 5.73411 13.649C6.19748 13.3485 6.32952 12.7293 6.02902 12.2659C4.43188 9.80307 3.43399 7.00034 3.11529 4.08242C3.09238 3.80543 3.1858 3.53126 3.37333 3.32582C3.56248 3.1186 3.82998 3.00039 4.11053 3.00001L7.11 3.00006L7.11985 2.99996Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -79,7 +79,7 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
           name="clip0_59_166"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.web.test.tsx.snap
index 0a0ec249cf3..5f8bff180cd 100644
--- a/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.web.test.tsx.snap
@@ -19,13 +19,13 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
         clip-rule="evenodd"
         d="M23.7071 1.70711C24.0976 1.31658 24.0976 0.683417 23.7071 0.292893C23.3166 -0.0976311 22.6834 -0.0976311 22.2929 0.292893L10.0624 12.5234C10.0315 12.5477 10.0017 12.5741 9.97321 12.6026C9.9445 12.6313 9.91791 12.6613 9.89342 12.6924L0.292893 22.2929C-0.0976311 22.6834 -0.0976311 23.3166 0.292893 23.7071C0.683417 24.0976 1.31658 24.0976 1.70711 23.7071L7.87171 17.5425C8.73506 18.3265 9.66444 19.0356 10.6498 19.6616C13.3771 21.4293 16.4809 22.5331 19.712 22.8842L19.73 22.8859C20.5399 22.9591 21.3434 22.7003 21.9576 22.1714C22.4472 21.8367 23 21.0933 23 20V16.8943C23.0121 15.3909 21.9092 14.1103 20.42 13.8998L20.4108 13.8986C19.5258 13.7819 18.6568 13.5654 17.8205 13.2534C16.7245 12.8421 15.4893 13.1058 14.6569 13.929L14.6529 13.9329L13.9358 14.65C13.298 14.2434 12.6919 13.7892 12.1228 13.2914L23.7071 1.70711ZM10.7058 14.7084L9.28774 16.1265C10.0474 16.8091 10.8629 17.4278 11.726 17.9758L11.7341 17.9809C14.197 19.5781 16.9997 20.576 19.9176 20.8947C20.1954 20.9177 20.4704 20.8236 20.6761 20.635C20.7227 20.5922 20.7734 20.5539 20.8273 20.5207L20.8321 20.5159C20.8476 20.5001 20.8719 20.4715 20.897 20.4291C20.9444 20.3493 21 20.2127 21 20V16.8802C21.0049 16.3795 20.6389 15.9525 20.1438 15.8807C19.1108 15.744 18.0966 15.4912 17.1204 15.1269L17.1181 15.1261C16.7534 14.989 16.3424 15.0762 16.0648 15.3494L14.7971 16.6171C14.4788 16.9354 13.987 17.0018 13.5957 16.7793C12.5619 16.1915 11.5934 15.4972 10.7058 14.7084Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         d="M7.11985 2.99996C7.62052 2.99503 8.04746 3.36111 8.11931 3.85623C8.25597 4.88918 8.50883 5.9034 8.87311 6.87961L8.87395 6.88187C9.01105 7.24659 8.92381 7.65765 8.65057 7.93523L7.3829 9.2029C6.99237 9.59343 6.99237 10.2266 7.3829 10.6171C7.77342 11.0076 8.40659 11.0076 8.79711 10.6171L10.0671 9.34713L10.0711 9.34315C10.8943 8.51066 11.158 7.27537 10.7465 6.17936C10.4345 5.34307 10.2182 4.47417 10.1015 3.58924L10.1002 3.58006C9.88967 2.09079 8.60903 0.987878 7.10557 1.00001L4.10906 1.00001C3.26695 1.0008 2.46395 1.35549 1.89621 1.97744C1.32847 2.59939 1.04827 3.43132 1.12406 4.27001L1.12586 4.28803C1.47711 7.52069 2.58174 10.6259 4.35099 13.3541C4.65148 13.8175 5.27073 13.9495 5.73411 13.649C6.19748 13.3485 6.32952 12.7293 6.02902 12.2659C4.43188 9.80307 3.43399 7.00034 3.11529 4.08242C3.09238 3.80543 3.1858 3.53126 3.37333 3.32582C3.56248 3.1186 3.82998 3.00039 4.11053 3.00001L7.11 3.00006L7.11985 2.99996Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -37,7 +37,7 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/PhoneOutgoingIcon/PhoneOutgoingIcon.native.test.tsx b/packages/blade/src/components/Icons/PhoneOutgoingIcon/PhoneOutgoingIcon.native.test.tsx
index 98c7f4dbceb..8f495f919dc 100644
--- a/packages/blade/src/components/Icons/PhoneOutgoingIcon/PhoneOutgoingIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneOutgoingIcon/PhoneOutgoingIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PhoneOutgoingIcon />', () => {
   it('should render PhoneOutgoingIcon', () => {
     const renderTree = renderWithTheme(
-      <PhoneOutgoingIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneOutgoingIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneOutgoingIcon/PhoneOutgoingIcon.web.test.tsx b/packages/blade/src/components/Icons/PhoneOutgoingIcon/PhoneOutgoingIcon.web.test.tsx
index d900865909a..26771559259 100644
--- a/packages/blade/src/components/Icons/PhoneOutgoingIcon/PhoneOutgoingIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PhoneOutgoingIcon/PhoneOutgoingIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PhoneOutgoingIcon />', () => {
   it('should render PhoneOutgoingIcon', () => {
     const { container } = renderWithTheme(
-      <PhoneOutgoingIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PhoneOutgoingIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.native.test.tsx.snap
index 4ce87bbd0f4..06462b82603 100644
--- a/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PhoneOutgoingIcon /> should render PhoneOutgoingIcon 1`] = `
     >
       <RNSVGPath
         d="M15 2C15 1.44772 15.4477 1 16 1H22C22.5523 1 23 1.44772 23 2V8C23 8.55228 22.5523 9 22 9C21.4477 9 21 8.55228 21 8V4.41421L15.7071 9.70711C15.3166 10.0976 14.6834 10.0976 14.2929 9.70711C13.9024 9.31658 13.9024 8.68342 14.2929 8.29289L19.5858 3H16C15.4477 3 15 2.55228 15 2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<PhoneOutgoingIcon /> should render PhoneOutgoingIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2.99996 2C2.28482 2 1.47945 2.25294 0.883051 2.8182C0.253692 3.41469 -0.0695435 4.2942 0.130507 5.3318C0.480716 8.56092 1.58268 11.6633 3.34828 14.39C4.96126 16.9272 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.5631 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9896 20.3527 23.7273 20.9683 23.1922C21.4415 22.8538 22 22.1 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8998L19.4107 14.8986C18.5258 14.7819 17.6569 14.5655 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51066 10.1579 8.27536 9.74647 7.17935C9.43449 6.34306 9.21809 5.47417 9.10137 4.58924L9.09536 4.54368L9.0852 4.49887C8.98842 4.07204 8.74141 3.47998 8.28724 2.97575C7.81222 2.44835 7.0887 2 6.10996 2H2.99996ZM2.09885 4.97561C2.01626 4.58008 2.13282 4.38926 2.25886 4.2698C2.42845 4.10906 2.71509 4 2.99996 4H6.10996C6.41921 4 6.6307 4.12499 6.80117 4.31425C6.97819 4.51078 7.08472 4.75483 7.12598 4.90627C7.26412 5.92193 7.51467 6.91916 7.87306 7.8796L7.87391 7.88186C8.011 8.24658 7.92376 8.65764 7.65052 8.93522L6.38285 10.2029C6.06454 10.5212 5.99815 11.013 6.22066 11.4043C7.73319 14.0643 9.93565 16.2668 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.989 16.1181 16.1261L16.1204 16.1269C17.0966 16.4912 18.1109 16.7441 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2133 19.944 21.3589 19.891 21.4506C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8149 21.5548 19.8133 21.5564 19.8119 21.5579C19.8095 21.5603 19.8075 21.5623 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3137L5.02924 13.3063C3.42461 10.8293 2.42602 8.00921 2.11437 5.0744L2.10908 5.02462L2.09885 4.97561Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.web.test.tsx.snap
index f7e22b423b0..b0eb6f9dac3 100644
--- a/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<PhoneOutgoingIcon /> should render PhoneOutgoingIcon 1`] = `
     <path
       d="M15 2C15 1.44772 15.4477 1 16 1H22C22.5523 1 23 1.44772 23 2V8C23 8.55228 22.5523 9 22 9C21.4477 9 21 8.55228 21 8V4.41421L15.7071 9.70711C15.3166 10.0976 14.6834 10.0976 14.2929 9.70711C13.9024 9.31658 13.9024 8.68342 14.2929 8.29289L19.5858 3H16C15.4477 3 15 2.55228 15 2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M2.99996 2C2.28482 2 1.47945 2.25294 0.883051 2.8182C0.253692 3.41469 -0.0695435 4.2942 0.130507 5.3318C0.480716 8.56092 1.58268 11.6633 3.34828 14.39C4.96126 16.9272 7.11256 19.0785 9.64971 20.6915C12.377 22.4593 15.4808 23.5631 18.7119 23.9141L18.7209 23.9151L18.73 23.9159C19.5446 23.9896 20.3527 23.7273 20.9683 23.1922C21.4415 22.8538 22 22.1 22 21V17.9312C22.0308 16.4142 20.9235 15.1119 19.4197 14.8998L19.4107 14.8986C18.5258 14.7819 17.6569 14.5655 16.8206 14.2535C15.7246 13.842 14.4893 14.1057 13.6568 14.9289L13.6529 14.9329L12.9358 15.65C11.0911 14.4741 9.52583 12.9088 8.34997 11.0642L9.06708 10.3471L9.07101 10.3431C9.89423 9.51066 10.1579 8.27536 9.74647 7.17935C9.43449 6.34306 9.21809 5.47417 9.10137 4.58924L9.09536 4.54368L9.0852 4.49887C8.98842 4.07204 8.74141 3.47998 8.28724 2.97575C7.81222 2.44835 7.0887 2 6.10996 2H2.99996ZM2.09885 4.97561C2.01626 4.58008 2.13282 4.38926 2.25886 4.2698C2.42845 4.10906 2.71509 4 2.99996 4H6.10996C6.41921 4 6.6307 4.12499 6.80117 4.31425C6.97819 4.51078 7.08472 4.75483 7.12598 4.90627C7.26412 5.92193 7.51467 6.91916 7.87306 7.8796L7.87391 7.88186C8.011 8.24658 7.92376 8.65764 7.65052 8.93522L6.38285 10.2029C6.06454 10.5212 5.99815 11.013 6.22066 11.4043C7.73319 14.0643 9.93565 16.2668 12.5957 17.7793C12.987 18.0018 13.4788 17.9354 13.7971 17.6171L15.0647 16.3494C15.3423 16.0762 15.7534 15.989 16.1181 16.1261L16.1204 16.1269C17.0966 16.4912 18.1109 16.7441 19.1439 16.8807C19.6448 16.9532 20.0128 17.3888 20.0003 17.8952L20 17.9076V21C20 21.2133 19.944 21.3589 19.891 21.4506C19.8634 21.4985 19.8359 21.5325 19.8166 21.553C19.8149 21.5548 19.8133 21.5564 19.8119 21.5579C19.8095 21.5603 19.8075 21.5623 19.8058 21.5639L19.7452 21.6015L19.676 21.665C19.4704 21.8536 19.1954 21.9477 18.9175 21.9247C15.9996 21.606 13.1969 20.6081 10.7341 19.0109L10.7263 19.006C8.43401 17.5494 6.4906 15.6059 5.034 13.3137L5.02924 13.3063C3.42461 10.8293 2.42602 8.00921 2.11437 5.0744L2.10908 5.02462L2.09885 4.97561Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PieChartIcon/PieChartIcon.native.test.tsx b/packages/blade/src/components/Icons/PieChartIcon/PieChartIcon.native.test.tsx
index fa957eb7617..f6a5a029bfc 100644
--- a/packages/blade/src/components/Icons/PieChartIcon/PieChartIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PieChartIcon/PieChartIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PieChartIcon />', () => {
   it('should render PieChartIcon', () => {
     const renderTree = renderWithTheme(
-      <PieChartIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PieChartIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PieChartIcon/PieChartIcon.web.test.tsx b/packages/blade/src/components/Icons/PieChartIcon/PieChartIcon.web.test.tsx
index 20015436e68..26ccdd6827f 100644
--- a/packages/blade/src/components/Icons/PieChartIcon/PieChartIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PieChartIcon/PieChartIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PieChartIcon />', () => {
   it('should render PieChartIcon', () => {
     const { container } = renderWithTheme(
-      <PieChartIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PieChartIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.native.test.tsx.snap
index ec8ce1f9d80..43c52c54836 100644
--- a/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PieChartIcon /> should render PieChartIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 1C11.7348 1 11.4804 1.10536 11.2929 1.29289C11.1054 1.48043 11 1.73478 11 2V12C11 12.5523 11.4477 13 12 13H22C22.5523 13 23 12.5523 23 12C23 9.08262 21.8411 6.28473 19.7782 4.22183C17.7153 2.15893 14.9174 1 12 1ZM13 11V3.0557C15.019 3.28137 16.9135 4.18561 18.364 5.63604C19.8144 7.08647 20.7186 8.98098 20.9443 11H13Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<PieChartIcon /> should render PieChartIcon 1`] = `
       />
       <RNSVGPath
         d="M8.39997 3.74656C8.90615 3.52567 9.13743 2.93625 8.91654 2.43007C8.69565 1.92388 8.10623 1.6926 7.60005 1.91349C3.06956 3.89052 0.414221 8.64678 1.10871 13.5408C1.8032 18.4349 5.67694 22.2646 10.5786 22.9032C15.4803 23.5417 20.2059 20.8323 22.131 16.2795C22.3461 15.7708 22.1082 15.1841 21.5995 14.969C21.0908 14.7539 20.5041 14.9919 20.289 15.5006C18.7138 19.2256 14.8474 21.4424 10.837 20.9199C6.82652 20.3975 3.65709 17.2641 3.08887 13.2598C2.52065 9.25562 4.6932 5.36413 8.39997 3.74656Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.web.test.tsx.snap
index 90e46d31b8f..081465cd83f 100644
--- a/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<PieChartIcon /> should render PieChartIcon 1`] = `
       clip-rule="evenodd"
       d="M12 1C11.7348 1 11.4804 1.10536 11.2929 1.29289C11.1054 1.48043 11 1.73478 11 2V12C11 12.5523 11.4477 13 12 13H22C22.5523 13 23 12.5523 23 12C23 9.08262 21.8411 6.28473 19.7782 4.22183C17.7153 2.15893 14.9174 1 12 1ZM13 11V3.0557C15.019 3.28137 16.9135 4.18561 18.364 5.63604C19.8144 7.08647 20.7186 8.98098 20.9443 11H13Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M8.39997 3.74656C8.90615 3.52567 9.13743 2.93625 8.91654 2.43007C8.69565 1.92388 8.10623 1.6926 7.60005 1.91349C3.06956 3.89052 0.414221 8.64678 1.10871 13.5408C1.8032 18.4349 5.67694 22.2646 10.5786 22.9032C15.4803 23.5417 20.2059 20.8323 22.131 16.2795C22.3461 15.7708 22.1082 15.1841 21.5995 14.969C21.0908 14.7539 20.5041 14.9919 20.289 15.5006C18.7138 19.2256 14.8474 21.4424 10.837 20.9199C6.82652 20.3975 3.65709 17.2641 3.08887 13.2598C2.52065 9.25562 4.6932 5.36413 8.39997 3.74656Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/PlayCircleIcon/PlayCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/PlayCircleIcon/PlayCircleIcon.native.test.tsx
index 3adbd086c89..dea34c40e62 100644
--- a/packages/blade/src/components/Icons/PlayCircleIcon/PlayCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PlayCircleIcon/PlayCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PlayCircleIcon />', () => {
   it('should render PlayCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <PlayCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlayCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlayCircleIcon/PlayCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/PlayCircleIcon/PlayCircleIcon.web.test.tsx
index eff9709c2e2..57500955193 100644
--- a/packages/blade/src/components/Icons/PlayCircleIcon/PlayCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PlayCircleIcon/PlayCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PlayCircleIcon />', () => {
   it('should render PlayCircleIcon', () => {
     const { container } = renderWithTheme(
-      <PlayCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlayCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.native.test.tsx.snap
index d0511f74fa1..ca493872764 100644
--- a/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PlayCircleIcon /> should render PlayCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M10.5547 7.16795C10.2478 6.96338 9.8533 6.94431 9.52814 7.11833C9.20298 7.29235 9 7.63121 9 8V16C9 16.3688 9.20298 16.7077 9.52814 16.8817C9.8533 17.0557 10.2478 17.0366 10.5547 16.8321L16.5547 12.8321C16.8329 12.6466 17 12.3344 17 12C17 11.6656 16.8329 11.3534 16.5547 11.168L10.5547 7.16795ZM14.1972 12L11 14.1315V9.86852L14.1972 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<PlayCircleIcon /> should render PlayCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.web.test.tsx.snap
index c5b9f27d178..6982f73a185 100644
--- a/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<PlayCircleIcon /> should render PlayCircleIcon 1`] = `
       clip-rule="evenodd"
       d="M10.5547 7.16795C10.2478 6.96338 9.8533 6.94431 9.52814 7.11833C9.20298 7.29235 9 7.63121 9 8V16C9 16.3688 9.20298 16.7077 9.52814 16.8817C9.8533 17.0557 10.2478 17.0366 10.5547 16.8321L16.5547 12.8321C16.8329 12.6466 17 12.3344 17 12C17 11.6656 16.8329 11.3534 16.5547 11.168L10.5547 7.16795ZM14.1972 12L11 14.1315V9.86852L14.1972 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PlayIcon/PlayIcon.native.test.tsx b/packages/blade/src/components/Icons/PlayIcon/PlayIcon.native.test.tsx
index 27aeec74932..4ebe4cd9410 100644
--- a/packages/blade/src/components/Icons/PlayIcon/PlayIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PlayIcon/PlayIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PlayIcon />', () => {
   it('should render PlayIcon', () => {
     const renderTree = renderWithTheme(
-      <PlayIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlayIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlayIcon/PlayIcon.web.test.tsx b/packages/blade/src/components/Icons/PlayIcon/PlayIcon.web.test.tsx
index 76faeb256d1..843438224c9 100644
--- a/packages/blade/src/components/Icons/PlayIcon/PlayIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PlayIcon/PlayIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PlayIcon />', () => {
   it('should render PlayIcon', () => {
     const { container } = renderWithTheme(
-      <PlayIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlayIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.native.test.tsx.snap
index 3242b6407fe..353cbf79ffc 100644
--- a/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PlayIcon /> should render PlayIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M4.52081 2.12229C4.84189 1.947 5.23305 1.96101 5.54076 2.15882L19.5408 11.1588C19.827 11.3428 20 11.6597 20 12C20 12.3403 19.827 12.6572 19.5408 12.8412L5.54076 21.8412C5.23305 22.039 4.84189 22.053 4.52081 21.8777C4.19974 21.7024 4 21.3658 4 21V3C4 2.63419 4.19974 2.29758 4.52081 2.12229ZM6 4.83167V19.1683L17.1507 12L6 4.83167Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.web.test.tsx.snap
index 2e0fb4808fd..111a5483dfd 100644
--- a/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<PlayIcon /> should render PlayIcon 1`] = `
       clip-rule="evenodd"
       d="M4.52081 2.12229C4.84189 1.947 5.23305 1.96101 5.54076 2.15882L19.5408 11.1588C19.827 11.3428 20 11.6597 20 12C20 12.3403 19.827 12.6572 19.5408 12.8412L5.54076 21.8412C5.23305 22.039 4.84189 22.053 4.52081 21.8777C4.19974 21.7024 4 21.3658 4 21V3C4 2.63419 4.19974 2.29758 4.52081 2.12229ZM6 4.83167V19.1683L17.1507 12L6 4.83167Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PlusCircleIcon/PlusCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/PlusCircleIcon/PlusCircleIcon.native.test.tsx
index d16ff9385d7..5224b11e0d3 100644
--- a/packages/blade/src/components/Icons/PlusCircleIcon/PlusCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PlusCircleIcon/PlusCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PlusCircleIcon />', () => {
   it('should render PlusCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <PlusCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlusCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlusCircleIcon/PlusCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/PlusCircleIcon/PlusCircleIcon.web.test.tsx
index d3935a9e782..3b26921f2aa 100644
--- a/packages/blade/src/components/Icons/PlusCircleIcon/PlusCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PlusCircleIcon/PlusCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PlusCircleIcon />', () => {
   it('should render PlusCircleIcon', () => {
     const { container } = renderWithTheme(
-      <PlusCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlusCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.native.test.tsx.snap
index b59e9677c32..6a64163437a 100644
--- a/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PlusCircleIcon /> should render PlusCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.web.test.tsx.snap
index cfd72705191..2986628a6e3 100644
--- a/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<PlusCircleIcon /> should render PlusCircleIcon 1`] = `
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PlusIcon/PlusIcon.native.test.tsx b/packages/blade/src/components/Icons/PlusIcon/PlusIcon.native.test.tsx
index 0eebb7cb07b..9594c588bc9 100644
--- a/packages/blade/src/components/Icons/PlusIcon/PlusIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PlusIcon/PlusIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PlusIcon />', () => {
   it('should render PlusIcon', () => {
     const renderTree = renderWithTheme(
-      <PlusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlusIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlusIcon/PlusIcon.web.test.tsx b/packages/blade/src/components/Icons/PlusIcon/PlusIcon.web.test.tsx
index 0e9a5595c6b..16482fa6afe 100644
--- a/packages/blade/src/components/Icons/PlusIcon/PlusIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PlusIcon/PlusIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PlusIcon />', () => {
   it('should render PlusIcon', () => {
     const { container } = renderWithTheme(
-      <PlusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlusIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.native.test.tsx.snap
index b9f39c809dd..6c2d4c0e9bb 100644
--- a/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PlusIcon /> should render PlusIcon 1`] = `
     >
       <RNSVGPath
         d="M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.web.test.tsx.snap
index ddb5a1e2df2..c79fb98ce42 100644
--- a/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<PlusIcon /> should render PlusIcon 1`] = `
     <path
       d="M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/PlusSquareIcon/PlusSquareIcon.native.test.tsx b/packages/blade/src/components/Icons/PlusSquareIcon/PlusSquareIcon.native.test.tsx
index 7430b2b26c1..9a0398858e2 100644
--- a/packages/blade/src/components/Icons/PlusSquareIcon/PlusSquareIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PlusSquareIcon/PlusSquareIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PlusSquareIcon />', () => {
   it('should render PlusSquareIcon', () => {
     const renderTree = renderWithTheme(
-      <PlusSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlusSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlusSquareIcon/PlusSquareIcon.web.test.tsx b/packages/blade/src/components/Icons/PlusSquareIcon/PlusSquareIcon.web.test.tsx
index 40916fe0d99..dabcd1c0f15 100644
--- a/packages/blade/src/components/Icons/PlusSquareIcon/PlusSquareIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PlusSquareIcon/PlusSquareIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PlusSquareIcon />', () => {
   it('should render PlusSquareIcon', () => {
     const { container } = renderWithTheme(
-      <PlusSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PlusSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.native.test.tsx.snap
index 0e35efb5897..d3092689471 100644
--- a/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PlusSquareIcon /> should render PlusSquareIcon 1`] = `
     >
       <RNSVGPath
         d="M12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<PlusSquareIcon /> should render PlusSquareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.web.test.tsx.snap
index 4f63c65f628..cf9dd6f3c65 100644
--- a/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<PlusSquareIcon /> should render PlusSquareIcon 1`] = `
     <path
       d="M12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PocketIcon/PocketIcon.native.test.tsx b/packages/blade/src/components/Icons/PocketIcon/PocketIcon.native.test.tsx
index d3b8f491a05..49b1c0c1c5e 100644
--- a/packages/blade/src/components/Icons/PocketIcon/PocketIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PocketIcon/PocketIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PocketIcon />', () => {
   it('should render PocketIcon', () => {
     const renderTree = renderWithTheme(
-      <PocketIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PocketIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PocketIcon/PocketIcon.web.test.tsx b/packages/blade/src/components/Icons/PocketIcon/PocketIcon.web.test.tsx
index 3583c7a33ab..c71a9a88111 100644
--- a/packages/blade/src/components/Icons/PocketIcon/PocketIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PocketIcon/PocketIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PocketIcon />', () => {
   it('should render PocketIcon', () => {
     const { container } = renderWithTheme(
-      <PocketIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PocketIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.native.test.tsx.snap
index f7d3ca2d201..1d01fbd7296 100644
--- a/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PocketIcon /> should render PocketIcon 1`] = `
     >
       <RNSVGPath
         d="M8.70711 9.29289C8.31658 8.90237 7.68342 8.90237 7.29289 9.29289C6.90237 9.68342 6.90237 10.3166 7.29289 10.7071L11.2929 14.7071C11.6834 15.0976 12.3166 15.0976 12.7071 14.7071L16.7071 10.7071C17.0976 10.3166 17.0976 9.68342 16.7071 9.29289C16.3166 8.90237 15.6834 8.90237 15.2929 9.29289L12 12.5858L8.70711 9.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<PocketIcon /> should render PocketIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M4 2C2.34315 2 1 3.34315 1 5V11C1 13.9174 2.15893 16.7153 4.22183 18.7782C6.28473 20.8411 9.08262 22 12 22C18.0751 22 23 17.0751 23 11V5C23 3.34315 21.6569 2 20 2H4ZM3 5C3 4.44772 3.44772 4 4 4H20C20.5523 4 21 4.44772 21 5V11C21 15.9706 16.9706 20 12 20C9.61305 20 7.32387 19.0518 5.63604 17.364C3.94821 15.6761 3 13.3869 3 11V5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.web.test.tsx.snap
index 0d29edf5056..b09e0c5feee 100644
--- a/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<PocketIcon /> should render PocketIcon 1`] = `
     <path
       d="M8.70711 9.29289C8.31658 8.90237 7.68342 8.90237 7.29289 9.29289C6.90237 9.68342 6.90237 10.3166 7.29289 10.7071L11.2929 14.7071C11.6834 15.0976 12.3166 15.0976 12.7071 14.7071L16.7071 10.7071C17.0976 10.3166 17.0976 9.68342 16.7071 9.29289C16.3166 8.90237 15.6834 8.90237 15.2929 9.29289L12 12.5858L8.70711 9.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M4 2C2.34315 2 1 3.34315 1 5V11C1 13.9174 2.15893 16.7153 4.22183 18.7782C6.28473 20.8411 9.08262 22 12 22C18.0751 22 23 17.0751 23 11V5C23 3.34315 21.6569 2 20 2H4ZM3 5C3 4.44772 3.44772 4 4 4H20C20.5523 4 21 4.44772 21 5V11C21 15.9706 16.9706 20 12 20C9.61305 20 7.32387 19.0518 5.63604 17.364C3.94821 15.6761 3 13.3869 3 11V5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/PowerIcon/PowerIcon.native.test.tsx b/packages/blade/src/components/Icons/PowerIcon/PowerIcon.native.test.tsx
index 67f0ceabab4..61f191df681 100644
--- a/packages/blade/src/components/Icons/PowerIcon/PowerIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PowerIcon/PowerIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PowerIcon />', () => {
   it('should render PowerIcon', () => {
     const renderTree = renderWithTheme(
-      <PowerIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PowerIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PowerIcon/PowerIcon.web.test.tsx b/packages/blade/src/components/Icons/PowerIcon/PowerIcon.web.test.tsx
index f4d4c9d2a97..0262c4ffe05 100644
--- a/packages/blade/src/components/Icons/PowerIcon/PowerIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PowerIcon/PowerIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PowerIcon />', () => {
   it('should render PowerIcon', () => {
     const { container } = renderWithTheme(
-      <PowerIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PowerIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.native.test.tsx.snap
index c9b63f28cc2..75e13b8ceb1 100644
--- a/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<PowerIcon /> should render PowerIcon 1`] = `
     >
       <RNSVGPath
         d="M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<PowerIcon /> should render PowerIcon 1`] = `
       />
       <RNSVGPath
         d="M6.33722 7.34701C6.72768 6.95642 6.72757 6.32325 6.33699 5.93279C5.9464 5.54233 5.31323 5.54244 4.92277 5.93302C1.01847 9.8386 1.01916 16.1697 4.92431 20.0744C8.82947 23.9791 15.1605 23.9791 19.0657 20.0744C22.9708 16.1697 22.9715 9.8386 19.0672 5.93302C18.6768 5.54244 18.0436 5.54233 17.653 5.93279C17.2624 6.32325 17.2623 6.95642 17.6528 7.34701C20.7762 10.4715 20.7757 15.5363 17.6515 18.6601C14.5274 21.7839 9.46257 21.7839 6.33845 18.6601C3.21432 15.5363 3.21377 10.4715 6.33722 7.34701Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.web.test.tsx.snap
index 39bdbddc9ad..58de11a1bd7 100644
--- a/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<PowerIcon /> should render PowerIcon 1`] = `
     <path
       d="M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M6.33722 7.34701C6.72768 6.95642 6.72757 6.32325 6.33699 5.93279C5.9464 5.54233 5.31323 5.54244 4.92277 5.93302C1.01847 9.8386 1.01916 16.1697 4.92431 20.0744C8.82947 23.9791 15.1605 23.9791 19.0657 20.0744C22.9708 16.1697 22.9715 9.8386 19.0672 5.93302C18.6768 5.54244 18.0436 5.54233 17.653 5.93279C17.2624 6.32325 17.2623 6.95642 17.6528 7.34701C20.7762 10.4715 20.7757 15.5363 17.6515 18.6601C14.5274 21.7839 9.46257 21.7839 6.33845 18.6601C3.21432 15.5363 3.21377 10.4715 6.33722 7.34701Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/PrinterIcon/PrinterIcon.native.test.tsx b/packages/blade/src/components/Icons/PrinterIcon/PrinterIcon.native.test.tsx
index 9dbf8ce1134..690295350bc 100644
--- a/packages/blade/src/components/Icons/PrinterIcon/PrinterIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/PrinterIcon/PrinterIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<PrinterIcon />', () => {
   it('should render PrinterIcon', () => {
     const renderTree = renderWithTheme(
-      <PrinterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PrinterIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PrinterIcon/PrinterIcon.web.test.tsx b/packages/blade/src/components/Icons/PrinterIcon/PrinterIcon.web.test.tsx
index e0ebaa093e4..2a63a8a0306 100644
--- a/packages/blade/src/components/Icons/PrinterIcon/PrinterIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/PrinterIcon/PrinterIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<PrinterIcon />', () => {
   it('should render PrinterIcon', () => {
     const { container } = renderWithTheme(
-      <PrinterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <PrinterIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.native.test.tsx.snap
index b104f81394d..cb97865c4cb 100644
--- a/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<PrinterIcon /> should render PrinterIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5 2C5 1.44772 5.44772 1 6 1H18C18.5523 1 19 1.44772 19 2V8H20C21.6569 8 23 9.34315 23 11V16C23 17.6569 21.6569 19 20 19H19V22C19 22.5523 18.5523 23 18 23H6C5.44772 23 5 22.5523 5 22V19H4C2.34315 19 1 17.6569 1 16V11C1 9.34315 2.34315 8 4 8H5V2ZM7 18V21H17V18V15H7V18ZM19 17V14C19 13.4477 18.5523 13 18 13H6C5.44772 13 5 13.4477 5 14V17H4C3.44772 17 3 16.5523 3 16V11C3 10.4477 3.44772 10 4 10H6H18H20C20.5523 10 21 10.4477 21 11V16C21 16.5523 20.5523 17 20 17H19ZM17 3V8H7V3H17Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.web.test.tsx.snap
index d04010bf563..08b9f812e36 100644
--- a/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<PrinterIcon /> should render PrinterIcon 1`] = `
       clip-rule="evenodd"
       d="M5 2C5 1.44772 5.44772 1 6 1H18C18.5523 1 19 1.44772 19 2V8H20C21.6569 8 23 9.34315 23 11V16C23 17.6569 21.6569 19 20 19H19V22C19 22.5523 18.5523 23 18 23H6C5.44772 23 5 22.5523 5 22V19H4C2.34315 19 1 17.6569 1 16V11C1 9.34315 2.34315 8 4 8H5V2ZM7 18V21H17V18V15H7V18ZM19 17V14C19 13.4477 18.5523 13 18 13H6C5.44772 13 5 13.4477 5 14V17H4C3.44772 17 3 16.5523 3 16V11C3 10.4477 3.44772 10 4 10H6H18H20C20.5523 10 21 10.4477 21 11V16C21 16.5523 20.5523 17 20 17H19ZM17 3V8H7V3H17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/QRCodeIcon/QRCodeIcon.native.test.tsx b/packages/blade/src/components/Icons/QRCodeIcon/QRCodeIcon.native.test.tsx
index 51a9e99947a..dd5af01c7b9 100644
--- a/packages/blade/src/components/Icons/QRCodeIcon/QRCodeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/QRCodeIcon/QRCodeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<QRCodeIcon />', () => {
   it('should render QRCodeIcon', () => {
     const renderTree = renderWithTheme(
-      <QRCodeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <QRCodeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/QRCodeIcon/QRCodeIcon.web.test.tsx b/packages/blade/src/components/Icons/QRCodeIcon/QRCodeIcon.web.test.tsx
index 003fa32970c..6b65443eb01 100644
--- a/packages/blade/src/components/Icons/QRCodeIcon/QRCodeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/QRCodeIcon/QRCodeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<QRCodeIcon />', () => {
   it('should render QRCodeIcon', () => {
     const { container } = renderWithTheme(
-      <QRCodeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <QRCodeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.native.test.tsx.snap
index d14e85eed42..2db3cfa8f99 100644
--- a/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<QRCodeIcon /> should render QRCodeIcon 1`] = `
       >
         <RNSVGPath
           d="M4 4.5C4 4.22386 4.22386 4 4.5 4H9.5C9.77614 4 10 4.22386 10 4.5V9.5C10 9.77614 9.77614 10 9.5 10H4.5C4.22386 10 4 9.77614 4 9.5V4.5ZM19.5 4C19.7761 4 20 4.22386 20 4.5V9.5C20 9.77614 19.7761 10 19.5 10H14.5C14.2239 10 14 9.77614 14 9.5V4.5C14 4.22386 14.2239 4 14.5 4H19.5ZM14 15.5C14 15.2239 14.2239 15 14.5 15H16V13H14.5C14.2239 13 14 12.7761 14 12.5V11.5C14 11.2239 14.2239 11 14.5 11H15.5C15.7761 11 16 11.2239 16 11.5V13H18V11.5C18 11.2239 18.2239 11 18.5 11H19.5C19.7761 11 20 11.2239 20 11.5V12.5C20 12.7761 19.7761 13 19.5 13H18V15H19.5C19.7761 15 20 15.2239 20 15.5V17.5C20 17.7761 19.7761 18 19.5 18H18V19.5C18 19.7761 17.7761 20 17.5 20H16.5C16.2239 20 16 19.7761 16 19.5V18H13.5C13.2239 18 13 18.2239 13 18.5V19.5C13 19.7761 12.7761 20 12.5 20H11.5C11.2239 20 11 19.7761 11 19.5V16.5C11 16.2239 11.2239 16 11.5 16H13.5C13.7761 16 14 15.7761 14 15.5ZM16 15V18H18V15H16ZM4.5 20C4.22386 20 4 19.7761 4 19.5V14.5C4 14.2239 4.22386 14 4.5 14H9.5C9.77614 14 10 14.2239 10 14.5V19.5C10 19.7761 9.77614 20 9.5 20H4.5ZM6.5 6C6.22386 6 6 6.22386 6 6.5V7.5C6 7.77614 6.22386 8 6.5 8H7.5C7.77614 8 8 7.77614 8 7.5V6.5C8 6.22386 7.77614 6 7.5 6H6.5ZM16.5 6C16.2239 6 16 6.22386 16 6.5V7.5C16 7.77614 16.2239 8 16.5 8H17.5C17.7761 8 18 7.77614 18 7.5V6.5C18 6.22386 17.7761 6 17.5 6H16.5ZM6.5 16C6.22386 16 6 16.2239 6 16.5V17.5C6 17.7761 6.22386 18 6.5 18H7.5C7.77614 18 8 17.7761 8 17.5V16.5C8 16.2239 7.77614 16 7.5 16H6.5ZM4 11.5C4 11.2239 4.22386 11 4.5 11H5.5C5.77614 11 6 11.2239 6 11.5V12.5C6 12.7761 5.77614 13 5.5 13H4.5C4.22386 13 4 12.7761 4 12.5V11.5ZM9 11.5C9 11.2239 9.22386 11 9.5 11H12.5C12.7761 11 13 11.2239 13 11.5V14.5C13 14.7761 12.7761 15 12.5 15H11.5C11.2239 15 11 14.7761 11 14.5V13.5C11 13.2239 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V11.5ZM11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5V9.5C13 9.77614 12.7761 10 12.5 10H11.5C11.2239 10 11 9.77614 11 9.5V6.5ZM2.5 2C2.22386 2 2 2.22386 2 2.5V5.5C2 5.77614 1.77614 6 1.5 6H0.5C0.223858 6 0 5.77614 0 5.5V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0L5.5 0C5.77614 0 6 0.223858 6 0.5V1.5C6 1.77614 5.77614 2 5.5 2H2.5ZM22 0C22.5304 0 23.0391 0.210714 23.4142 0.585786C23.7893 0.960859 24 1.46957 24 2V5.5C24 5.77614 23.7761 6 23.5 6H22.5C22.2239 6 22 5.77614 22 5.5V2.5C22 2.22386 21.7761 2 21.5 2H18.5C18.2239 2 18 1.77614 18 1.5V0.5C18 0.223858 18.2239 0 18.5 0H22ZM1.5 18C1.77614 18 2 18.2239 2 18.5V21.5C2 21.7761 2.22386 22 2.5 22H5.5C5.77614 22 6 22.2239 6 22.5V23.5C6 23.7761 5.77614 24 5.5 24H2C1.46957 24 0.960859 23.7893 0.585786 23.4142C0.210714 23.0391 0 22.5304 0 22V18.5C0 18.2239 0.223858 18 0.5 18H1.5ZM21.5 22C21.7761 22 22 21.7761 22 21.5V18.5C22 18.2239 22.2239 18 22.5 18H23.5C23.7761 18 24 18.2239 24 18.5V22C24 22.5304 23.7893 23.0391 23.4142 23.4142C23.0391 23.7893 22.5304 24 22 24H18.5C18.2239 24 18 23.7761 18 23.5V22.5C18 22.2239 18.2239 22 18.5 22H21.5Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
diff --git a/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.web.test.tsx.snap
index 9fb6fecbcfa..931d27d2548 100644
--- a/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.web.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<QRCodeIcon /> should render QRCodeIcon 1`] = `
       <path
         d="M4 4.5C4 4.22386 4.22386 4 4.5 4H9.5C9.77614 4 10 4.22386 10 4.5V9.5C10 9.77614 9.77614 10 9.5 10H4.5C4.22386 10 4 9.77614 4 9.5V4.5ZM19.5 4C19.7761 4 20 4.22386 20 4.5V9.5C20 9.77614 19.7761 10 19.5 10H14.5C14.2239 10 14 9.77614 14 9.5V4.5C14 4.22386 14.2239 4 14.5 4H19.5ZM14 15.5C14 15.2239 14.2239 15 14.5 15H16V13H14.5C14.2239 13 14 12.7761 14 12.5V11.5C14 11.2239 14.2239 11 14.5 11H15.5C15.7761 11 16 11.2239 16 11.5V13H18V11.5C18 11.2239 18.2239 11 18.5 11H19.5C19.7761 11 20 11.2239 20 11.5V12.5C20 12.7761 19.7761 13 19.5 13H18V15H19.5C19.7761 15 20 15.2239 20 15.5V17.5C20 17.7761 19.7761 18 19.5 18H18V19.5C18 19.7761 17.7761 20 17.5 20H16.5C16.2239 20 16 19.7761 16 19.5V18H13.5C13.2239 18 13 18.2239 13 18.5V19.5C13 19.7761 12.7761 20 12.5 20H11.5C11.2239 20 11 19.7761 11 19.5V16.5C11 16.2239 11.2239 16 11.5 16H13.5C13.7761 16 14 15.7761 14 15.5ZM16 15V18H18V15H16ZM4.5 20C4.22386 20 4 19.7761 4 19.5V14.5C4 14.2239 4.22386 14 4.5 14H9.5C9.77614 14 10 14.2239 10 14.5V19.5C10 19.7761 9.77614 20 9.5 20H4.5ZM6.5 6C6.22386 6 6 6.22386 6 6.5V7.5C6 7.77614 6.22386 8 6.5 8H7.5C7.77614 8 8 7.77614 8 7.5V6.5C8 6.22386 7.77614 6 7.5 6H6.5ZM16.5 6C16.2239 6 16 6.22386 16 6.5V7.5C16 7.77614 16.2239 8 16.5 8H17.5C17.7761 8 18 7.77614 18 7.5V6.5C18 6.22386 17.7761 6 17.5 6H16.5ZM6.5 16C6.22386 16 6 16.2239 6 16.5V17.5C6 17.7761 6.22386 18 6.5 18H7.5C7.77614 18 8 17.7761 8 17.5V16.5C8 16.2239 7.77614 16 7.5 16H6.5ZM4 11.5C4 11.2239 4.22386 11 4.5 11H5.5C5.77614 11 6 11.2239 6 11.5V12.5C6 12.7761 5.77614 13 5.5 13H4.5C4.22386 13 4 12.7761 4 12.5V11.5ZM9 11.5C9 11.2239 9.22386 11 9.5 11H12.5C12.7761 11 13 11.2239 13 11.5V14.5C13 14.7761 12.7761 15 12.5 15H11.5C11.2239 15 11 14.7761 11 14.5V13.5C11 13.2239 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V11.5ZM11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5V9.5C13 9.77614 12.7761 10 12.5 10H11.5C11.2239 10 11 9.77614 11 9.5V6.5ZM2.5 2C2.22386 2 2 2.22386 2 2.5V5.5C2 5.77614 1.77614 6 1.5 6H0.5C0.223858 6 0 5.77614 0 5.5V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0L5.5 0C5.77614 0 6 0.223858 6 0.5V1.5C6 1.77614 5.77614 2 5.5 2H2.5ZM22 0C22.5304 0 23.0391 0.210714 23.4142 0.585786C23.7893 0.960859 24 1.46957 24 2V5.5C24 5.77614 23.7761 6 23.5 6H22.5C22.2239 6 22 5.77614 22 5.5V2.5C22 2.22386 21.7761 2 21.5 2H18.5C18.2239 2 18 1.77614 18 1.5V0.5C18 0.223858 18.2239 0 18.5 0H22ZM1.5 18C1.77614 18 2 18.2239 2 18.5V21.5C2 21.7761 2.22386 22 2.5 22H5.5C5.77614 22 6 22.2239 6 22.5V23.5C6 23.7761 5.77614 24 5.5 24H2C1.46957 24 0.960859 23.7893 0.585786 23.4142C0.210714 23.0391 0 22.5304 0 22V18.5C0 18.2239 0.223858 18 0.5 18H1.5ZM21.5 22C21.7761 22 22 21.7761 22 21.5V18.5C22 18.2239 22.2239 18 22.5 18H23.5C23.7761 18 24 18.2239 24 18.5V22C24 22.5304 23.7893 23.0391 23.4142 23.4142C23.0391 23.7893 22.5304 24 22 24H18.5C18.2239 24 18 23.7761 18 23.5V22.5C18 22.2239 18.2239 22 18.5 22H21.5Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
diff --git a/packages/blade/src/components/Icons/RadioIcon/RadioIcon.native.test.tsx b/packages/blade/src/components/Icons/RadioIcon/RadioIcon.native.test.tsx
index 585698c6c83..66cd0f405c3 100644
--- a/packages/blade/src/components/Icons/RadioIcon/RadioIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RadioIcon/RadioIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RadioIcon />', () => {
   it('should render RadioIcon', () => {
     const renderTree = renderWithTheme(
-      <RadioIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RadioIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RadioIcon/RadioIcon.web.test.tsx b/packages/blade/src/components/Icons/RadioIcon/RadioIcon.web.test.tsx
index 08804b8d007..a3e602d691b 100644
--- a/packages/blade/src/components/Icons/RadioIcon/RadioIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RadioIcon/RadioIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RadioIcon />', () => {
   it('should render RadioIcon', () => {
     const { container } = renderWithTheme(
-      <RadioIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RadioIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.native.test.tsx.snap
index ac70c80cd1b..41b900802c8 100644
--- a/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<RadioIcon /> should render RadioIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5.63715 5.63693C6.02762 5.24635 6.02752 4.61318 5.63694 4.22272C5.24636 3.83225 4.61319 3.83235 4.22273 4.22293C-0.071475 8.51843 -0.071475 15.4814 4.22273 19.7769C4.61319 20.1675 5.24636 20.1676 5.63694 19.7771C6.02752 19.3867 6.02762 18.7535 5.63715 18.3629C2.12372 14.8484 2.12372 9.15143 5.63715 5.63693ZM19.7772 4.22293C19.3867 3.83235 18.7535 3.83225 18.3629 4.22272C17.9724 4.61318 17.9723 5.24635 18.3627 5.63693C21.8762 9.15143 21.8762 14.8484 18.3627 18.3629C17.9723 18.7535 17.9724 19.3867 18.3629 19.7771C18.7535 20.1676 19.3867 20.1675 19.7772 19.7769C24.0714 15.4814 24.0714 8.51843 19.7772 4.22293ZM8.46665 8.45743C8.85739 8.06712 8.85775 7.43396 8.46744 7.04322C8.07713 6.65248 7.44397 6.65212 7.05323 7.04243C5.73879 8.35541 5.00022 10.1371 5.00022 11.9949C5.00022 13.8528 5.73879 15.6345 7.05323 16.9474C7.44397 17.3377 8.07713 17.3374 8.46744 16.9466C8.85775 16.5559 8.85739 15.9227 8.46665 15.5324C7.52777 14.5946 7.00022 13.322 7.00022 11.9949C7.00022 10.6679 7.52777 9.39527 8.46665 8.45743ZM16.9467 7.05243C16.5559 6.66212 15.9227 6.66248 15.5324 7.05322C15.1421 7.44396 15.1425 8.07712 15.5332 8.46743C16.4721 9.40527 16.9997 10.6779 16.9997 12.0049C16.9997 13.332 16.4721 14.6046 15.5332 15.5424C15.1425 15.9327 15.1421 16.5659 15.5324 16.9566C15.9227 17.3474 16.5559 17.3477 16.9467 16.9574C18.2611 15.6445 18.9997 13.8628 18.9997 12.0049C18.9997 10.1471 18.2611 8.36541 16.9467 7.05243ZM12 8.99994C10.3431 8.99994 9 10.3431 9 11.9999C9 13.6568 10.3431 14.9999 12 14.9999C13.6569 14.9999 15 13.6568 15 11.9999C15 10.3431 13.6569 8.99994 12 8.99994ZM11 11.9999C11 11.4477 11.4477 10.9999 12 10.9999C12.5523 10.9999 13 11.4477 13 11.9999C13 12.5522 12.5523 12.9999 12 12.9999C11.4477 12.9999 11 12.5522 11 11.9999Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.web.test.tsx.snap
index 4c84cd8f4a6..d0504f31a25 100644
--- a/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<RadioIcon /> should render RadioIcon 1`] = `
       clip-rule="evenodd"
       d="M5.63715 5.63693C6.02762 5.24635 6.02752 4.61318 5.63694 4.22272C5.24636 3.83225 4.61319 3.83235 4.22273 4.22293C-0.071475 8.51843 -0.071475 15.4814 4.22273 19.7769C4.61319 20.1675 5.24636 20.1676 5.63694 19.7771C6.02752 19.3867 6.02762 18.7535 5.63715 18.3629C2.12372 14.8484 2.12372 9.15143 5.63715 5.63693ZM19.7772 4.22293C19.3867 3.83235 18.7535 3.83225 18.3629 4.22272C17.9724 4.61318 17.9723 5.24635 18.3627 5.63693C21.8762 9.15143 21.8762 14.8484 18.3627 18.3629C17.9723 18.7535 17.9724 19.3867 18.3629 19.7771C18.7535 20.1676 19.3867 20.1675 19.7772 19.7769C24.0714 15.4814 24.0714 8.51843 19.7772 4.22293ZM8.46665 8.45743C8.85739 8.06712 8.85775 7.43396 8.46744 7.04322C8.07713 6.65248 7.44397 6.65212 7.05323 7.04243C5.73879 8.35541 5.00022 10.1371 5.00022 11.9949C5.00022 13.8528 5.73879 15.6345 7.05323 16.9474C7.44397 17.3377 8.07713 17.3374 8.46744 16.9466C8.85775 16.5559 8.85739 15.9227 8.46665 15.5324C7.52777 14.5946 7.00022 13.322 7.00022 11.9949C7.00022 10.6679 7.52777 9.39527 8.46665 8.45743ZM16.9467 7.05243C16.5559 6.66212 15.9227 6.66248 15.5324 7.05322C15.1421 7.44396 15.1425 8.07712 15.5332 8.46743C16.4721 9.40527 16.9997 10.6779 16.9997 12.0049C16.9997 13.332 16.4721 14.6046 15.5332 15.5424C15.1425 15.9327 15.1421 16.5659 15.5324 16.9566C15.9227 17.3474 16.5559 17.3477 16.9467 16.9574C18.2611 15.6445 18.9997 13.8628 18.9997 12.0049C18.9997 10.1471 18.2611 8.36541 16.9467 7.05243ZM12 8.99994C10.3431 8.99994 9 10.3431 9 11.9999C9 13.6568 10.3431 14.9999 12 14.9999C13.6569 14.9999 15 13.6568 15 11.9999C15 10.3431 13.6569 8.99994 12 8.99994ZM11 11.9999C11 11.4477 11.4477 10.9999 12 10.9999C12.5523 10.9999 13 11.4477 13 11.9999C13 12.5522 12.5523 12.9999 12 12.9999C11.4477 12.9999 11 12.5522 11 11.9999Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/RazorpayIcon/RazorpayIcon.native.test.tsx b/packages/blade/src/components/Icons/RazorpayIcon/RazorpayIcon.native.test.tsx
index a5a5936aa69..12304e528a0 100644
--- a/packages/blade/src/components/Icons/RazorpayIcon/RazorpayIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RazorpayIcon/RazorpayIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RazorpayIcon />', () => {
   it('should render RazorpayIcon', () => {
     const renderTree = renderWithTheme(
-      <RazorpayIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RazorpayIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RazorpayIcon/RazorpayIcon.web.test.tsx b/packages/blade/src/components/Icons/RazorpayIcon/RazorpayIcon.web.test.tsx
index afab46afccf..32222f9d865 100644
--- a/packages/blade/src/components/Icons/RazorpayIcon/RazorpayIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RazorpayIcon/RazorpayIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RazorpayIcon />', () => {
   it('should render RazorpayIcon', () => {
     const { container } = renderWithTheme(
-      <RazorpayIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RazorpayIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.native.test.tsx.snap
index c9bb9e91275..9b6bf24ef04 100644
--- a/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<RazorpayIcon /> should render RazorpayIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9.71749 12.3339L10.7149 8.66299L21 2L15.4844 22.5753L11.6926 22.5722L15.4262 8.64209L9.71749 12.3339ZM3 22.5756L4.57044 16.7193L13.9519 10.6624L10.7718 22.5756H3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.web.test.tsx.snap
index 435523c644a..600bf2d2e68 100644
--- a/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<RazorpayIcon /> should render RazorpayIcon 1`] = `
       clip-rule="evenodd"
       d="M9.71749 12.3339L10.7149 8.66299L21 2L15.4844 22.5753L11.6926 22.5722L15.4262 8.64209L9.71749 12.3339ZM3 22.5756L4.57044 16.7193L13.9519 10.6624L10.7718 22.5756H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/RazorpayXIcon/RazorpayXIcon.native.test.tsx b/packages/blade/src/components/Icons/RazorpayXIcon/RazorpayXIcon.native.test.tsx
index 0bbb63e526f..127d0f112bc 100644
--- a/packages/blade/src/components/Icons/RazorpayXIcon/RazorpayXIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RazorpayXIcon/RazorpayXIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RazorpayXIcon />', () => {
   it('should render RazorpayXIcon', () => {
     const renderTree = renderWithTheme(
-      <RazorpayXIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RazorpayXIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RazorpayXIcon/RazorpayXIcon.web.test.tsx b/packages/blade/src/components/Icons/RazorpayXIcon/RazorpayXIcon.web.test.tsx
index f098bb595c6..aed450bcd6a 100644
--- a/packages/blade/src/components/Icons/RazorpayXIcon/RazorpayXIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RazorpayXIcon/RazorpayXIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RazorpayXIcon />', () => {
   it('should render RazorpayXIcon', () => {
     const { container } = renderWithTheme(
-      <RazorpayXIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RazorpayXIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.native.test.tsx.snap
index 3edc2848e44..34a71ea04d7 100644
--- a/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<RazorpayXIcon /> should render RazorpayXIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M16.7596 2L4.1499 18.1112H7.49182L10.5152 14.1753L16.5258 22.0002H20.4316L12.3986 11.7234L19.8675 2H16.7596ZM10.145 9.079L7.82196 5.88974H4.15013L8.22818 11.3079L10.145 9.079Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.web.test.tsx.snap
index 0db319eaa98..ff467d6d650 100644
--- a/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<RazorpayXIcon /> should render RazorpayXIcon 1`] = `
       clip-rule="evenodd"
       d="M16.7596 2L4.1499 18.1112H7.49182L10.5152 14.1753L16.5258 22.0002H20.4316L12.3986 11.7234L19.8675 2H16.7596ZM10.145 9.079L7.82196 5.88974H4.15013L8.22818 11.3079L10.145 9.079Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/RefreshIcon/RefreshIcon.native.test.tsx b/packages/blade/src/components/Icons/RefreshIcon/RefreshIcon.native.test.tsx
index 85d72bcc58f..c6fdfb6d9be 100644
--- a/packages/blade/src/components/Icons/RefreshIcon/RefreshIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RefreshIcon/RefreshIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RefreshIcon />', () => {
   it('should render RefreshIcon', () => {
     const renderTree = renderWithTheme(
-      <RefreshIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RefreshIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RefreshIcon/RefreshIcon.web.test.tsx b/packages/blade/src/components/Icons/RefreshIcon/RefreshIcon.web.test.tsx
index 3f0656cffb3..68fd6d9decd 100644
--- a/packages/blade/src/components/Icons/RefreshIcon/RefreshIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RefreshIcon/RefreshIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RefreshIcon />', () => {
   it('should render RefreshIcon', () => {
     const { container } = renderWithTheme(
-      <RefreshIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RefreshIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.native.test.tsx.snap
index 40d12f8b89d..960dfe01ad5 100644
--- a/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<RefreshIcon /> should render RefreshIcon 1`] = `
     >
       <RNSVGPath
         d="M10.229 4.2a8 8 0 0 1 7.446 2.169L20.525 9H17a1 1 0 1 0 0 2h6a1 1 0 0 0 1-1V4a1 1 0 1 0-2 0v3.64l-2.944-2.718A10 10 0 0 0 2.567 8.666a1 1 0 0 0 1.886.668A8 8 0 0 1 10.229 4.2ZM2 16.36V20a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H3.474l2.85 2.631a8 8 0 0 0 13.223-2.965 1 1 0 0 1 1.886.668 10 10 0 0 1-16.489 3.744L2 16.361Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.web.test.tsx.snap
index be6578847e6..63e7923361e 100644
--- a/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<RefreshIcon /> should render RefreshIcon 1`] = `
     <path
       d="M10.229 4.2a8 8 0 0 1 7.446 2.169L20.525 9H17a1 1 0 1 0 0 2h6a1 1 0 0 0 1-1V4a1 1 0 1 0-2 0v3.64l-2.944-2.718A10 10 0 0 0 2.567 8.666a1 1 0 0 0 1.886.668A8 8 0 0 1 10.229 4.2ZM2 16.36V20a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H3.474l2.85 2.631a8 8 0 0 0 13.223-2.965 1 1 0 0 1 1.886.668 10 10 0 0 1-16.489 3.744L2 16.361Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/RepeatIcon/RepeatIcon.native.test.tsx b/packages/blade/src/components/Icons/RepeatIcon/RepeatIcon.native.test.tsx
index f89e986b1b2..d24e4b8e17f 100644
--- a/packages/blade/src/components/Icons/RepeatIcon/RepeatIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RepeatIcon/RepeatIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RepeatIcon />', () => {
   it('should render RepeatIcon', () => {
     const renderTree = renderWithTheme(
-      <RepeatIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RepeatIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RepeatIcon/RepeatIcon.web.test.tsx b/packages/blade/src/components/Icons/RepeatIcon/RepeatIcon.web.test.tsx
index 5af02ecf139..a6fd27b18ae 100644
--- a/packages/blade/src/components/Icons/RepeatIcon/RepeatIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RepeatIcon/RepeatIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RepeatIcon />', () => {
   it('should render RepeatIcon', () => {
     const { container } = renderWithTheme(
-      <RepeatIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RepeatIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.native.test.tsx.snap
index ed80f478e76..ca94d53d37c 100644
--- a/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
       >
         <RNSVGPath
           d="M17.7071 0.292893C17.3166 -0.0976311 16.6834 -0.0976311 16.2929 0.292893C15.9024 0.683417 15.9024 1.31658 16.2929 1.70711L18.5858 4H7C4.23858 4 2 6.23858 2 9V11C2 11.5523 2.44772 12 3 12C3.55228 12 4 11.5523 4 11V9C4 7.34315 5.34315 6 7 6H18.5858L16.2929 8.29289C15.9024 8.68342 15.9024 9.31658 16.2929 9.70711C16.6834 10.0976 17.3166 10.0976 17.7071 9.70711L21.7071 5.70711C22.0976 5.31658 22.0976 4.68342 21.7071 4.29289L17.7071 0.292893Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
         />
         <RNSVGPath
           d="M7.70711 14.2929C8.09763 14.6834 8.09763 15.3166 7.70711 15.7071L5.41421 18H17C18.6569 18 20 16.6569 20 15V13C20 12.4477 20.4477 12 21 12C21.5523 12 22 12.4477 22 13V15C22 17.7614 19.7614 20 17 20H5.41421L7.70711 22.2929C8.09763 22.6834 8.09763 23.3166 7.70711 23.7071C7.31658 24.0976 6.68342 24.0976 6.29289 23.7071L2.29289 19.7071C1.90237 19.3166 1.90237 18.6834 2.29289 18.2929L6.29289 14.2929C6.68342 13.9024 7.31658 13.9024 7.70711 14.2929Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -76,7 +76,7 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
           name="clip0_60_1233"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.web.test.tsx.snap
index ae671952e09..22c8511407c 100644
--- a/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.web.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
       <path
         d="M17.7071 0.292893C17.3166 -0.0976311 16.6834 -0.0976311 16.2929 0.292893C15.9024 0.683417 15.9024 1.31658 16.2929 1.70711L18.5858 4H7C4.23858 4 2 6.23858 2 9V11C2 11.5523 2.44772 12 3 12C3.55228 12 4 11.5523 4 11V9C4 7.34315 5.34315 6 7 6H18.5858L16.2929 8.29289C15.9024 8.68342 15.9024 9.31658 16.2929 9.70711C16.6834 10.0976 17.3166 10.0976 17.7071 9.70711L21.7071 5.70711C22.0976 5.31658 22.0976 4.68342 21.7071 4.29289L17.7071 0.292893Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M7.70711 14.2929C8.09763 14.6834 8.09763 15.3166 7.70711 15.7071L5.41421 18H17C18.6569 18 20 16.6569 20 15V13C20 12.4477 20.4477 12 21 12C21.5523 12 22 12.4477 22 13V15C22 17.7614 19.7614 20 17 20H5.41421L7.70711 22.2929C8.09763 22.6834 8.09763 23.3166 7.70711 23.7071C7.31658 24.0976 6.68342 24.0976 6.29289 23.7071L2.29289 19.7071C1.90237 19.3166 1.90237 18.6834 2.29289 18.2929L6.29289 14.2929C6.68342 13.9024 7.31658 13.9024 7.70711 14.2929Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -35,7 +35,7 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/ReportsIcon/ReportsIcon.native.test.tsx b/packages/blade/src/components/Icons/ReportsIcon/ReportsIcon.native.test.tsx
index c998372799e..70f68eda7bc 100644
--- a/packages/blade/src/components/Icons/ReportsIcon/ReportsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ReportsIcon/ReportsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ReportsIcon />', () => {
   it('should render ReportsIcon', () => {
     const renderTree = renderWithTheme(
-      <ReportsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ReportsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ReportsIcon/ReportsIcon.web.test.tsx b/packages/blade/src/components/Icons/ReportsIcon/ReportsIcon.web.test.tsx
index 03b080b94b9..0c161e2be3c 100644
--- a/packages/blade/src/components/Icons/ReportsIcon/ReportsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ReportsIcon/ReportsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ReportsIcon />', () => {
   it('should render ReportsIcon', () => {
     const { container } = renderWithTheme(
-      <ReportsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ReportsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.native.test.tsx.snap
index 41ab2b1a957..07cea381e19 100644
--- a/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ReportsIcon /> should render ReportsIcon 1`] = `
     >
       <RNSVGPath
         d="M4 6H2V20C2 21.1 2.9 22 4 22H18V20H4V6ZM20 2H8C6.9 2 6 2.9 6 4V16C6 17.1 6.9 18 8 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM19 11H9V9H19V11ZM15 15H9V13H15V15ZM19 7H9V5H19V7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.web.test.tsx.snap
index 12cf841f1c5..00d0dc3520e 100644
--- a/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ReportsIcon /> should render ReportsIcon 1`] = `
     <path
       d="M4 6H2V20C2 21.1 2.9 22 4 22H18V20H4V6ZM20 2H8C6.9 2 6 2.9 6 4V16C6 17.1 6.9 18 8 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM19 11H9V9H19V11ZM15 15H9V13H15V15ZM19 7H9V5H19V7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/RewindIcon/RewindIcon.native.test.tsx b/packages/blade/src/components/Icons/RewindIcon/RewindIcon.native.test.tsx
index 35388a14a6a..b0151d0d44d 100644
--- a/packages/blade/src/components/Icons/RewindIcon/RewindIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RewindIcon/RewindIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RewindIcon />', () => {
   it('should render RewindIcon', () => {
     const renderTree = renderWithTheme(
-      <RewindIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RewindIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RewindIcon/RewindIcon.web.test.tsx b/packages/blade/src/components/Icons/RewindIcon/RewindIcon.web.test.tsx
index d4b6b83f86f..f8b6021564d 100644
--- a/packages/blade/src/components/Icons/RewindIcon/RewindIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RewindIcon/RewindIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RewindIcon />', () => {
   it('should render RewindIcon', () => {
     const { container } = renderWithTheme(
-      <RewindIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RewindIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.native.test.tsx.snap
index 9a7199d2f7f..f70d5142f77 100644
--- a/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<RewindIcon /> should render RewindIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 5.00001C12 4.61807 11.7824 4.2695 11.4394 4.10169C11.0963 3.93389 10.6875 3.97617 10.3861 4.21066L1.38606 11.2107C1.14247 11.4001 1 11.6914 1 12C1 12.3086 1.14247 12.5999 1.38606 12.7894L10.3861 19.7894C10.6875 20.0238 11.0963 20.0661 11.4394 19.8983C11.7824 19.7305 12 19.3819 12 19V12C12 12.3086 12.1425 12.5999 12.3861 12.7894L21.3861 19.7894C21.6875 20.0238 22.0963 20.0661 22.4394 19.8983C22.7824 19.7305 23 19.3819 23 19V5.00001C23 4.61807 22.7824 4.2695 22.4394 4.10169C22.0963 3.93389 21.6875 3.97617 21.3861 4.21066L12.3861 11.2107C12.1425 11.4001 12 11.6914 12 12V5.00001ZM10 16.9554L3.62882 12L10 7.04465V16.9554ZM21 16.9554L14.6288 12L21 7.04465V16.9554Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.web.test.tsx.snap
index bb07f126599..4564bb92a5b 100644
--- a/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<RewindIcon /> should render RewindIcon 1`] = `
       clip-rule="evenodd"
       d="M12 5.00001C12 4.61807 11.7824 4.2695 11.4394 4.10169C11.0963 3.93389 10.6875 3.97617 10.3861 4.21066L1.38606 11.2107C1.14247 11.4001 1 11.6914 1 12C1 12.3086 1.14247 12.5999 1.38606 12.7894L10.3861 19.7894C10.6875 20.0238 11.0963 20.0661 11.4394 19.8983C11.7824 19.7305 12 19.3819 12 19V12C12 12.3086 12.1425 12.5999 12.3861 12.7894L21.3861 19.7894C21.6875 20.0238 22.0963 20.0661 22.4394 19.8983C22.7824 19.7305 23 19.3819 23 19V5.00001C23 4.61807 22.7824 4.2695 22.4394 4.10169C22.0963 3.93389 21.6875 3.97617 21.3861 4.21066L12.3861 11.2107C12.1425 11.4001 12 11.6914 12 12V5.00001ZM10 16.9554L3.62882 12L10 7.04465V16.9554ZM21 16.9554L14.6288 12L21 7.04465V16.9554Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/RotateClockWiseIcon/RotateClockWiseIcon.native.test.tsx b/packages/blade/src/components/Icons/RotateClockWiseIcon/RotateClockWiseIcon.native.test.tsx
index 81226de996a..31746f704b0 100644
--- a/packages/blade/src/components/Icons/RotateClockWiseIcon/RotateClockWiseIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RotateClockWiseIcon/RotateClockWiseIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RotateClockWiseIcon />', () => {
   it('should render RotateClockWiseIcon', () => {
     const renderTree = renderWithTheme(
-      <RotateClockWiseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RotateClockWiseIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RotateClockWiseIcon/RotateClockWiseIcon.web.test.tsx b/packages/blade/src/components/Icons/RotateClockWiseIcon/RotateClockWiseIcon.web.test.tsx
index f78881c4aee..fd935d1acb1 100644
--- a/packages/blade/src/components/Icons/RotateClockWiseIcon/RotateClockWiseIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RotateClockWiseIcon/RotateClockWiseIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RotateClockWiseIcon />', () => {
   it('should render RotateClockWiseIcon', () => {
     const { container } = renderWithTheme(
-      <RotateClockWiseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RotateClockWiseIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.native.test.tsx.snap
index 298da8a7e05..d4d38bf9d9c 100644
--- a/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<RotateClockWiseIcon /> should render RotateClockWiseIcon 1`] = `
     >
       <RNSVGPath
         d="M7.14125 4.99635C10.2617 3.27579 14.1439 3.82644 16.6627 6.34689C16.6699 6.35405 16.6771 6.36109 16.6845 6.36802L19.528 9H16C15.4477 9 15 9.44772 15 10C15 10.5523 15.4477 11 16 11H22C22.5523 11 23 10.5523 23 10V4C23 3.44772 22.5523 3 22 3C21.4477 3 21 3.44772 21 4V7.63742L18.0664 4.92215C14.9175 1.78097 10.0715 1.09674 6.17554 3.24495C2.27503 5.39565 0.267187 9.86684 1.25111 14.211C2.23504 18.5551 5.97351 21.7248 10.4201 21.9849C14.8666 22.245 18.9492 19.5329 20.4329 15.3331C20.6169 14.8124 20.3439 14.2411 19.8232 14.0571C19.3024 13.8731 18.7311 14.1462 18.5472 14.6669C17.3602 18.0267 14.0941 20.1964 10.5369 19.9883C6.97962 19.7802 3.98884 17.2445 3.2017 13.7692C2.41456 10.2939 4.02084 6.71691 7.14125 4.99635Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.web.test.tsx.snap
index 3edfd1dbc7d..4567882ba6c 100644
--- a/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<RotateClockWiseIcon /> should render RotateClockWiseIcon 1`] = `
     <path
       d="M7.14125 4.99635C10.2617 3.27579 14.1439 3.82644 16.6627 6.34689C16.6699 6.35405 16.6771 6.36109 16.6845 6.36802L19.528 9H16C15.4477 9 15 9.44772 15 10C15 10.5523 15.4477 11 16 11H22C22.5523 11 23 10.5523 23 10V4C23 3.44772 22.5523 3 22 3C21.4477 3 21 3.44772 21 4V7.63742L18.0664 4.92215C14.9175 1.78097 10.0715 1.09674 6.17554 3.24495C2.27503 5.39565 0.267187 9.86684 1.25111 14.211C2.23504 18.5551 5.97351 21.7248 10.4201 21.9849C14.8666 22.245 18.9492 19.5329 20.4329 15.3331C20.6169 14.8124 20.3439 14.2411 19.8232 14.0571C19.3024 13.8731 18.7311 14.1462 18.5472 14.6669C17.3602 18.0267 14.0941 20.1964 10.5369 19.9883C6.97962 19.7802 3.98884 17.2445 3.2017 13.7692C2.41456 10.2939 4.02084 6.71691 7.14125 4.99635Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/RotateCounterClockWiseIcon.native.test.tsx b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/RotateCounterClockWiseIcon.native.test.tsx
index 9e649134aa4..d6581722180 100644
--- a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/RotateCounterClockWiseIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/RotateCounterClockWiseIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RotateCounterClockWiseIcon />', () => {
   it('should render RotateCounterClockWiseIcon', () => {
     const renderTree = renderWithTheme(
-      <RotateCounterClockWiseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RotateCounterClockWiseIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/RotateCounterClockWiseIcon.web.test.tsx b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/RotateCounterClockWiseIcon.web.test.tsx
index 2a4bc2101de..7cabe9d967b 100644
--- a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/RotateCounterClockWiseIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/RotateCounterClockWiseIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RotateCounterClockWiseIcon />', () => {
   it('should render RotateCounterClockWiseIcon', () => {
     const { container } = renderWithTheme(
-      <RotateCounterClockWiseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RotateCounterClockWiseIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.native.test.tsx.snap
index 9d463741c64..d481109e50e 100644
--- a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<RotateCounterClockWiseIcon /> should render RotateCounterClockWiseIcon
     >
       <RNSVGPath
         d="M17.8366 3.25759C13.9432 1.10528 9.09681 1.784 5.94449 4.92134L3 7.63918V4C3 3.44772 2.55228 3 2 3C1.44772 3 1 3.44772 1 4V10C1 10.5523 1.44772 11 2 11H8C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9H4.47426L7.32478 6.36875C7.33213 6.36185 7.33937 6.35483 7.34651 6.34771C9.86814 3.83034 13.7507 3.28409 16.869 5.00794C19.9874 6.7318 21.5898 10.3102 20.7992 13.7845C20.0085 17.2588 17.0155 19.7914 13.4583 19.9961C9.90104 20.2009 6.63718 18.0283 5.45318 14.6677C5.26966 14.1468 4.69861 13.8733 4.17771 14.0568C3.65681 14.2403 3.38331 14.8114 3.56683 15.3323C5.04683 19.5331 9.12665 22.2487 13.5732 21.9928C18.0197 21.7369 21.761 18.5711 22.7493 14.2283C23.7376 9.8854 21.7346 5.41241 17.8366 3.25759Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.web.test.tsx.snap
index d42d05ffbeb..edd849feee5 100644
--- a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<RotateCounterClockWiseIcon /> should render RotateCounterClockWiseIcon
     <path
       d="M17.8366 3.25759C13.9432 1.10528 9.09681 1.784 5.94449 4.92134L3 7.63918V4C3 3.44772 2.55228 3 2 3C1.44772 3 1 3.44772 1 4V10C1 10.5523 1.44772 11 2 11H8C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9H4.47426L7.32478 6.36875C7.33213 6.36185 7.33937 6.35483 7.34651 6.34771C9.86814 3.83034 13.7507 3.28409 16.869 5.00794C19.9874 6.7318 21.5898 10.3102 20.7992 13.7845C20.0085 17.2588 17.0155 19.7914 13.4583 19.9961C9.90104 20.2009 6.63718 18.0283 5.45318 14.6677C5.26966 14.1468 4.69861 13.8733 4.17771 14.0568C3.65681 14.2403 3.38331 14.8114 3.56683 15.3323C5.04683 19.5331 9.12665 22.2487 13.5732 21.9928C18.0197 21.7369 21.761 18.5711 22.7493 14.2283C23.7376 9.8854 21.7346 5.41241 17.8366 3.25759Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/RoutesIcon/RoutesIcon.native.test.tsx b/packages/blade/src/components/Icons/RoutesIcon/RoutesIcon.native.test.tsx
index 4b7985bac4c..9b8c8590ae5 100644
--- a/packages/blade/src/components/Icons/RoutesIcon/RoutesIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RoutesIcon/RoutesIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RoutesIcon />', () => {
   it('should render RoutesIcon', () => {
     const renderTree = renderWithTheme(
-      <RoutesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RoutesIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RoutesIcon/RoutesIcon.web.test.tsx b/packages/blade/src/components/Icons/RoutesIcon/RoutesIcon.web.test.tsx
index 4a89b306957..ca2ddef8c3d 100644
--- a/packages/blade/src/components/Icons/RoutesIcon/RoutesIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RoutesIcon/RoutesIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RoutesIcon />', () => {
   it('should render RoutesIcon', () => {
     const { container } = renderWithTheme(
-      <RoutesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RoutesIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.native.test.tsx.snap
index d8e1312ee2e..141f9254db4 100644
--- a/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<RoutesIcon /> should render RoutesIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6.84725 5.73737C6.84725 6.78818 5.9641 7.64003 4.87468 7.64003C3.78527 7.64003 2.90212 6.78818 2.90212 5.73737C2.90212 4.68656 3.78527 3.83471 4.87468 3.83471C5.9641 3.83471 6.84725 4.68656 6.84725 5.73737ZM4.87468 9.47474C6.62453 9.47474 8.10345 8.3559 8.58449 6.81943C8.66996 6.84375 8.76044 6.8568 8.85408 6.8568H18.9597C20.1406 6.8568 21.0979 7.78019 21.0979 8.91925C21.0979 10.0583 20.1406 10.9817 18.9597 10.9817H8.12103C5.74502 10.9817 3.81889 12.8396 3.81889 15.1314C3.81889 17.4232 5.74502 19.281 8.12103 19.281H11.3972L10.0167 20.6126C9.73813 20.8813 9.73813 21.3169 10.0167 21.5856C10.2952 21.8543 10.7469 21.8543 11.0254 21.5856L13.8615 18.8501C14.14 18.5814 14.14 18.1458 13.8615 17.8771L11.0254 15.1415C10.7469 14.8729 10.2952 14.8729 10.0167 15.1415C9.73813 15.4102 9.73813 15.8459 10.0167 16.1145L11.3974 17.4463H8.12103C6.79553 17.4463 5.72101 16.4099 5.72101 15.1314C5.72101 13.8528 6.79553 12.8164 8.12103 12.8164H18.9597C21.1911 12.8164 23 11.0716 23 8.91925C23 6.76691 21.1911 5.0221 18.9597 5.0221H8.85408C8.79514 5.0221 8.73745 5.02727 8.68148 5.03717C8.34165 3.30776 6.7665 2 4.87468 2C2.73475 2 1 3.67328 1 5.73737C1 7.80146 2.73475 9.47474 4.87468 9.47474ZM20.8799 18.2626C20.8799 19.3134 19.9967 20.1653 18.9073 20.1653C17.8179 20.1653 16.9347 19.3134 16.9347 18.2626C16.9347 17.2118 17.8179 16.36 18.9073 16.36C19.9967 16.36 20.8799 17.2118 20.8799 18.2626ZM22.782 18.2626C22.782 20.3267 21.0472 22 18.9073 22C16.7674 22 15.0326 20.3267 15.0326 18.2626C15.0326 16.1985 16.7674 14.5253 18.9073 14.5253C21.0472 14.5253 22.782 16.1985 22.782 18.2626Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.web.test.tsx.snap
index 805b57b3344..026c318abc6 100644
--- a/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<RoutesIcon /> should render RoutesIcon 1`] = `
       clip-rule="evenodd"
       d="M6.84725 5.73737C6.84725 6.78818 5.9641 7.64003 4.87468 7.64003C3.78527 7.64003 2.90212 6.78818 2.90212 5.73737C2.90212 4.68656 3.78527 3.83471 4.87468 3.83471C5.9641 3.83471 6.84725 4.68656 6.84725 5.73737ZM4.87468 9.47474C6.62453 9.47474 8.10345 8.3559 8.58449 6.81943C8.66996 6.84375 8.76044 6.8568 8.85408 6.8568H18.9597C20.1406 6.8568 21.0979 7.78019 21.0979 8.91925C21.0979 10.0583 20.1406 10.9817 18.9597 10.9817H8.12103C5.74502 10.9817 3.81889 12.8396 3.81889 15.1314C3.81889 17.4232 5.74502 19.281 8.12103 19.281H11.3972L10.0167 20.6126C9.73813 20.8813 9.73813 21.3169 10.0167 21.5856C10.2952 21.8543 10.7469 21.8543 11.0254 21.5856L13.8615 18.8501C14.14 18.5814 14.14 18.1458 13.8615 17.8771L11.0254 15.1415C10.7469 14.8729 10.2952 14.8729 10.0167 15.1415C9.73813 15.4102 9.73813 15.8459 10.0167 16.1145L11.3974 17.4463H8.12103C6.79553 17.4463 5.72101 16.4099 5.72101 15.1314C5.72101 13.8528 6.79553 12.8164 8.12103 12.8164H18.9597C21.1911 12.8164 23 11.0716 23 8.91925C23 6.76691 21.1911 5.0221 18.9597 5.0221H8.85408C8.79514 5.0221 8.73745 5.02727 8.68148 5.03717C8.34165 3.30776 6.7665 2 4.87468 2C2.73475 2 1 3.67328 1 5.73737C1 7.80146 2.73475 9.47474 4.87468 9.47474ZM20.8799 18.2626C20.8799 19.3134 19.9967 20.1653 18.9073 20.1653C17.8179 20.1653 16.9347 19.3134 16.9347 18.2626C16.9347 17.2118 17.8179 16.36 18.9073 16.36C19.9967 16.36 20.8799 17.2118 20.8799 18.2626ZM22.782 18.2626C22.782 20.3267 21.0472 22 18.9073 22C16.7674 22 15.0326 20.3267 15.0326 18.2626C15.0326 16.1985 16.7674 14.5253 18.9073 14.5253C21.0472 14.5253 22.782 16.1985 22.782 18.2626Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/RupeeIcon/RupeeIcon.native.test.tsx b/packages/blade/src/components/Icons/RupeeIcon/RupeeIcon.native.test.tsx
index 87bdc7892a1..577cb416fa4 100644
--- a/packages/blade/src/components/Icons/RupeeIcon/RupeeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RupeeIcon/RupeeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RupeeIcon />', () => {
   it('should render RupeeIcon', () => {
     const renderTree = renderWithTheme(
-      <RupeeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RupeeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RupeeIcon/RupeeIcon.web.test.tsx b/packages/blade/src/components/Icons/RupeeIcon/RupeeIcon.web.test.tsx
index 6a243b85135..f6babbcc280 100644
--- a/packages/blade/src/components/Icons/RupeeIcon/RupeeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RupeeIcon/RupeeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RupeeIcon />', () => {
   it('should render RupeeIcon', () => {
     const { container } = renderWithTheme(
-      <RupeeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RupeeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.native.test.tsx.snap
index ac52ed46854..ba3421c46e2 100644
--- a/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<RupeeIcon /> should render RupeeIcon 1`] = `
     >
       <RNSVGPath
         d="M17 7.78125L16.5015 9.59375H7L7.49853 7.78125H17ZM12.5425 20L7.17595 13L7.14663 11.6875H9.81525C10.5093 11.6875 11.1007 11.5833 11.5894 11.375C12.0782 11.1615 12.4521 10.8437 12.7111 10.4219C12.9702 9.99479 13.0997 9.45833 13.0997 8.8125C13.0997 7.85937 12.8309 7.11198 12.2933 6.57031C11.7556 6.02344 10.9296 5.75 9.81525 5.75H7L7.49853 4H9.81525C11.0078 4 11.9853 4.21094 12.7478 4.63281C13.5152 5.04948 14.0821 5.6224 14.4487 6.35156C14.8201 7.07552 15.0059 7.89583 15.0059 8.8125C15.0059 9.64062 14.8348 10.4036 14.4927 11.1016C14.1554 11.7943 13.6129 12.3516 12.8651 12.7734C12.1222 13.1953 11.1398 13.4062 9.91789 13.4062H9.8739L14.8299 19.875V20H12.5425ZM17 4L16.5015 5.8125L9.02346 5.75L9.52199 4H17Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.web.test.tsx.snap
index 0605c4ff422..4178db1715e 100644
--- a/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<RupeeIcon /> should render RupeeIcon 1`] = `
     <path
       d="M17 7.78125L16.5015 9.59375H7L7.49853 7.78125H17ZM12.5425 20L7.17595 13L7.14663 11.6875H9.81525C10.5093 11.6875 11.1007 11.5833 11.5894 11.375C12.0782 11.1615 12.4521 10.8437 12.7111 10.4219C12.9702 9.99479 13.0997 9.45833 13.0997 8.8125C13.0997 7.85937 12.8309 7.11198 12.2933 6.57031C11.7556 6.02344 10.9296 5.75 9.81525 5.75H7L7.49853 4H9.81525C11.0078 4 11.9853 4.21094 12.7478 4.63281C13.5152 5.04948 14.0821 5.6224 14.4487 6.35156C14.8201 7.07552 15.0059 7.89583 15.0059 8.8125C15.0059 9.64062 14.8348 10.4036 14.4927 11.1016C14.1554 11.7943 13.6129 12.3516 12.8651 12.7734C12.1222 13.1953 11.1398 13.4062 9.91789 13.4062H9.8739L14.8299 19.875V20H12.5425ZM17 4L16.5015 5.8125L9.02346 5.75L9.52199 4H17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/RupeesIcon/RupeesIcon.native.test.tsx b/packages/blade/src/components/Icons/RupeesIcon/RupeesIcon.native.test.tsx
index f31c902746f..7575481c7cf 100644
--- a/packages/blade/src/components/Icons/RupeesIcon/RupeesIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/RupeesIcon/RupeesIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<RupeesIcon />', () => {
   it('should render RupeesIcon', () => {
     const renderTree = renderWithTheme(
-      <RupeesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RupeesIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RupeesIcon/RupeesIcon.web.test.tsx b/packages/blade/src/components/Icons/RupeesIcon/RupeesIcon.web.test.tsx
index ddc59390ba9..11e22d2b98d 100644
--- a/packages/blade/src/components/Icons/RupeesIcon/RupeesIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/RupeesIcon/RupeesIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<RupeesIcon />', () => {
   it('should render RupeesIcon', () => {
     const { container } = renderWithTheme(
-      <RupeesIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <RupeesIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.native.test.tsx.snap
index 8b25ff7d43c..30711f91e97 100644
--- a/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<RupeesIcon /> should render RupeesIcon 1`] = `
     >
       <RNSVGPath
         d="M17 7.78125L16.5015 9.59375H7L7.49853 7.78125H17ZM12.5425 20L7.17595 13L7.14663 11.6875H9.81525C10.5093 11.6875 11.1007 11.5833 11.5894 11.375C12.0782 11.1615 12.4521 10.8437 12.7111 10.4219C12.9702 9.99479 13.0997 9.45833 13.0997 8.8125C13.0997 7.85937 12.8309 7.11198 12.2933 6.57031C11.7556 6.02344 10.9296 5.75 9.81525 5.75H7L7.49853 4H9.81525C11.0078 4 11.9853 4.21094 12.7478 4.63281C13.5152 5.04948 14.0821 5.6224 14.4487 6.35156C14.8201 7.07552 15.0059 7.89583 15.0059 8.8125C15.0059 9.64062 14.8348 10.4036 14.4927 11.1016C14.1554 11.7943 13.6129 12.3516 12.8651 12.7734C12.1222 13.1953 11.1398 13.4062 9.91789 13.4062H9.8739L14.8299 19.875V20H12.5425ZM17 4L16.5015 5.8125L9.02346 5.75L9.52199 4H17Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.web.test.tsx.snap
index 8c880c4b946..dc551b0c9c4 100644
--- a/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<RupeesIcon /> should render RupeesIcon 1`] = `
     <path
       d="M17 7.78125L16.5015 9.59375H7L7.49853 7.78125H17ZM12.5425 20L7.17595 13L7.14663 11.6875H9.81525C10.5093 11.6875 11.1007 11.5833 11.5894 11.375C12.0782 11.1615 12.4521 10.8437 12.7111 10.4219C12.9702 9.99479 13.0997 9.45833 13.0997 8.8125C13.0997 7.85937 12.8309 7.11198 12.2933 6.57031C11.7556 6.02344 10.9296 5.75 9.81525 5.75H7L7.49853 4H9.81525C11.0078 4 11.9853 4.21094 12.7478 4.63281C13.5152 5.04948 14.0821 5.6224 14.4487 6.35156C14.8201 7.07552 15.0059 7.89583 15.0059 8.8125C15.0059 9.64062 14.8348 10.4036 14.4927 11.1016C14.1554 11.7943 13.6129 12.3516 12.8651 12.7734C12.1222 13.1953 11.1398 13.4062 9.91789 13.4062H9.8739L14.8299 19.875V20H12.5425ZM17 4L16.5015 5.8125L9.02346 5.75L9.52199 4H17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/SaveIcon/SaveIcon.native.test.tsx b/packages/blade/src/components/Icons/SaveIcon/SaveIcon.native.test.tsx
index 825d00f6d7f..899f90fd408 100644
--- a/packages/blade/src/components/Icons/SaveIcon/SaveIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SaveIcon/SaveIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SaveIcon />', () => {
   it('should render SaveIcon', () => {
     const renderTree = renderWithTheme(
-      <SaveIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SaveIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SaveIcon/SaveIcon.web.test.tsx b/packages/blade/src/components/Icons/SaveIcon/SaveIcon.web.test.tsx
index 3355ea06e89..da3f468f2ab 100644
--- a/packages/blade/src/components/Icons/SaveIcon/SaveIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SaveIcon/SaveIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SaveIcon />', () => {
   it('should render SaveIcon', () => {
     const { container } = renderWithTheme(
-      <SaveIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SaveIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.native.test.tsx.snap
index 5a97734476f..048d9c68b8b 100644
--- a/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SaveIcon /> should render SaveIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V8C22 7.73478 21.8946 7.48043 21.7071 7.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H6V13C6 12.4477 6.44772 12 7 12H17C17.5523 12 18 12.4477 18 13V20H19C19.5523 20 20 19.5523 20 19V8.41421L15.5858 4H8V7H15C15.5523 7 16 7.44772 16 8C16 8.55228 15.5523 9 15 9H7C6.44772 9 6 8.55228 6 8V4H5ZM8 14V20H16V14H8Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.web.test.tsx.snap
index bde6028cf64..06b15e1768d 100644
--- a/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<SaveIcon /> should render SaveIcon 1`] = `
       clip-rule="evenodd"
       d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V8C22 7.73478 21.8946 7.48043 21.7071 7.29289L16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2H5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H6V13C6 12.4477 6.44772 12 7 12H17C17.5523 12 18 12.4477 18 13V20H19C19.5523 20 20 19.5523 20 19V8.41421L15.5858 4H8V7H15C15.5523 7 16 7.44772 16 8C16 8.55228 15.5523 9 15 9H7C6.44772 9 6 8.55228 6 8V4H5ZM8 14V20H16V14H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ScissorsIcon/ScissorsIcon.native.test.tsx b/packages/blade/src/components/Icons/ScissorsIcon/ScissorsIcon.native.test.tsx
index 903833720cd..c5407c43ba0 100644
--- a/packages/blade/src/components/Icons/ScissorsIcon/ScissorsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ScissorsIcon/ScissorsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ScissorsIcon />', () => {
   it('should render ScissorsIcon', () => {
     const renderTree = renderWithTheme(
-      <ScissorsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ScissorsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ScissorsIcon/ScissorsIcon.web.test.tsx b/packages/blade/src/components/Icons/ScissorsIcon/ScissorsIcon.web.test.tsx
index 7f4d9398df5..e4c6427ddb4 100644
--- a/packages/blade/src/components/Icons/ScissorsIcon/ScissorsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ScissorsIcon/ScissorsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ScissorsIcon />', () => {
   it('should render ScissorsIcon', () => {
     const { container } = renderWithTheme(
-      <ScissorsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ScissorsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.native.test.tsx.snap
index d9d56b3dff7..2a007d60b83 100644
--- a/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.native.test.tsx.snap
@@ -65,7 +65,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -83,7 +83,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -98,7 +98,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -113,7 +113,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -128,7 +128,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4282603381}
+          stroke={4280563015}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -139,7 +139,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
           name="clip0_83_463"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.web.test.tsx.snap
index c4cb5f41ecc..e29135f5e10 100644
--- a/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.web.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
         d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z"
         data-blade-component="svg-path"
         fill-rule="evenodd"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -30,7 +30,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
         d="M6 21C7.65685 21 9 19.6569 9 18C9 16.3431 7.65685 15 6 15C4.34315 15 3 16.3431 3 18C3 19.6569 4.34315 21 6 21Z"
         data-blade-component="svg-path"
         fill-rule="evenodd"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -38,7 +38,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
       <path
         d="M20 4L8.12 15.88"
         data-blade-component="svg-path"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -46,7 +46,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
       <path
         d="M14.47 14.48L20 20"
         data-blade-component="svg-path"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -54,7 +54,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
       <path
         d="M8.12 8.12L12 12"
         data-blade-component="svg-path"
-        stroke="hsla(216, 27%, 36%, 1)"
+        stroke="hsla(211, 33%, 21%, 1)"
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
@@ -69,7 +69,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/SearchIcon/SearchIcon.native.test.tsx b/packages/blade/src/components/Icons/SearchIcon/SearchIcon.native.test.tsx
index 573999752e3..ead14939ceb 100644
--- a/packages/blade/src/components/Icons/SearchIcon/SearchIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SearchIcon/SearchIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SearchIcon />', () => {
   it('should render SearchIcon', () => {
     const renderTree = renderWithTheme(
-      <SearchIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SearchIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SearchIcon/SearchIcon.web.test.tsx b/packages/blade/src/components/Icons/SearchIcon/SearchIcon.web.test.tsx
index d64f187357d..39a22fe61fe 100644
--- a/packages/blade/src/components/Icons/SearchIcon/SearchIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SearchIcon/SearchIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SearchIcon />', () => {
   it('should render SearchIcon', () => {
     const { container } = renderWithTheme(
-      <SearchIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SearchIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.native.test.tsx.snap
index 0a631bcfd75..31987d3f5a1 100644
--- a/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SearchIcon /> should render SearchIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M16.618 18.032a9 9 0 1 1 1.414-1.414l3.675 3.675a1 1 0 0 1-1.414 1.414l-3.675-3.675ZM4 11a7 7 0 1 1 12.041 4.857 1.009 1.009 0 0 0-.185.184A7 7 0 0 1 4 11Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.web.test.tsx.snap
index f7142dae4c9..f0598d07124 100644
--- a/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<SearchIcon /> should render SearchIcon 1`] = `
       clip-rule="evenodd"
       d="M16.618 18.032a9 9 0 1 1 1.414-1.414l3.675 3.675a1 1 0 0 1-1.414 1.414l-3.675-3.675ZM4 11a7 7 0 1 1 12.041 4.857 1.009 1.009 0 0 0-.185.184A7 7 0 0 1 4 11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/SendIcon/SendIcon.native.test.tsx b/packages/blade/src/components/Icons/SendIcon/SendIcon.native.test.tsx
index caa40f404e2..8802b95af11 100644
--- a/packages/blade/src/components/Icons/SendIcon/SendIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SendIcon/SendIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SendIcon />', () => {
   it('should render SendIcon', () => {
     const renderTree = renderWithTheme(
-      <SendIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SendIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SendIcon/SendIcon.web.test.tsx b/packages/blade/src/components/Icons/SendIcon/SendIcon.web.test.tsx
index cf2a1623115..d27a1122e67 100644
--- a/packages/blade/src/components/Icons/SendIcon/SendIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SendIcon/SendIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SendIcon />', () => {
   it('should render SendIcon', () => {
     const { container } = renderWithTheme(
-      <SendIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SendIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.native.test.tsx.snap
index 5f91d1e71da..b87fd66df90 100644
--- a/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SendIcon /> should render SendIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M22.7071 1.29292C22.9306 1.5164 23.0262 1.81935 22.9939 2.11081C22.9848 2.19252 22.9657 2.27332 22.9366 2.35121L15.9439 22.3304C15.8084 22.7174 15.4504 22.9825 15.0408 22.9992C14.6311 23.0159 14.2527 22.7808 14.0862 22.4062L10.2424 13.7576L1.59387 9.91384C1.21919 9.74731 0.984122 9.36894 1.00084 8.95926C1.01755 8.54958 1.28265 8.19162 1.66965 8.05617L21.6488 1.06348C21.7272 1.03414 21.8085 1.01497 21.8907 1.00598C21.9511 0.999338 22.0117 0.998262 22.0717 1.00259C22.3032 1.01913 22.5301 1.11591 22.7071 1.29292ZM18.1943 4.3915L4.71108 9.11063L10.7785 11.8073L18.1943 4.3915ZM12.1927 13.2215L19.6085 5.80571L14.8894 19.2889L12.1927 13.2215Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.web.test.tsx.snap
index ba1c89442e3..4c852ecd28a 100644
--- a/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<SendIcon /> should render SendIcon 1`] = `
       clip-rule="evenodd"
       d="M22.7071 1.29292C22.9306 1.5164 23.0262 1.81935 22.9939 2.11081C22.9848 2.19252 22.9657 2.27332 22.9366 2.35121L15.9439 22.3304C15.8084 22.7174 15.4504 22.9825 15.0408 22.9992C14.6311 23.0159 14.2527 22.7808 14.0862 22.4062L10.2424 13.7576L1.59387 9.91384C1.21919 9.74731 0.984122 9.36894 1.00084 8.95926C1.01755 8.54958 1.28265 8.19162 1.66965 8.05617L21.6488 1.06348C21.7272 1.03414 21.8085 1.01497 21.8907 1.00598C21.9511 0.999338 22.0117 0.998262 22.0717 1.00259C22.3032 1.01913 22.5301 1.11591 22.7071 1.29292ZM18.1943 4.3915L4.71108 9.11063L10.7785 11.8073L18.1943 4.3915ZM12.1927 13.2215L19.6085 5.80571L14.8894 19.2889L12.1927 13.2215Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ServerIcon/ServerIcon.native.test.tsx b/packages/blade/src/components/Icons/ServerIcon/ServerIcon.native.test.tsx
index 2b215f17ad0..ac993d53fdf 100644
--- a/packages/blade/src/components/Icons/ServerIcon/ServerIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ServerIcon/ServerIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ServerIcon />', () => {
   it('should render ServerIcon', () => {
     const renderTree = renderWithTheme(
-      <ServerIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ServerIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ServerIcon/ServerIcon.web.test.tsx b/packages/blade/src/components/Icons/ServerIcon/ServerIcon.web.test.tsx
index fa1be33f65d..d14684df940 100644
--- a/packages/blade/src/components/Icons/ServerIcon/ServerIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ServerIcon/ServerIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ServerIcon />', () => {
   it('should render ServerIcon', () => {
     const { container } = renderWithTheme(
-      <ServerIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ServerIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.native.test.tsx.snap
index 1d004e62202..728eae80d8b 100644
--- a/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 4C1 2.34315 2.34315 1 4 1H20C21.6569 1 23 2.34315 23 4V8C23 9.65685 21.6569 11 20 11H4C2.34315 11 1 9.65685 1 8V4ZM4 3C3.44772 3 3 3.44772 3 4V8C3 8.55228 3.44772 9 4 9H20C20.5523 9 21 8.55228 21 8V4C21 3.44772 20.5523 3 20 3H4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 16C1 14.3431 2.34315 13 4 13H20C21.6569 13 23 14.3431 23 16V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V16ZM4 15C3.44772 15 3 15.4477 3 16V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V16C21 15.4477 20.5523 15 20 15H4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -75,7 +75,7 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
       />
       <RNSVGPath
         d="M7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -84,7 +84,7 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
       />
       <RNSVGPath
         d="M7 18C7 18.5523 6.55228 19 6 19C5.44772 19 5 18.5523 5 18C5 17.4477 5.44772 17 6 17C6.55228 17 7 17.4477 7 18Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.web.test.tsx.snap
index 75e93b3651d..83ffc28525c 100644
--- a/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.web.test.tsx.snap
@@ -15,25 +15,25 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
       clip-rule="evenodd"
       d="M1 4C1 2.34315 2.34315 1 4 1H20C21.6569 1 23 2.34315 23 4V8C23 9.65685 21.6569 11 20 11H4C2.34315 11 1 9.65685 1 8V4ZM4 3C3.44772 3 3 3.44772 3 4V8C3 8.55228 3.44772 9 4 9H20C20.5523 9 21 8.55228 21 8V4C21 3.44772 20.5523 3 20 3H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M1 16C1 14.3431 2.34315 13 4 13H20C21.6569 13 23 14.3431 23 16V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V16ZM4 15C3.44772 15 3 15.4477 3 16V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V16C21 15.4477 20.5523 15 20 15H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M7 18C7 18.5523 6.55228 19 6 19C5.44772 19 5 18.5523 5 18C5 17.4477 5.44772 17 6 17C6.55228 17 7 17.4477 7 18Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/SettingsIcon/SettingsIcon.native.test.tsx b/packages/blade/src/components/Icons/SettingsIcon/SettingsIcon.native.test.tsx
index 4bad8462997..07b5ad6e05c 100644
--- a/packages/blade/src/components/Icons/SettingsIcon/SettingsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SettingsIcon/SettingsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SettingsIcon />', () => {
   it('should render SettingsIcon', () => {
     const renderTree = renderWithTheme(
-      <SettingsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SettingsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SettingsIcon/SettingsIcon.web.test.tsx b/packages/blade/src/components/Icons/SettingsIcon/SettingsIcon.web.test.tsx
index f6bf6ee1bc2..5b5235126ae 100644
--- a/packages/blade/src/components/Icons/SettingsIcon/SettingsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SettingsIcon/SettingsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SettingsIcon />', () => {
   it('should render SettingsIcon', () => {
     const { container } = renderWithTheme(
-      <SettingsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SettingsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.native.test.tsx.snap
index 9e51181d55a..c223367ce22 100644
--- a/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<SettingsIcon /> should render SettingsIcon 1`] = `
     >
       <RNSVGPath
         d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<SettingsIcon /> should render SettingsIcon 1`] = `
       />
       <RNSVGPath
         d="M12 2C11.4477 2 11 2.44772 11 3V3.17399C10.9958 4.2302 10.3647 5.18306 9.39393 5.59914C9.30943 5.63535 9.22054 5.65966 9.1298 5.67154C8.18476 6.00287 7.12514 5.77346 6.40073 5.06486L6.39285 5.05715L6.33289 4.99711C6.14533 4.80933 5.89041 4.70343 5.625 4.70343C5.35959 4.70343 5.10507 4.80894 4.9175 4.99671L4.91671 4.9975C4.72894 5.18507 4.62343 5.43959 4.62343 5.705C4.62343 5.97041 4.72894 6.22493 4.91671 6.4125L4.98491 6.48069C5.73506 7.24758 5.94813 8.39018 5.52745 9.37478C5.14428 10.3797 4.19067 11.0545 3.11338 11.0797L3.09 11.08H3C2.44772 11.08 2 11.5277 2 12.08C2 12.6323 2.44772 13.08 3 13.08H3.17399C4.22841 13.0842 5.17982 13.7131 5.59701 14.6811C6.03158 15.6711 5.82114 16.8261 5.06486 17.5993L5.05715 17.6071L4.99711 17.6671C4.80933 17.8547 4.70343 18.1096 4.70343 18.375C4.70343 18.6404 4.80894 18.8949 4.99671 19.0825L4.9975 19.0833C5.18507 19.2711 5.43959 19.3766 5.705 19.3766C5.97041 19.3766 6.22493 19.2711 6.4125 19.0833L6.48069 19.0151C7.24757 18.2649 8.39018 18.0519 9.37477 18.4725C10.3797 18.8557 11.0545 19.8093 11.0797 20.8866L11.08 20.91V21C11.08 21.5523 11.5277 22 12.08 22C12.6323 22 13.08 21.5523 13.08 21V20.83L13.08 20.826C13.0842 19.7716 13.7132 18.8201 14.6812 18.4029C15.6712 17.9684 16.8261 18.1789 17.5993 18.9351L17.6071 18.9428L17.6671 19.0029C17.8547 19.1907 18.1096 19.2966 18.375 19.2966C18.6404 19.2966 18.8949 19.1911 19.0825 19.0033L19.0833 19.0025C19.2711 18.8149 19.3766 18.5604 19.3766 18.295C19.3766 18.0296 19.2711 17.7751 19.0833 17.5875L19.0151 17.5193C18.2588 16.7462 18.0484 15.5912 18.4829 14.6012C18.9001 13.6332 19.8516 13.0042 20.906 13L20.91 13L21 13C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H20.83L20.826 11C19.7698 10.9958 18.8169 10.3647 18.4009 9.39393C18.3646 9.30943 18.3403 9.22054 18.3285 9.1298C17.9971 8.18476 18.2265 7.12514 18.9351 6.40073L18.9428 6.39285L19.0029 6.3329C19.1907 6.14533 19.2966 5.89041 19.2966 5.625C19.2966 5.35959 19.1911 5.10507 19.0033 4.9175L19.0025 4.91671C18.8149 4.72894 18.5604 4.62343 18.295 4.62343C18.0296 4.62343 17.7751 4.72894 17.5875 4.91671L17.5193 4.98491C16.7462 5.74119 15.5911 5.95158 14.6011 5.51701C13.6331 5.09982 13.0042 4.14841 13 3.09399L13 3.09V3C13 2.44772 12.5523 2 12 2ZM9 3C9 1.34315 10.3431 0 12 0C13.6569 0 15 1.34315 15 3V3.0875C15.0016 3.34598 15.1563 3.579 15.3939 3.68086L15.4038 3.68508C15.6456 3.7918 15.9277 3.74149 16.1177 3.55811L16.1725 3.50329C16.7352 2.93996 17.4988 2.62343 18.295 2.62343C19.0912 2.62343 19.8548 2.93996 20.4175 3.50329C20.9803 4.06592 21.2966 4.82914 21.2966 5.625C21.2966 6.42104 20.9802 7.18444 20.4171 7.7471L20.3619 7.80231C20.1785 7.99225 20.1281 8.27444 20.2349 8.51624C20.2631 8.58029 20.2845 8.64696 20.2988 8.71513C20.4175 8.88998 20.6161 8.99864 20.8325 9H21C22.6569 9 24 10.3431 24 12C24 13.6569 22.6569 15 21 15H20.9125C20.654 15.0016 20.421 15.1563 20.3191 15.3939L20.3149 15.4038C20.2082 15.6456 20.2585 15.9277 20.4419 16.1177L20.4967 16.1725C21.0598 16.7352 21.3766 17.499 21.3766 18.295C21.3766 19.091 21.0602 19.8544 20.4971 20.4171C19.9344 20.9802 19.171 21.2966 18.375 21.2966C17.579 21.2966 16.8156 20.9802 16.2529 20.4171L16.1977 20.3619C16.0077 20.1785 15.7256 20.1282 15.4838 20.2349L15.474 20.2392C15.2363 20.3411 15.0816 20.574 15.08 20.8325V21C15.08 22.6569 13.7369 24 12.08 24C10.4231 24 9.08 22.6569 9.08 21V20.9244C9.07021 20.6612 8.90248 20.4296 8.65482 20.3385C8.63505 20.3313 8.61551 20.3234 8.59624 20.3149C8.35443 20.2081 8.07224 20.2585 7.8823 20.4419L7.8275 20.4967C7.26483 21.0598 6.50105 21.3766 5.705 21.3766C4.90914 21.3766 4.14592 21.0603 3.58329 20.4975C3.01996 19.9348 2.70343 19.1712 2.70343 18.375C2.70343 17.5788 3.01996 16.8152 3.58329 16.2525L3.63811 16.1977C3.82149 16.0077 3.87185 15.7256 3.76514 15.4838L3.76081 15.474C3.65895 15.2363 3.42598 15.0816 3.1675 15.08H3C1.34315 15.08 0 13.7369 0 12.08C0 10.4231 1.34315 9.08 3 9.08H3.07565C3.33875 9.07021 3.57038 8.90248 3.66146 8.65482C3.66874 8.63505 3.67663 8.61551 3.68514 8.59624C3.79185 8.35444 3.74149 8.07225 3.5581 7.88231L3.50329 7.8275C2.93996 7.2648 2.62343 6.50123 2.62343 5.705C2.62343 4.90896 2.93981 4.14556 3.50289 3.58289C4.06556 3.01981 4.82896 2.70343 5.625 2.70343C6.42123 2.70343 7.1848 3.01996 7.7475 3.58329L7.80231 3.6381C7.99225 3.82149 8.27444 3.87185 8.51624 3.76514C8.5803 3.73687 8.64697 3.71548 8.71514 3.70121C8.88999 3.58253 8.99864 3.38394 9 3.1675V3Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.web.test.tsx.snap
index b32f980733d..642dcc24f5b 100644
--- a/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<SettingsIcon /> should render SettingsIcon 1`] = `
     <path
       d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M12 2C11.4477 2 11 2.44772 11 3V3.17399C10.9958 4.2302 10.3647 5.18306 9.39393 5.59914C9.30943 5.63535 9.22054 5.65966 9.1298 5.67154C8.18476 6.00287 7.12514 5.77346 6.40073 5.06486L6.39285 5.05715L6.33289 4.99711C6.14533 4.80933 5.89041 4.70343 5.625 4.70343C5.35959 4.70343 5.10507 4.80894 4.9175 4.99671L4.91671 4.9975C4.72894 5.18507 4.62343 5.43959 4.62343 5.705C4.62343 5.97041 4.72894 6.22493 4.91671 6.4125L4.98491 6.48069C5.73506 7.24758 5.94813 8.39018 5.52745 9.37478C5.14428 10.3797 4.19067 11.0545 3.11338 11.0797L3.09 11.08H3C2.44772 11.08 2 11.5277 2 12.08C2 12.6323 2.44772 13.08 3 13.08H3.17399C4.22841 13.0842 5.17982 13.7131 5.59701 14.6811C6.03158 15.6711 5.82114 16.8261 5.06486 17.5993L5.05715 17.6071L4.99711 17.6671C4.80933 17.8547 4.70343 18.1096 4.70343 18.375C4.70343 18.6404 4.80894 18.8949 4.99671 19.0825L4.9975 19.0833C5.18507 19.2711 5.43959 19.3766 5.705 19.3766C5.97041 19.3766 6.22493 19.2711 6.4125 19.0833L6.48069 19.0151C7.24757 18.2649 8.39018 18.0519 9.37477 18.4725C10.3797 18.8557 11.0545 19.8093 11.0797 20.8866L11.08 20.91V21C11.08 21.5523 11.5277 22 12.08 22C12.6323 22 13.08 21.5523 13.08 21V20.83L13.08 20.826C13.0842 19.7716 13.7132 18.8201 14.6812 18.4029C15.6712 17.9684 16.8261 18.1789 17.5993 18.9351L17.6071 18.9428L17.6671 19.0029C17.8547 19.1907 18.1096 19.2966 18.375 19.2966C18.6404 19.2966 18.8949 19.1911 19.0825 19.0033L19.0833 19.0025C19.2711 18.8149 19.3766 18.5604 19.3766 18.295C19.3766 18.0296 19.2711 17.7751 19.0833 17.5875L19.0151 17.5193C18.2588 16.7462 18.0484 15.5912 18.4829 14.6012C18.9001 13.6332 19.8516 13.0042 20.906 13L20.91 13L21 13C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H20.83L20.826 11C19.7698 10.9958 18.8169 10.3647 18.4009 9.39393C18.3646 9.30943 18.3403 9.22054 18.3285 9.1298C17.9971 8.18476 18.2265 7.12514 18.9351 6.40073L18.9428 6.39285L19.0029 6.3329C19.1907 6.14533 19.2966 5.89041 19.2966 5.625C19.2966 5.35959 19.1911 5.10507 19.0033 4.9175L19.0025 4.91671C18.8149 4.72894 18.5604 4.62343 18.295 4.62343C18.0296 4.62343 17.7751 4.72894 17.5875 4.91671L17.5193 4.98491C16.7462 5.74119 15.5911 5.95158 14.6011 5.51701C13.6331 5.09982 13.0042 4.14841 13 3.09399L13 3.09V3C13 2.44772 12.5523 2 12 2ZM9 3C9 1.34315 10.3431 0 12 0C13.6569 0 15 1.34315 15 3V3.0875C15.0016 3.34598 15.1563 3.579 15.3939 3.68086L15.4038 3.68508C15.6456 3.7918 15.9277 3.74149 16.1177 3.55811L16.1725 3.50329C16.7352 2.93996 17.4988 2.62343 18.295 2.62343C19.0912 2.62343 19.8548 2.93996 20.4175 3.50329C20.9803 4.06592 21.2966 4.82914 21.2966 5.625C21.2966 6.42104 20.9802 7.18444 20.4171 7.7471L20.3619 7.80231C20.1785 7.99225 20.1281 8.27444 20.2349 8.51624C20.2631 8.58029 20.2845 8.64696 20.2988 8.71513C20.4175 8.88998 20.6161 8.99864 20.8325 9H21C22.6569 9 24 10.3431 24 12C24 13.6569 22.6569 15 21 15H20.9125C20.654 15.0016 20.421 15.1563 20.3191 15.3939L20.3149 15.4038C20.2082 15.6456 20.2585 15.9277 20.4419 16.1177L20.4967 16.1725C21.0598 16.7352 21.3766 17.499 21.3766 18.295C21.3766 19.091 21.0602 19.8544 20.4971 20.4171C19.9344 20.9802 19.171 21.2966 18.375 21.2966C17.579 21.2966 16.8156 20.9802 16.2529 20.4171L16.1977 20.3619C16.0077 20.1785 15.7256 20.1282 15.4838 20.2349L15.474 20.2392C15.2363 20.3411 15.0816 20.574 15.08 20.8325V21C15.08 22.6569 13.7369 24 12.08 24C10.4231 24 9.08 22.6569 9.08 21V20.9244C9.07021 20.6612 8.90248 20.4296 8.65482 20.3385C8.63505 20.3313 8.61551 20.3234 8.59624 20.3149C8.35443 20.2081 8.07224 20.2585 7.8823 20.4419L7.8275 20.4967C7.26483 21.0598 6.50105 21.3766 5.705 21.3766C4.90914 21.3766 4.14592 21.0603 3.58329 20.4975C3.01996 19.9348 2.70343 19.1712 2.70343 18.375C2.70343 17.5788 3.01996 16.8152 3.58329 16.2525L3.63811 16.1977C3.82149 16.0077 3.87185 15.7256 3.76514 15.4838L3.76081 15.474C3.65895 15.2363 3.42598 15.0816 3.1675 15.08H3C1.34315 15.08 0 13.7369 0 12.08C0 10.4231 1.34315 9.08 3 9.08H3.07565C3.33875 9.07021 3.57038 8.90248 3.66146 8.65482C3.66874 8.63505 3.67663 8.61551 3.68514 8.59624C3.79185 8.35444 3.74149 8.07225 3.5581 7.88231L3.50329 7.8275C2.93996 7.2648 2.62343 6.50123 2.62343 5.705C2.62343 4.90896 2.93981 4.14556 3.50289 3.58289C4.06556 3.01981 4.82896 2.70343 5.625 2.70343C6.42123 2.70343 7.1848 3.01996 7.7475 3.58329L7.80231 3.6381C7.99225 3.82149 8.27444 3.87185 8.51624 3.76514C8.5803 3.73687 8.64697 3.71548 8.71514 3.70121C8.88999 3.58253 8.99864 3.38394 9 3.1675V3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/SettlementsIcon/SettlementsIcon.native.test.tsx b/packages/blade/src/components/Icons/SettlementsIcon/SettlementsIcon.native.test.tsx
index 992407754ef..fbfa2c8cd12 100644
--- a/packages/blade/src/components/Icons/SettlementsIcon/SettlementsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SettlementsIcon/SettlementsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SettlementsIcon />', () => {
   it('should render SettlementsIcon', () => {
     const renderTree = renderWithTheme(
-      <SettlementsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SettlementsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SettlementsIcon/SettlementsIcon.web.test.tsx b/packages/blade/src/components/Icons/SettlementsIcon/SettlementsIcon.web.test.tsx
index b1402563e31..e5f84783601 100644
--- a/packages/blade/src/components/Icons/SettlementsIcon/SettlementsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SettlementsIcon/SettlementsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SettlementsIcon />', () => {
   it('should render SettlementsIcon', () => {
     const { container } = renderWithTheme(
-      <SettlementsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SettlementsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.native.test.tsx.snap
index 20f11c71e15..0ca84740a34 100644
--- a/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<SettlementsIcon /> should render SettlementsIcon 1`] = `
     >
       <RNSVGPath
         d="m22.763 7.879-7.797 9.697c-.097.118-.22.216-.362.29a1.283 1.283 0 0 1-.461.134h-.11c-.293 0-.575-.099-.79-.276l-3.58-2.957-2.054 2.582a1.059 1.059 0 0 1-.357.302c-.142.075-.302.12-.467.132h-.11c-.29.004-.57-.095-.779-.276l-4.502-3.705a1.01 1.01 0 0 1-.281-.321.906.906 0 0 1-.036-.798.984.984 0 0 1 .25-.34 1.09 1.09 0 0 1 .358-.252 1.2 1.2 0 0 1 1.268.193l3.558 2.907 7.006-8.742c.083-.115.192-.213.32-.288a1.22 1.22 0 0 1 .877-.13c.148.035.286.097.406.182.13.075.241.173.326.289a.928.928 0 0 1 .166.383.887.887 0 0 1-.022.41.95.95 0 0 1-.207.367l-4.392 5.41 2.833 2.346 7.072-8.752a1.05 1.05 0 0 1 .322-.286 1.22 1.22 0 0 1 .876-.124c.148.035.286.098.405.184.129.074.238.172.322.287a.93.93 0 0 1 .164.38.887.887 0 0 1-.02.407.949.949 0 0 1-.202.365Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.web.test.tsx.snap
index f3d789ff85b..0089325a232 100644
--- a/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<SettlementsIcon /> should render SettlementsIcon 1`] = `
     <path
       d="m22.763 7.879-7.797 9.697c-.097.118-.22.216-.362.29a1.283 1.283 0 0 1-.461.134h-.11c-.293 0-.575-.099-.79-.276l-3.58-2.957-2.054 2.582a1.059 1.059 0 0 1-.357.302c-.142.075-.302.12-.467.132h-.11c-.29.004-.57-.095-.779-.276l-4.502-3.705a1.01 1.01 0 0 1-.281-.321.906.906 0 0 1-.036-.798.984.984 0 0 1 .25-.34 1.09 1.09 0 0 1 .358-.252 1.2 1.2 0 0 1 1.268.193l3.558 2.907 7.006-8.742c.083-.115.192-.213.32-.288a1.22 1.22 0 0 1 .877-.13c.148.035.286.097.406.182.13.075.241.173.326.289a.928.928 0 0 1 .166.383.887.887 0 0 1-.022.41.95.95 0 0 1-.207.367l-4.392 5.41 2.833 2.346 7.072-8.752a1.05 1.05 0 0 1 .322-.286 1.22 1.22 0 0 1 .876-.124c.148.035.286.098.405.184.129.074.238.172.322.287a.93.93 0 0 1 .164.38.887.887 0 0 1-.02.407.949.949 0 0 1-.202.365Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/ShareIcon/ShareIcon.native.test.tsx b/packages/blade/src/components/Icons/ShareIcon/ShareIcon.native.test.tsx
index f58cd6bcd5f..37fca758686 100644
--- a/packages/blade/src/components/Icons/ShareIcon/ShareIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ShareIcon/ShareIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ShareIcon />', () => {
   it('should render ShareIcon', () => {
     const renderTree = renderWithTheme(
-      <ShareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ShareIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ShareIcon/ShareIcon.web.test.tsx b/packages/blade/src/components/Icons/ShareIcon/ShareIcon.web.test.tsx
index 3e52a2b4a52..ed6ee6c303d 100644
--- a/packages/blade/src/components/Icons/ShareIcon/ShareIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ShareIcon/ShareIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ShareIcon />', () => {
   it('should render ShareIcon', () => {
     const { container } = renderWithTheme(
-      <ShareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ShareIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.native.test.tsx.snap
index 6ee18029a91..66a04fe73b4 100644
--- a/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M14 5C14 2.79086 15.7909 1 18 1C20.2091 1 22 2.79086 22 5C22 7.20914 20.2091 9 18 9C15.7909 9 14 7.20914 14 5ZM18 3C16.8954 3 16 3.89543 16 5C16 6.10457 16.8954 7 18 7C19.1046 7 20 6.10457 20 5C20 3.89543 19.1046 3 18 3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 12C2 9.79086 3.79086 8 6 8C8.20914 8 10 9.79086 10 12C10 14.2091 8.20914 16 6 16C3.79086 16 2 14.2091 2 12ZM6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M14 19C14 16.7909 15.7909 15 18 15C20.2091 15 22 16.7909 22 19C22 21.2091 20.2091 23 18 23C15.7909 23 14 21.2091 14 19ZM18 17C16.8954 17 16 17.8954 16 19C16 20.1046 16.8954 21 18 21C19.1046 21 20 20.1046 20 19C20 17.8954 19.1046 17 18 17Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -88,7 +88,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7.72599 13.0065C8.00406 12.5293 8.6163 12.3679 9.09348 12.646L15.9235 16.626C16.4007 16.9041 16.5621 17.5163 16.284 17.9935C16.0059 18.4707 15.3937 18.6321 14.9165 18.354L8.08652 14.374C7.60934 14.0959 7.44793 13.4837 7.72599 13.0065Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -100,7 +100,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M16.2737 6.00597C16.5521 6.48297 16.391 7.09532 15.914 7.37369L9.09403 11.3537C8.61703 11.6321 8.00468 11.471 7.72631 10.994C7.44795 10.517 7.60897 9.90468 8.08597 9.62631L14.906 5.64631C15.383 5.36795 15.9953 5.52897 16.2737 6.00597Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.web.test.tsx.snap
index 91e27be156a..c52c5294b9f 100644
--- a/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.web.test.tsx.snap
@@ -15,35 +15,35 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
       clip-rule="evenodd"
       d="M14 5C14 2.79086 15.7909 1 18 1C20.2091 1 22 2.79086 22 5C22 7.20914 20.2091 9 18 9C15.7909 9 14 7.20914 14 5ZM18 3C16.8954 3 16 3.89543 16 5C16 6.10457 16.8954 7 18 7C19.1046 7 20 6.10457 20 5C20 3.89543 19.1046 3 18 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M2 12C2 9.79086 3.79086 8 6 8C8.20914 8 10 9.79086 10 12C10 14.2091 8.20914 16 6 16C3.79086 16 2 14.2091 2 12ZM6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M14 19C14 16.7909 15.7909 15 18 15C20.2091 15 22 16.7909 22 19C22 21.2091 20.2091 23 18 23C15.7909 23 14 21.2091 14 19ZM18 17C16.8954 17 16 17.8954 16 19C16 20.1046 16.8954 21 18 21C19.1046 21 20 20.1046 20 19C20 17.8954 19.1046 17 18 17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M7.72599 13.0065C8.00406 12.5293 8.6163 12.3679 9.09348 12.646L15.9235 16.626C16.4007 16.9041 16.5621 17.5163 16.284 17.9935C16.0059 18.4707 15.3937 18.6321 14.9165 18.354L8.08652 14.374C7.60934 14.0959 7.44793 13.4837 7.72599 13.0065Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M16.2737 6.00597C16.5521 6.48297 16.391 7.09532 15.914 7.37369L9.09403 11.3537C8.61703 11.6321 8.00468 11.471 7.72631 10.994C7.44795 10.517 7.60897 9.90468 8.08597 9.62631L14.906 5.64631C15.383 5.36795 15.9953 5.52897 16.2737 6.00597Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ShieldIcon/ShieldIcon.native.test.tsx b/packages/blade/src/components/Icons/ShieldIcon/ShieldIcon.native.test.tsx
index 6e73ad1427c..86ae0b423af 100644
--- a/packages/blade/src/components/Icons/ShieldIcon/ShieldIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ShieldIcon/ShieldIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ShieldIcon />', () => {
   it('should render ShieldIcon', () => {
     const renderTree = renderWithTheme(
-      <ShieldIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ShieldIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ShieldIcon/ShieldIcon.web.test.tsx b/packages/blade/src/components/Icons/ShieldIcon/ShieldIcon.web.test.tsx
index 0b0195d8172..acfb4ba008b 100644
--- a/packages/blade/src/components/Icons/ShieldIcon/ShieldIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ShieldIcon/ShieldIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ShieldIcon />', () => {
   it('should render ShieldIcon', () => {
     const { container } = renderWithTheme(
-      <ShieldIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ShieldIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.native.test.tsx.snap
index ff9fdd6382e..cb91f8994d4 100644
--- a/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ShieldIcon /> should render ShieldIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.7575 1.02986C11.9167 0.990047 12.0833 0.990047 12.2425 1.02986L20.2425 3.02986C20.6877 3.14115 21 3.54113 21 4V12C21 15.4464 18.7183 18.2003 16.6585 20.0026C15.6076 20.9221 14.5615 21.6408 13.78 22.1292C13.3882 22.3741 13.0603 22.5627 12.8281 22.6913C12.7119 22.7556 12.6194 22.805 12.5547 22.839C12.5223 22.856 12.4968 22.8692 12.4788 22.8784L12.4573 22.8894L12.4508 22.8926L12.4486 22.8937C12.4486 22.8937 12.4472 22.8944 12 22C11.5528 22.8944 11.5522 22.8941 11.5522 22.8941L11.5492 22.8926L11.5427 22.8894L11.5212 22.8784C11.5032 22.8692 11.4777 22.856 11.4453 22.839C11.3806 22.805 11.2881 22.7556 11.1719 22.6913C10.9397 22.5627 10.6118 22.3741 10.22 22.1292C9.43854 21.6408 8.39238 20.9221 7.3415 20.0026C5.28175 18.2003 3 15.4464 3 12V4C3 3.54113 3.3123 3.14115 3.75746 3.02986L11.7575 1.02986ZM12 22L11.5522 22.8941C11.8337 23.0349 12.1657 23.0352 12.4472 22.8944L12 22ZM12 20.8628C12.1916 20.7541 12.4367 20.6103 12.72 20.4333C13.4385 19.9842 14.3924 19.3279 15.3415 18.4974C17.2817 16.7997 19 14.5536 19 12V4.78078L12 3.03078L5 4.78078V12C5 14.5536 6.71825 16.7997 8.6585 18.4974C9.60762 19.3279 10.5615 19.9842 11.28 20.4333C11.5633 20.6103 11.8084 20.7541 12 20.8628Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.web.test.tsx.snap
index d9ec7ea13cb..8365c575d45 100644
--- a/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ShieldIcon /> should render ShieldIcon 1`] = `
       clip-rule="evenodd"
       d="M11.7575 1.02986C11.9167 0.990047 12.0833 0.990047 12.2425 1.02986L20.2425 3.02986C20.6877 3.14115 21 3.54113 21 4V12C21 15.4464 18.7183 18.2003 16.6585 20.0026C15.6076 20.9221 14.5615 21.6408 13.78 22.1292C13.3882 22.3741 13.0603 22.5627 12.8281 22.6913C12.7119 22.7556 12.6194 22.805 12.5547 22.839C12.5223 22.856 12.4968 22.8692 12.4788 22.8784L12.4573 22.8894L12.4508 22.8926L12.4486 22.8937C12.4486 22.8937 12.4472 22.8944 12 22C11.5528 22.8944 11.5522 22.8941 11.5522 22.8941L11.5492 22.8926L11.5427 22.8894L11.5212 22.8784C11.5032 22.8692 11.4777 22.856 11.4453 22.839C11.3806 22.805 11.2881 22.7556 11.1719 22.6913C10.9397 22.5627 10.6118 22.3741 10.22 22.1292C9.43854 21.6408 8.39238 20.9221 7.3415 20.0026C5.28175 18.2003 3 15.4464 3 12V4C3 3.54113 3.3123 3.14115 3.75746 3.02986L11.7575 1.02986ZM12 22L11.5522 22.8941C11.8337 23.0349 12.1657 23.0352 12.4472 22.8944L12 22ZM12 20.8628C12.1916 20.7541 12.4367 20.6103 12.72 20.4333C13.4385 19.9842 14.3924 19.3279 15.3415 18.4974C17.2817 16.7997 19 14.5536 19 12V4.78078L12 3.03078L5 4.78078V12C5 14.5536 6.71825 16.7997 8.6585 18.4974C9.60762 19.3279 10.5615 19.9842 11.28 20.4333C11.5633 20.6103 11.8084 20.7541 12 20.8628Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ShoppingCartIcon/ShoppingCartIcon.native.test.tsx b/packages/blade/src/components/Icons/ShoppingCartIcon/ShoppingCartIcon.native.test.tsx
index a0761292f59..692891bdb8f 100644
--- a/packages/blade/src/components/Icons/ShoppingCartIcon/ShoppingCartIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ShoppingCartIcon/ShoppingCartIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ShoppingCartIcon />', () => {
   it('should render ShoppingCartIcon', () => {
     const renderTree = renderWithTheme(
-      <ShoppingCartIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ShoppingCartIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ShoppingCartIcon/ShoppingCartIcon.web.test.tsx b/packages/blade/src/components/Icons/ShoppingCartIcon/ShoppingCartIcon.web.test.tsx
index cad92f29542..bfbecb7a145 100644
--- a/packages/blade/src/components/Icons/ShoppingCartIcon/ShoppingCartIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ShoppingCartIcon/ShoppingCartIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ShoppingCartIcon />', () => {
   it('should render ShoppingCartIcon', () => {
     const { container } = renderWithTheme(
-      <ShoppingCartIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ShoppingCartIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.native.test.tsx.snap
index 6f5fb7bed4c..71318c8e3dd 100644
--- a/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M1 0C0.447715 0 0 0.447715 0 1C0 1.28581 0.119901 1.54361 0.312146 1.72585C0.491389 1.89577 0.733522 2 1 2H3.24911C3.75029 2.00107 4.17343 2.37381 4.23859 2.87081L5.75859 14.3908C5.95576 15.8918 7.24033 17.0105 8.75378 17H19.3113C20.7593 17.0227 22.0175 16.0073 22.3006 14.5862L22.3008 14.5848L23.9805 6.19634C24.0394 5.90254 23.9634 5.59784 23.7734 5.3661C23.5835 5.13436 23.2996 5 23 5H6.53686L6.22146 2.60958C6.02571 1.11819 4.75574 0.00227875 3.25151 0H1ZM7.74141 14.1292L6.80075 7H21.7799L20.3395 14.1937L20.3392 14.1952C20.2448 14.6703 19.8235 15.0095 19.3392 15.0002L19.32 15L8.75 15L8.74152 15C8.23626 15.0043 7.80708 14.6302 7.74141 14.1292Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -67,7 +67,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M5 21C5 19.3431 6.34315 18 8 18C9.65685 18 11 19.3431 11 21C11 22.6569 9.65685 24 8 24C6.34315 24 5 22.6569 5 21ZM8 20C7.44772 20 7 20.4477 7 21C7 21.5523 7.44772 22 8 22C8.55228 22 9 21.5523 9 21C9 20.4477 8.55228 20 8 20Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -79,7 +79,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M17 21C17 19.3431 18.3431 18 20 18C21.6569 18 23 19.3431 23 21C23 22.6569 21.6569 24 20 24C18.3431 24 17 22.6569 17 21ZM20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -94,7 +94,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
           name="clip0_60_999"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.web.test.tsx.snap
index 0041a3ff282..6c60a34ba7b 100644
--- a/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.web.test.tsx.snap
@@ -19,21 +19,21 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
         clip-rule="evenodd"
         d="M1 0C0.447715 0 0 0.447715 0 1C0 1.28581 0.119901 1.54361 0.312146 1.72585C0.491389 1.89577 0.733522 2 1 2H3.24911C3.75029 2.00107 4.17343 2.37381 4.23859 2.87081L5.75859 14.3908C5.95576 15.8918 7.24033 17.0105 8.75378 17H19.3113C20.7593 17.0227 22.0175 16.0073 22.3006 14.5862L22.3008 14.5848L23.9805 6.19634C24.0394 5.90254 23.9634 5.59784 23.7734 5.3661C23.5835 5.13436 23.2996 5 23 5H6.53686L6.22146 2.60958C6.02571 1.11819 4.75574 0.00227875 3.25151 0H1ZM7.74141 14.1292L6.80075 7H21.7799L20.3395 14.1937L20.3392 14.1952C20.2448 14.6703 19.8235 15.0095 19.3392 15.0002L19.32 15L8.75 15L8.74152 15C8.23626 15.0043 7.80708 14.6302 7.74141 14.1292Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M5 21C5 19.3431 6.34315 18 8 18C9.65685 18 11 19.3431 11 21C11 22.6569 9.65685 24 8 24C6.34315 24 5 22.6569 5 21ZM8 20C7.44772 20 7 20.4477 7 21C7 21.5523 7.44772 22 8 22C8.55228 22 9 21.5523 9 21C9 20.4477 8.55228 20 8 20Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M17 21C17 19.3431 18.3431 18 20 18C21.6569 18 23 19.3431 23 21C23 22.6569 21.6569 24 20 24C18.3431 24 17 22.6569 17 21ZM20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -46,7 +46,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/ShuffleIcon/ShuffleIcon.native.test.tsx b/packages/blade/src/components/Icons/ShuffleIcon/ShuffleIcon.native.test.tsx
index 1401998ddb0..f69850d55c3 100644
--- a/packages/blade/src/components/Icons/ShuffleIcon/ShuffleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ShuffleIcon/ShuffleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ShuffleIcon />', () => {
   it('should render ShuffleIcon', () => {
     const renderTree = renderWithTheme(
-      <ShuffleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ShuffleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ShuffleIcon/ShuffleIcon.web.test.tsx b/packages/blade/src/components/Icons/ShuffleIcon/ShuffleIcon.web.test.tsx
index 31eaa5562c1..ec42b553e35 100644
--- a/packages/blade/src/components/Icons/ShuffleIcon/ShuffleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ShuffleIcon/ShuffleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ShuffleIcon />', () => {
   it('should render ShuffleIcon', () => {
     const { container } = renderWithTheme(
-      <ShuffleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ShuffleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.native.test.tsx.snap
index e01a28576fa..28a4893d422 100644
--- a/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ShuffleIcon /> should render ShuffleIcon 1`] = `
     >
       <RNSVGPath
         d="M14 3a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V5.414L3.707 20.707a1 1 0 0 1-1.414-1.414L17.586 4H15a1 1 0 0 1-1-1ZM21 16a1 1 0 1 0-2 0v2.586l-4.293-4.293a1 1 0 0 0-1.414 1.414L17.586 20H15a1 1 0 1 0 0 2h5a1 1 0 0 0 1-1v-5ZM3.707 3.293a1 1 0 0 0-1.414 1.414l5 5a1 1 0 0 0 1.414-1.414l-5-5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.web.test.tsx.snap
index 7fe4b9d8b24..8fc411f38c2 100644
--- a/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ShuffleIcon /> should render ShuffleIcon 1`] = `
     <path
       d="M14 3a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V5.414L3.707 20.707a1 1 0 0 1-1.414-1.414L17.586 4H15a1 1 0 0 1-1-1ZM21 16a1 1 0 1 0-2 0v2.586l-4.293-4.293a1 1 0 0 0-1.414 1.414L17.586 20H15a1 1 0 1 0 0 2h5a1 1 0 0 0 1-1v-5ZM3.707 3.293a1 1 0 0 0-1.414 1.414l5 5a1 1 0 0 0 1.414-1.414l-5-5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/SidebarIcon/SidebarIcon.native.test.tsx b/packages/blade/src/components/Icons/SidebarIcon/SidebarIcon.native.test.tsx
index 340f4bd1ecd..5f265ef5195 100644
--- a/packages/blade/src/components/Icons/SidebarIcon/SidebarIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SidebarIcon/SidebarIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SidebarIcon />', () => {
   it('should render SidebarIcon', () => {
     const renderTree = renderWithTheme(
-      <SidebarIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SidebarIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SidebarIcon/SidebarIcon.web.test.tsx b/packages/blade/src/components/Icons/SidebarIcon/SidebarIcon.web.test.tsx
index 6e30381538c..14ecdc35a3b 100644
--- a/packages/blade/src/components/Icons/SidebarIcon/SidebarIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SidebarIcon/SidebarIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SidebarIcon />', () => {
   it('should render SidebarIcon', () => {
     const { container } = renderWithTheme(
-      <SidebarIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SidebarIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.native.test.tsx.snap
index 55bb4edfcf7..e0985cfe666 100644
--- a/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SidebarIcon /> should render SidebarIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM8 4H5C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H8V4ZM10 20V4H19C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H10Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.web.test.tsx.snap
index 2195b5cba35..a281471cd52 100644
--- a/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<SidebarIcon /> should render SidebarIcon 1`] = `
       clip-rule="evenodd"
       d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM8 4H5C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H8V4ZM10 20V4H19C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H10Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/SkipBackIcon/SkipBackIcon.native.test.tsx b/packages/blade/src/components/Icons/SkipBackIcon/SkipBackIcon.native.test.tsx
index 6052c00a97d..5517f9f3f61 100644
--- a/packages/blade/src/components/Icons/SkipBackIcon/SkipBackIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SkipBackIcon/SkipBackIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SkipBackIcon />', () => {
   it('should render SkipBackIcon', () => {
     const renderTree = renderWithTheme(
-      <SkipBackIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SkipBackIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SkipBackIcon/SkipBackIcon.web.test.tsx b/packages/blade/src/components/Icons/SkipBackIcon/SkipBackIcon.web.test.tsx
index 7f4843ed9ca..1111b3f57a6 100644
--- a/packages/blade/src/components/Icons/SkipBackIcon/SkipBackIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SkipBackIcon/SkipBackIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SkipBackIcon />', () => {
   it('should render SkipBackIcon', () => {
     const { container } = renderWithTheme(
-      <SkipBackIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SkipBackIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.native.test.tsx.snap
index d0ce4c99dca..d691034aaa6 100644
--- a/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SkipBackIcon /> should render SkipBackIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M20 4.00001C20 3.6156 19.7797 3.26523 19.4332 3.09871C19.0867 2.93219 18.6755 2.979 18.3753 3.21914L8.37531 11.2191C8.13809 11.4089 8 11.6962 8 12C8 12.3038 8.13809 12.5911 8.37531 12.7809L18.3753 20.7809C18.6755 21.021 19.0867 21.0678 19.4332 20.9013C19.7797 20.7348 20 20.3844 20 20V4.00001ZM18 17.9194L10.6008 12L18 6.08063V17.9194Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<SkipBackIcon /> should render SkipBackIcon 1`] = `
       />
       <RNSVGPath
         d="M6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20C5.55228 20 6 19.5523 6 19V5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.web.test.tsx.snap
index 8911baf06be..05e4b043adf 100644
--- a/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<SkipBackIcon /> should render SkipBackIcon 1`] = `
       clip-rule="evenodd"
       d="M20 4.00001C20 3.6156 19.7797 3.26523 19.4332 3.09871C19.0867 2.93219 18.6755 2.979 18.3753 3.21914L8.37531 11.2191C8.13809 11.4089 8 11.6962 8 12C8 12.3038 8.13809 12.5911 8.37531 12.7809L18.3753 20.7809C18.6755 21.021 19.0867 21.0678 19.4332 20.9013C19.7797 20.7348 20 20.3844 20 20V4.00001ZM18 17.9194L10.6008 12L18 6.08063V17.9194Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20C5.55228 20 6 19.5523 6 19V5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/SkipForwardIcon/SkipForwardIcon.native.test.tsx b/packages/blade/src/components/Icons/SkipForwardIcon/SkipForwardIcon.native.test.tsx
index aed879953dd..68011f2964d 100644
--- a/packages/blade/src/components/Icons/SkipForwardIcon/SkipForwardIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SkipForwardIcon/SkipForwardIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SkipForwardIcon />', () => {
   it('should render SkipForwardIcon', () => {
     const renderTree = renderWithTheme(
-      <SkipForwardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SkipForwardIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SkipForwardIcon/SkipForwardIcon.web.test.tsx b/packages/blade/src/components/Icons/SkipForwardIcon/SkipForwardIcon.web.test.tsx
index 694e2b2eb49..4029d2b04c0 100644
--- a/packages/blade/src/components/Icons/SkipForwardIcon/SkipForwardIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SkipForwardIcon/SkipForwardIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SkipForwardIcon />', () => {
   it('should render SkipForwardIcon', () => {
     const { container } = renderWithTheme(
-      <SkipForwardIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SkipForwardIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.native.test.tsx.snap
index ea91c2d37e3..3e30a75714a 100644
--- a/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SkipForwardIcon /> should render SkipForwardIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3.56681 3.09871C3.91328 2.93219 4.32453 2.979 4.6247 3.21914L14.6247 11.2191C14.8619 11.4089 15 11.6962 15 12C15 12.3038 14.8619 12.5911 14.6247 12.7809L4.6247 20.7809C4.32453 21.021 3.91328 21.0678 3.56681 20.9013C3.22035 20.7348 3 20.3844 3 20V4.00001C3 3.6156 3.22035 3.26523 3.56681 3.09871ZM5 6.08063V17.9194L12.3992 12L5 6.08063Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<SkipForwardIcon /> should render SkipForwardIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M18 4.00001C18.5523 4.00001 19 4.44772 19 5.00001V19C19 19.5523 18.5523 20 18 20C17.4477 20 17 19.5523 17 19V5.00001C17 4.44772 17.4477 4.00001 18 4.00001Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.web.test.tsx.snap
index 6c143b8c106..5df411f2674 100644
--- a/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<SkipForwardIcon /> should render SkipForwardIcon 1`] = `
       clip-rule="evenodd"
       d="M3.56681 3.09871C3.91328 2.93219 4.32453 2.979 4.6247 3.21914L14.6247 11.2191C14.8619 11.4089 15 11.6962 15 12C15 12.3038 14.8619 12.5911 14.6247 12.7809L4.6247 20.7809C4.32453 21.021 3.91328 21.0678 3.56681 20.9013C3.22035 20.7348 3 20.3844 3 20V4.00001C3 3.6156 3.22035 3.26523 3.56681 3.09871ZM5 6.08063V17.9194L12.3992 12L5 6.08063Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M18 4.00001C18.5523 4.00001 19 4.44772 19 5.00001V19C19 19.5523 18.5523 20 18 20C17.4477 20 17 19.5523 17 19V5.00001C17 4.44772 17.4477 4.00001 18 4.00001Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/SlackIcon/SlackIcon.native.test.tsx b/packages/blade/src/components/Icons/SlackIcon/SlackIcon.native.test.tsx
index 26e62808e75..b47bbf9ba43 100644
--- a/packages/blade/src/components/Icons/SlackIcon/SlackIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SlackIcon/SlackIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SlackIcon />', () => {
   it('should render SlackIcon', () => {
     const renderTree = renderWithTheme(
-      <SlackIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SlackIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SlackIcon/SlackIcon.web.test.tsx b/packages/blade/src/components/Icons/SlackIcon/SlackIcon.web.test.tsx
index 616a27e1412..2ff20a959db 100644
--- a/packages/blade/src/components/Icons/SlackIcon/SlackIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SlackIcon/SlackIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SlackIcon />', () => {
   it('should render SlackIcon', () => {
     const { container } = renderWithTheme(
-      <SlackIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SlackIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.native.test.tsx.snap
index 796a66edb8e..552d921a86d 100644
--- a/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M12.2446 5.04472C12.7668 4.86495 13.3359 5.14257 13.5156 5.66478L14.1673 7.55779L16.0645 6.9047C16.5867 6.72494 17.1558 7.00255 17.3356 7.52476C17.5153 8.04697 17.2377 8.61603 16.7155 8.79579L14.8182 9.44889L15.7915 12.2763L17.6845 11.6247C18.2067 11.4449 18.7758 11.7225 18.9556 12.2447C19.1353 12.7669 18.8577 13.336 18.3355 13.5158L16.4425 14.1674L17.0956 16.0648C17.2754 16.587 16.9978 17.156 16.4756 17.3358C15.9534 17.5156 15.3843 17.238 15.2045 16.7157L14.5514 14.8184L11.724 15.7916L12.3757 17.6848C12.5554 18.207 12.2778 18.776 11.7556 18.9558C11.2334 19.1356 10.6643 18.858 10.4846 18.3357L9.83291 16.4426L7.9355 17.0958C7.41329 17.2755 6.84423 16.9979 6.66447 16.4757C6.48471 15.9535 6.76232 15.3844 7.28453 15.2047L9.18194 14.5515L8.20865 11.7241L6.3155 12.3758C5.79329 12.5556 5.22423 12.2779 5.04447 11.7557C4.86471 11.2335 5.14232 10.6645 5.66453 10.4847L7.55768 9.83302L6.90458 7.93574C6.72482 7.41353 7.00243 6.84447 7.52464 6.66471C8.04685 6.48495 8.61591 6.76256 8.79567 7.28477L9.44877 9.18205L12.2762 8.20877L11.6245 6.31575C11.4448 5.79354 11.7224 5.22448 12.2446 5.04472ZM11.073 13.9006L13.9004 12.9273L12.9272 10.0999L10.0997 11.0731L11.073 13.9006Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -67,7 +67,7 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M17.9919 0.883049C20.4045 2.18747 21.8873 4.8663 23.0378 8.71261C24.1896 12.5388 24.4093 15.5811 23.0973 17.9941C21.787 20.4039 19.1109 21.8869 15.2883 23.0378C11.4618 24.1898 8.41925 24.4096 6.0061 23.0975C3.59631 21.7872 2.11331 19.111 0.962492 15.2885C-0.189536 11.4619 -0.409347 8.41942 0.902757 6.00627C2.21304 3.59648 4.88922 2.11348 8.71176 0.962661C12.5347 -0.18827 15.5777 -0.422221 17.9919 0.883049ZM17.0407 2.64236C15.3673 1.73763 13.0054 1.75868 9.28832 2.87775C5.57086 3.99694 3.57204 5.28394 2.65982 6.96164C1.74942 8.63599 1.75961 10.9985 2.87758 14.7119C3.99677 18.4294 5.28377 20.4282 6.96147 21.3404C8.63582 22.2508 10.9983 22.2406 14.7118 21.1227C18.4292 20.0035 20.428 18.7165 21.3403 17.0388C22.2507 15.3644 22.2405 13.0019 21.1225 9.28849L21.122 9.28674C20.0025 5.54362 18.7154 3.54783 17.0407 2.64236Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -82,7 +82,7 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
           name="clip0_83_560"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.web.test.tsx.snap
index 7f18e533e5c..09058e0decf 100644
--- a/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.web.test.tsx.snap
@@ -19,14 +19,14 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
         clip-rule="evenodd"
         d="M12.2446 5.04472C12.7668 4.86495 13.3359 5.14257 13.5156 5.66478L14.1673 7.55779L16.0645 6.9047C16.5867 6.72494 17.1558 7.00255 17.3356 7.52476C17.5153 8.04697 17.2377 8.61603 16.7155 8.79579L14.8182 9.44889L15.7915 12.2763L17.6845 11.6247C18.2067 11.4449 18.7758 11.7225 18.9556 12.2447C19.1353 12.7669 18.8577 13.336 18.3355 13.5158L16.4425 14.1674L17.0956 16.0648C17.2754 16.587 16.9978 17.156 16.4756 17.3358C15.9534 17.5156 15.3843 17.238 15.2045 16.7157L14.5514 14.8184L11.724 15.7916L12.3757 17.6848C12.5554 18.207 12.2778 18.776 11.7556 18.9558C11.2334 19.1356 10.6643 18.858 10.4846 18.3357L9.83291 16.4426L7.9355 17.0958C7.41329 17.2755 6.84423 16.9979 6.66447 16.4757C6.48471 15.9535 6.76232 15.3844 7.28453 15.2047L9.18194 14.5515L8.20865 11.7241L6.3155 12.3758C5.79329 12.5556 5.22423 12.2779 5.04447 11.7557C4.86471 11.2335 5.14232 10.6645 5.66453 10.4847L7.55768 9.83302L6.90458 7.93574C6.72482 7.41353 7.00243 6.84447 7.52464 6.66471C8.04685 6.48495 8.61591 6.76256 8.79567 7.28477L9.44877 9.18205L12.2762 8.20877L11.6245 6.31575C11.4448 5.79354 11.7224 5.22448 12.2446 5.04472ZM11.073 13.9006L13.9004 12.9273L12.9272 10.0999L10.0997 11.0731L11.073 13.9006Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M17.9919 0.883049C20.4045 2.18747 21.8873 4.8663 23.0378 8.71261C24.1896 12.5388 24.4093 15.5811 23.0973 17.9941C21.787 20.4039 19.1109 21.8869 15.2883 23.0378C11.4618 24.1898 8.41925 24.4096 6.0061 23.0975C3.59631 21.7872 2.11331 19.111 0.962492 15.2885C-0.189536 11.4619 -0.409347 8.41942 0.902757 6.00627C2.21304 3.59648 4.88922 2.11348 8.71176 0.962661C12.5347 -0.18827 15.5777 -0.422221 17.9919 0.883049ZM17.0407 2.64236C15.3673 1.73763 13.0054 1.75868 9.28832 2.87775C5.57086 3.99694 3.57204 5.28394 2.65982 6.96164C1.74942 8.63599 1.75961 10.9985 2.87758 14.7119C3.99677 18.4294 5.28377 20.4282 6.96147 21.3404C8.63582 22.2508 10.9983 22.2406 14.7118 21.1227C18.4292 20.0035 20.428 18.7165 21.3403 17.0388C22.2507 15.3644 22.2405 13.0019 21.1225 9.28849L21.122 9.28674C20.0025 5.54362 18.7154 3.54783 17.0407 2.64236Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -39,7 +39,7 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/SlashIcon/SlashIcon.native.test.tsx b/packages/blade/src/components/Icons/SlashIcon/SlashIcon.native.test.tsx
index 0153e74f66e..5971b614cd0 100644
--- a/packages/blade/src/components/Icons/SlashIcon/SlashIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SlashIcon/SlashIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SlashIcon />', () => {
   it('should render SlashIcon', () => {
     const renderTree = renderWithTheme(
-      <SlashIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SlashIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SlashIcon/SlashIcon.web.test.tsx b/packages/blade/src/components/Icons/SlashIcon/SlashIcon.web.test.tsx
index ca944b77788..c6c9318cd23 100644
--- a/packages/blade/src/components/Icons/SlashIcon/SlashIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SlashIcon/SlashIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SlashIcon />', () => {
   it('should render SlashIcon', () => {
     const { container } = renderWithTheme(
-      <SlashIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SlashIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.native.test.tsx.snap
index 6729bacfbe9..eb4af8854b3 100644
--- a/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SlashIcon /> should render SlashIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM6.38231 4.9681C7.92199 3.73647 9.87499 3 12 3C16.9706 3 21 7.02944 21 12C21 14.125 20.2635 16.078 19.0319 17.6177L6.38231 4.9681ZM4.9681 6.38231C3.73647 7.92199 3 9.87499 3 12C3 16.9706 7.02944 21 12 21C14.125 21 16.078 20.2635 17.6177 19.0319L4.9681 6.38231Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.web.test.tsx.snap
index f2976d86dfa..4530b94bcdd 100644
--- a/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<SlashIcon /> should render SlashIcon 1`] = `
       clip-rule="evenodd"
       d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM6.38231 4.9681C7.92199 3.73647 9.87499 3 12 3C16.9706 3 21 7.02944 21 12C21 14.125 20.2635 16.078 19.0319 17.6177L6.38231 4.9681ZM4.9681 6.38231C3.73647 7.92199 3 9.87499 3 12C3 16.9706 7.02944 21 12 21C14.125 21 16.078 20.2635 17.6177 19.0319L4.9681 6.38231Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/SlidersIcon/SlidersIcon.native.test.tsx b/packages/blade/src/components/Icons/SlidersIcon/SlidersIcon.native.test.tsx
index 7f28a3cddf0..8ed721f58e6 100644
--- a/packages/blade/src/components/Icons/SlidersIcon/SlidersIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SlidersIcon/SlidersIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SlidersIcon />', () => {
   it('should render SlidersIcon', () => {
     const renderTree = renderWithTheme(
-      <SlidersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SlidersIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SlidersIcon/SlidersIcon.web.test.tsx b/packages/blade/src/components/Icons/SlidersIcon/SlidersIcon.web.test.tsx
index 1ab9e9bb5ca..f2102eba3a7 100644
--- a/packages/blade/src/components/Icons/SlidersIcon/SlidersIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SlidersIcon/SlidersIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SlidersIcon />', () => {
   it('should render SlidersIcon', () => {
     const { container } = renderWithTheme(
-      <SlidersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SlidersIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.native.test.tsx.snap
index 49938ac705f..97a522abca6 100644
--- a/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
     >
       <RNSVGPath
         d="M4 2C4.55228 2 5 2.44772 5 3V10C5 10.5523 4.55228 11 4 11C3.44772 11 3 10.5523 3 10V3C3 2.44772 3.44772 2 4 2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
       />
       <RNSVGPath
         d="M5 15H7C7.55228 15 8 14.5523 8 14C8 13.4477 7.55228 13 7 13H1C0.447715 13 0 13.4477 0 14C0 14.5523 0.447715 15 1 15H3V21C3 21.5523 3.44772 22 4 22C4.55228 22 5 21.5523 5 21V15Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
       />
       <RNSVGPath
         d="M13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V12Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -78,7 +78,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
       />
       <RNSVGPath
         d="M12 2C12.5523 2 13 2.44772 13 3V7H15C15.5523 7 16 7.44772 16 8C16 8.55228 15.5523 9 15 9H9C8.44771 9 8 8.55228 8 8C8 7.44772 8.44771 7 9 7H11V3C11 2.44772 11.4477 2 12 2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -87,7 +87,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
       />
       <RNSVGPath
         d="M23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17H21V21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21V17H17C16.4477 17 16 16.5523 16 16C16 15.4477 16.4477 15 17 15H23Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -96,7 +96,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
       />
       <RNSVGPath
         d="M20 2C20.5523 2 21 2.44772 21 3V12C21 12.5523 20.5523 13 20 13C19.4477 13 19 12.5523 19 12V3C19 2.44772 19.4477 2 20 2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.web.test.tsx.snap
index 12d66921bb1..13a73efacbd 100644
--- a/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.web.test.tsx.snap
@@ -14,32 +14,32 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
     <path
       d="M4 2C4.55228 2 5 2.44772 5 3V10C5 10.5523 4.55228 11 4 11C3.44772 11 3 10.5523 3 10V3C3 2.44772 3.44772 2 4 2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M5 15H7C7.55228 15 8 14.5523 8 14C8 13.4477 7.55228 13 7 13H1C0.447715 13 0 13.4477 0 14C0 14.5523 0.447715 15 1 15H3V21C3 21.5523 3.44772 22 4 22C4.55228 22 5 21.5523 5 21V15Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M12 2C12.5523 2 13 2.44772 13 3V7H15C15.5523 7 16 7.44772 16 8C16 8.55228 15.5523 9 15 9H9C8.44771 9 8 8.55228 8 8C8 7.44772 8.44771 7 9 7H11V3C11 2.44772 11.4477 2 12 2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17H21V21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21V17H17C16.4477 17 16 16.5523 16 16C16 15.4477 16.4477 15 17 15H23Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M20 2C20.5523 2 21 2.44772 21 3V12C21 12.5523 20.5523 13 20 13C19.4477 13 19 12.5523 19 12V3C19 2.44772 19.4477 2 20 2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/SmartCollectIcon/SmartCollectIcon.native.test.tsx b/packages/blade/src/components/Icons/SmartCollectIcon/SmartCollectIcon.native.test.tsx
index 692e9e46d4e..644d1d7535e 100644
--- a/packages/blade/src/components/Icons/SmartCollectIcon/SmartCollectIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SmartCollectIcon/SmartCollectIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SmartCollectIcon />', () => {
   it('should render SmartCollectIcon', () => {
     const renderTree = renderWithTheme(
-      <SmartCollectIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SmartCollectIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SmartCollectIcon/SmartCollectIcon.web.test.tsx b/packages/blade/src/components/Icons/SmartCollectIcon/SmartCollectIcon.web.test.tsx
index d91d101dd11..b14fece4f10 100644
--- a/packages/blade/src/components/Icons/SmartCollectIcon/SmartCollectIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SmartCollectIcon/SmartCollectIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SmartCollectIcon />', () => {
   it('should render SmartCollectIcon', () => {
     const { container } = renderWithTheme(
-      <SmartCollectIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SmartCollectIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.native.test.tsx.snap
index 897112babea..6137e9bee4e 100644
--- a/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SmartCollectIcon /> should render SmartCollectIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M14.7907 6.7619C14.7907 8.33986 13.5413 9.61905 12 9.61905C10.4587 9.61905 9.2093 8.33986 9.2093 6.7619C9.2093 5.18395 10.4587 3.90476 12 3.90476C13.5413 3.90476 14.7907 5.18395 14.7907 6.7619ZM16.6512 6.7619C16.6512 9.39183 14.5688 11.5238 12 11.5238C9.43123 11.5238 7.34884 9.39183 7.34884 6.7619C7.34884 4.13198 9.43123 2 12 2C14.5688 2 16.6512 4.13198 16.6512 6.7619ZM2 9.61905C2 8.92858 2.6617 8.66667 3.16279 8.66667C3.66388 8.66667 4.32558 8.9881 4.32558 9.67857V15.0952L6.90552 17.7292C7.15183 17.981 7.53233 17.9597 7.77762 17.7068L8.27907 17.1935C8.52435 16.9406 8.52622 16.5367 8.27907 16.2857L6.09157 14.0536C5.82397 13.7796 5.826 13.34 6.09157 13.064L6.63663 12.4985C6.9022 12.2224 7.3138 12.2022 7.5814 12.4762L10.3721 15.3333V21C10.3721 21.5523 9.92438 22 9.37209 22H6.02326C5.47097 22 5.02326 21.5523 5.02326 21V19.381L2 16.0476V9.61905ZM19.6744 9.67857C19.6744 8.9881 20.3361 8.66667 20.8372 8.66667C21.3383 8.66667 22 8.92858 22 9.61905V16.0476L18.9767 19.381V21C18.9767 21.5523 18.529 22 17.9767 22H14.6279C14.0756 22 13.6279 21.5523 13.6279 21V15.3333L16.4186 12.4762C16.6862 12.2022 17.0978 12.2224 17.3634 12.4985L17.9084 13.064C18.174 13.34 18.176 13.7796 17.9084 14.0536L15.7209 16.2857C15.4738 16.5367 15.4756 16.9406 15.7209 17.1935L16.2224 17.7068C16.4677 17.9597 16.8482 17.981 17.0945 17.7292L19.6744 15.0952V9.67857Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.web.test.tsx.snap
index b10d8141aa8..6cd8ff399dc 100644
--- a/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<SmartCollectIcon /> should render SmartCollectIcon 1`] = `
       clip-rule="evenodd"
       d="M14.7907 6.7619C14.7907 8.33986 13.5413 9.61905 12 9.61905C10.4587 9.61905 9.2093 8.33986 9.2093 6.7619C9.2093 5.18395 10.4587 3.90476 12 3.90476C13.5413 3.90476 14.7907 5.18395 14.7907 6.7619ZM16.6512 6.7619C16.6512 9.39183 14.5688 11.5238 12 11.5238C9.43123 11.5238 7.34884 9.39183 7.34884 6.7619C7.34884 4.13198 9.43123 2 12 2C14.5688 2 16.6512 4.13198 16.6512 6.7619ZM2 9.61905C2 8.92858 2.6617 8.66667 3.16279 8.66667C3.66388 8.66667 4.32558 8.9881 4.32558 9.67857V15.0952L6.90552 17.7292C7.15183 17.981 7.53233 17.9597 7.77762 17.7068L8.27907 17.1935C8.52435 16.9406 8.52622 16.5367 8.27907 16.2857L6.09157 14.0536C5.82397 13.7796 5.826 13.34 6.09157 13.064L6.63663 12.4985C6.9022 12.2224 7.3138 12.2022 7.5814 12.4762L10.3721 15.3333V21C10.3721 21.5523 9.92438 22 9.37209 22H6.02326C5.47097 22 5.02326 21.5523 5.02326 21V19.381L2 16.0476V9.61905ZM19.6744 9.67857C19.6744 8.9881 20.3361 8.66667 20.8372 8.66667C21.3383 8.66667 22 8.92858 22 9.61905V16.0476L18.9767 19.381V21C18.9767 21.5523 18.529 22 17.9767 22H14.6279C14.0756 22 13.6279 21.5523 13.6279 21V15.3333L16.4186 12.4762C16.6862 12.2022 17.0978 12.2224 17.3634 12.4985L17.9084 13.064C18.174 13.34 18.176 13.7796 17.9084 14.0536L15.7209 16.2857C15.4738 16.5367 15.4756 16.9406 15.7209 17.1935L16.2224 17.7068C16.4677 17.9597 16.8482 17.981 17.0945 17.7292L19.6744 15.0952V9.67857Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/SmartphoneIcon/SmartphoneIcon.native.test.tsx b/packages/blade/src/components/Icons/SmartphoneIcon/SmartphoneIcon.native.test.tsx
index b6096277f97..325040f618b 100644
--- a/packages/blade/src/components/Icons/SmartphoneIcon/SmartphoneIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SmartphoneIcon/SmartphoneIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SmartphoneIcon />', () => {
   it('should render SmartphoneIcon', () => {
     const renderTree = renderWithTheme(
-      <SmartphoneIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SmartphoneIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SmartphoneIcon/SmartphoneIcon.web.test.tsx b/packages/blade/src/components/Icons/SmartphoneIcon/SmartphoneIcon.web.test.tsx
index 264befb9f75..b977f768dd9 100644
--- a/packages/blade/src/components/Icons/SmartphoneIcon/SmartphoneIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SmartphoneIcon/SmartphoneIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SmartphoneIcon />', () => {
   it('should render SmartphoneIcon', () => {
     const { container } = renderWithTheme(
-      <SmartphoneIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SmartphoneIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.native.test.tsx.snap
index dc955a07f89..ff23ed304ac 100644
--- a/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<SmartphoneIcon /> should render SmartphoneIcon 1`] = `
     >
       <RNSVGPath
         d="M12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<SmartphoneIcon /> should render SmartphoneIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7 1C5.34315 1 4 2.34315 4 4V20C4 21.6569 5.34315 23 7 23H17C18.6569 23 20 21.6569 20 20V4C20 2.34315 18.6569 1 17 1H7ZM6 4C6 3.44772 6.44772 3 7 3H17C17.5523 3 18 3.44772 18 4V20C18 20.5523 17.5523 21 17 21H7C6.44772 21 6 20.5523 6 20V4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.web.test.tsx.snap
index 454f4b55ec6..6a3d47ddcc9 100644
--- a/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<SmartphoneIcon /> should render SmartphoneIcon 1`] = `
     <path
       d="M12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M7 1C5.34315 1 4 2.34315 4 4V20C4 21.6569 5.34315 23 7 23H17C18.6569 23 20 21.6569 20 20V4C20 2.34315 18.6569 1 17 1H7ZM6 4C6 3.44772 6.44772 3 7 3H17C17.5523 3 18 3.44772 18 4V20C18 20.5523 17.5523 21 17 21H7C6.44772 21 6 20.5523 6 20V4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/SpeakerIcon/SpeakerIcon.native.test.tsx b/packages/blade/src/components/Icons/SpeakerIcon/SpeakerIcon.native.test.tsx
index 69ae15762be..7586ec2c5e8 100644
--- a/packages/blade/src/components/Icons/SpeakerIcon/SpeakerIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SpeakerIcon/SpeakerIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SpeakerIcon />', () => {
   it('should render SpeakerIcon', () => {
     const renderTree = renderWithTheme(
-      <SpeakerIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SpeakerIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SpeakerIcon/SpeakerIcon.web.test.tsx b/packages/blade/src/components/Icons/SpeakerIcon/SpeakerIcon.web.test.tsx
index 532b36c71b5..1abbf987fd9 100644
--- a/packages/blade/src/components/Icons/SpeakerIcon/SpeakerIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SpeakerIcon/SpeakerIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SpeakerIcon />', () => {
   it('should render SpeakerIcon', () => {
     const { container } = renderWithTheme(
-      <SpeakerIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SpeakerIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.native.test.tsx.snap
index f0f54b1bf6d..8e0f20d9d5a 100644
--- a/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7 14C7 11.2386 9.23858 9 12 9C14.7614 9 17 11.2386 17 14C17 16.7614 14.7614 19 12 19C9.23858 19 7 16.7614 7 14ZM12 11C10.3431 11 9 12.3431 9 14C9 15.6569 10.3431 17 12 17C13.6569 17 15 15.6569 15 14C15 12.3431 13.6569 11 12 11Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
       />
       <RNSVGPath
         d="M12 7C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6C11 6.55228 11.4477 7 12 7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -73,7 +73,7 @@ exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 4C3 2.34315 4.34315 1 6 1H18C19.6569 1 21 2.34315 21 4V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V4C19 3.44772 18.5523 3 18 3H6Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.web.test.tsx.snap
index 1d8c37cfb02..c33f8103e4b 100644
--- a/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.web.test.tsx.snap
@@ -15,19 +15,19 @@ exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
       clip-rule="evenodd"
       d="M7 14C7 11.2386 9.23858 9 12 9C14.7614 9 17 11.2386 17 14C17 16.7614 14.7614 19 12 19C9.23858 19 7 16.7614 7 14ZM12 11C10.3431 11 9 12.3431 9 14C9 15.6569 10.3431 17 12 17C13.6569 17 15 15.6569 15 14C15 12.3431 13.6569 11 12 11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M12 7C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6C11 6.55228 11.4477 7 12 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M3 4C3 2.34315 4.34315 1 6 1H18C19.6569 1 21 2.34315 21 4V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V4C19 3.44772 18.5523 3 18 3H6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/SquareIcon/SquareIcon.native.test.tsx b/packages/blade/src/components/Icons/SquareIcon/SquareIcon.native.test.tsx
index f2699faff3c..ef46c8484d5 100644
--- a/packages/blade/src/components/Icons/SquareIcon/SquareIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SquareIcon/SquareIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SquareIcon />', () => {
   it('should render SquareIcon', () => {
     const renderTree = renderWithTheme(
-      <SquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SquareIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SquareIcon/SquareIcon.web.test.tsx b/packages/blade/src/components/Icons/SquareIcon/SquareIcon.web.test.tsx
index c8d7f9df7f4..b3155a745d2 100644
--- a/packages/blade/src/components/Icons/SquareIcon/SquareIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SquareIcon/SquareIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SquareIcon />', () => {
   it('should render SquareIcon', () => {
     const { container } = renderWithTheme(
-      <SquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SquareIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.native.test.tsx.snap
index 6da9730de9f..f66f10b80d3 100644
--- a/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SquareIcon /> should render SquareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.web.test.tsx.snap
index 2951cbdd9a6..94812da7cc1 100644
--- a/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<SquareIcon /> should render SquareIcon 1`] = `
       clip-rule="evenodd"
       d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/StampIcon/StampIcon.native.test.tsx b/packages/blade/src/components/Icons/StampIcon/StampIcon.native.test.tsx
index aad691f6be9..9e2b2a763ad 100644
--- a/packages/blade/src/components/Icons/StampIcon/StampIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/StampIcon/StampIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<StampIcon />', () => {
   it('should render StampIcon', () => {
     const renderTree = renderWithTheme(
-      <StampIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <StampIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/StampIcon/StampIcon.web.test.tsx b/packages/blade/src/components/Icons/StampIcon/StampIcon.web.test.tsx
index 8552fec2f4e..d3c8c4909bf 100644
--- a/packages/blade/src/components/Icons/StampIcon/StampIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/StampIcon/StampIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<StampIcon />', () => {
   it('should render StampIcon', () => {
     const { container } = renderWithTheme(
-      <StampIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <StampIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.native.test.tsx.snap
index caaad8c576c..294f7c76242 100644
--- a/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<StampIcon /> should render StampIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M16.4064 16.3022L17.4102 7.13452C17.4788 6.50752 17.4411 5.87322 17.2987 5.25913C15.982 -0.419711 8.01726 -0.419712 6.70057 5.25913C6.55819 5.87322 6.52051 6.50752 6.58916 7.13452L7.59292 16.3022H2.1C1.49249 16.3022 1 16.802 1 17.4185C1 18.035 1.49249 18.5348 2.1 18.5348H4.3V20.7674C4.3 22.0004 5.28497 23 6.5 23H17.5C18.715 23 19.7 22.0004 19.7 20.7674V18.5348H21.9C22.5075 18.5348 23 18.035 23 17.4185C23 16.802 22.5075 16.3022 21.9 16.3022H16.4064ZM15.1572 5.77049C14.3726 2.38663 9.62667 2.38663 8.84209 5.77049C8.75725 6.1364 8.73479 6.51436 8.7757 6.88797L9.79293 16.1786C9.79747 16.2202 9.79971 16.2614 9.79975 16.3022H14.1996C14.1996 16.2614 14.2018 16.2202 14.2064 16.1786L15.2236 6.88797C15.2645 6.51436 15.2421 6.1364 15.1572 5.77049ZM17.5 18.5348H6.5V20.7674H17.5V18.5348Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.web.test.tsx.snap
index 867542eb424..f34b7614216 100644
--- a/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<StampIcon /> should render StampIcon 1`] = `
       clip-rule="evenodd"
       d="M16.4064 16.3022L17.4102 7.13452C17.4788 6.50752 17.4411 5.87322 17.2987 5.25913C15.982 -0.419711 8.01726 -0.419712 6.70057 5.25913C6.55819 5.87322 6.52051 6.50752 6.58916 7.13452L7.59292 16.3022H2.1C1.49249 16.3022 1 16.802 1 17.4185C1 18.035 1.49249 18.5348 2.1 18.5348H4.3V20.7674C4.3 22.0004 5.28497 23 6.5 23H17.5C18.715 23 19.7 22.0004 19.7 20.7674V18.5348H21.9C22.5075 18.5348 23 18.035 23 17.4185C23 16.802 22.5075 16.3022 21.9 16.3022H16.4064ZM15.1572 5.77049C14.3726 2.38663 9.62667 2.38663 8.84209 5.77049C8.75725 6.1364 8.73479 6.51436 8.7757 6.88797L9.79293 16.1786C9.79747 16.2202 9.79971 16.2614 9.79975 16.3022H14.1996C14.1996 16.2614 14.2018 16.2202 14.2064 16.1786L15.2236 6.88797C15.2645 6.51436 15.2421 6.1364 15.1572 5.77049ZM17.5 18.5348H6.5V20.7674H17.5V18.5348Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/StarIcon/StarIcon.native.test.tsx b/packages/blade/src/components/Icons/StarIcon/StarIcon.native.test.tsx
index f43ff523364..cf248bf96ef 100644
--- a/packages/blade/src/components/Icons/StarIcon/StarIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/StarIcon/StarIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<StarIcon />', () => {
   it('should render StarIcon', () => {
     const renderTree = renderWithTheme(
-      <StarIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <StarIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/StarIcon/StarIcon.web.test.tsx b/packages/blade/src/components/Icons/StarIcon/StarIcon.web.test.tsx
index 1b3b7fdd691..50cac3c3bbf 100644
--- a/packages/blade/src/components/Icons/StarIcon/StarIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/StarIcon/StarIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<StarIcon />', () => {
   it('should render StarIcon', () => {
     const { container } = renderWithTheme(
-      <StarIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <StarIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.native.test.tsx.snap
index 37505f92f69..e51a6191003 100644
--- a/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<StarIcon /> should render StarIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 1C12.3806 1 12.7283 1.21607 12.8967 1.55738L15.7543 7.34647L22.1447 8.28051C22.5212 8.33555 22.8339 8.59956 22.9513 8.96157C23.0687 9.32357 22.9704 9.72083 22.6978 9.98636L18.0746 14.4894L19.1656 20.851C19.23 21.2261 19.0757 21.6053 18.7678 21.8291C18.4598 22.0528 18.0515 22.0823 17.7146 21.9051L12 18.8998L6.28548 21.9051C5.94856 22.0823 5.54027 22.0528 5.2323 21.8291C4.92432 21.6053 4.77007 21.2261 4.83442 20.851L5.92551 14.4894L1.3023 9.98636C1.02968 9.72083 0.931405 9.32357 1.04878 8.96157C1.16616 8.59956 1.47884 8.33555 1.8554 8.28051L8.24577 7.34647L11.1033 1.55738C11.2718 1.21607 11.6194 1 12 1ZM12 4.25925L9.80674 8.70262C9.6612 8.99747 9.38001 9.20193 9.05466 9.24949L4.14844 9.9666L7.69776 13.4236C7.93364 13.6534 8.0413 13.9845 7.98564 14.309L7.14821 19.1917L11.5346 16.8849C11.826 16.7317 12.1741 16.7317 12.4655 16.8849L16.8518 19.1917L16.0144 14.309C15.9588 13.9845 16.0664 13.6534 16.3023 13.4236L19.8516 9.9666L14.9454 9.24949C14.62 9.20193 14.3389 8.99747 14.1933 8.70262L12 4.25925Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.web.test.tsx.snap
index 1954b70a365..9869410c4cc 100644
--- a/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<StarIcon /> should render StarIcon 1`] = `
       clip-rule="evenodd"
       d="M12 1C12.3806 1 12.7283 1.21607 12.8967 1.55738L15.7543 7.34647L22.1447 8.28051C22.5212 8.33555 22.8339 8.59956 22.9513 8.96157C23.0687 9.32357 22.9704 9.72083 22.6978 9.98636L18.0746 14.4894L19.1656 20.851C19.23 21.2261 19.0757 21.6053 18.7678 21.8291C18.4598 22.0528 18.0515 22.0823 17.7146 21.9051L12 18.8998L6.28548 21.9051C5.94856 22.0823 5.54027 22.0528 5.2323 21.8291C4.92432 21.6053 4.77007 21.2261 4.83442 20.851L5.92551 14.4894L1.3023 9.98636C1.02968 9.72083 0.931405 9.32357 1.04878 8.96157C1.16616 8.59956 1.47884 8.33555 1.8554 8.28051L8.24577 7.34647L11.1033 1.55738C11.2718 1.21607 11.6194 1 12 1ZM12 4.25925L9.80674 8.70262C9.6612 8.99747 9.38001 9.20193 9.05466 9.24949L4.14844 9.9666L7.69776 13.4236C7.93364 13.6534 8.0413 13.9845 7.98564 14.309L7.14821 19.1917L11.5346 16.8849C11.826 16.7317 12.1741 16.7317 12.4655 16.8849L16.8518 19.1917L16.0144 14.309C15.9588 13.9845 16.0664 13.6534 16.3023 13.4236L19.8516 9.9666L14.9454 9.24949C14.62 9.20193 14.3389 8.99747 14.1933 8.70262L12 4.25925Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/StopCircleIcon/StopCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/StopCircleIcon/StopCircleIcon.native.test.tsx
index 49fed7316e0..492829036bc 100644
--- a/packages/blade/src/components/Icons/StopCircleIcon/StopCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/StopCircleIcon/StopCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<StopCircleIcon />', () => {
   it('should render StopCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <StopCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <StopCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/StopCircleIcon/StopCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/StopCircleIcon/StopCircleIcon.web.test.tsx
index 524856e89bc..265c61a87b8 100644
--- a/packages/blade/src/components/Icons/StopCircleIcon/StopCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/StopCircleIcon/StopCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<StopCircleIcon />', () => {
   it('should render StopCircleIcon', () => {
     const { container } = renderWithTheme(
-      <StopCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <StopCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.native.test.tsx.snap
index 05adf12b8c0..6165c6b2277 100644
--- a/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<StopCircleIcon /> should render StopCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<StopCircleIcon /> should render StopCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 9C8 8.44772 8.44772 8 9 8H15C15.5523 8 16 8.44772 16 9V15C16 15.5523 15.5523 16 15 16H9C8.44772 16 8 15.5523 8 15V9ZM10 10V14H14V10H10Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.web.test.tsx.snap
index 4fea478a142..5ac4bdff12f 100644
--- a/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<StopCircleIcon /> should render StopCircleIcon 1`] = `
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M8 9C8 8.44772 8.44772 8 9 8H15C15.5523 8 16 8.44772 16 9V15C16 15.5523 15.5523 16 15 16H9C8.44772 16 8 15.5523 8 15V9ZM10 10V14H14V10H10Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/SubscriptionsIcon/SubscriptionsIcon.native.test.tsx b/packages/blade/src/components/Icons/SubscriptionsIcon/SubscriptionsIcon.native.test.tsx
index c533eab4759..6e12e9cdcbd 100644
--- a/packages/blade/src/components/Icons/SubscriptionsIcon/SubscriptionsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SubscriptionsIcon/SubscriptionsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SubscriptionsIcon />', () => {
   it('should render SubscriptionsIcon', () => {
     const renderTree = renderWithTheme(
-      <SubscriptionsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SubscriptionsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SubscriptionsIcon/SubscriptionsIcon.web.test.tsx b/packages/blade/src/components/Icons/SubscriptionsIcon/SubscriptionsIcon.web.test.tsx
index e863848826e..d248f98cd33 100644
--- a/packages/blade/src/components/Icons/SubscriptionsIcon/SubscriptionsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SubscriptionsIcon/SubscriptionsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SubscriptionsIcon />', () => {
   it('should render SubscriptionsIcon', () => {
     const { container } = renderWithTheme(
-      <SubscriptionsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SubscriptionsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.native.test.tsx.snap
index ba84fc25bd7..b2225950cb1 100644
--- a/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<SubscriptionsIcon /> should render SubscriptionsIcon 1`] = `
     >
       <RNSVGPath
         d="M10.3766 4.97811C12.8324 4.43243 15.4017 5.16223 17.1817 6.91113C17.1884 6.91778 17.1953 6.92433 17.2023 6.93077L19.8153 9.29939H16.5833C16.0771 9.29939 15.6667 9.70243 15.6667 10.1996C15.6667 10.6968 16.0771 11.0998 16.5833 11.0998H22.0833C22.5896 11.0998 23 10.6968 23 10.1996V4.79841C23 4.30125 22.5896 3.89822 22.0833 3.89822C21.5771 3.89822 21.1667 4.30125 21.1667 4.79841V8.0744L18.4679 5.62814C16.2433 3.4494 13.037 2.54107 9.97198 3.22211C6.90215 3.90422 4.40333 6.08529 3.35336 8.99911C3.18447 9.46779 3.43445 9.98219 3.91172 10.148C4.38898 10.3139 4.91278 10.0684 5.08167 9.59971C5.92165 7.26866 7.9207 5.5238 10.3766 4.97811Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<SubscriptionsIcon /> should render SubscriptionsIcon 1`] = `
       />
       <RNSVGPath
         d="M2.83333 15.9256V19.2015C2.83333 19.6987 2.42293 20.1017 1.91667 20.1017C1.41041 20.1017 1 19.6987 1 19.2015V13.8004C1 13.3032 1.41041 12.9002 1.91667 12.9002H7.41667C7.92293 12.9002 8.33333 13.3032 8.33333 13.8004C8.33333 14.2975 7.92293 14.7006 7.41667 14.7006H4.18472L6.79771 17.0692C6.8047 17.0757 6.81157 17.0822 6.81835 17.0889C8.59836 18.8378 11.1676 19.5676 13.6234 19.0219C16.0793 18.4762 18.0784 16.7313 18.9183 14.4003C19.0872 13.9316 19.611 13.6861 20.0883 13.852C20.5656 14.0178 20.8155 14.5322 20.6467 15.0009C19.5967 17.9147 17.0979 20.0958 14.028 20.7779C10.963 21.4589 7.75671 20.5506 5.5321 18.3719L2.83333 15.9256Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.web.test.tsx.snap
index 3ab2bf434f6..c2c98d366fc 100644
--- a/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<SubscriptionsIcon /> should render SubscriptionsIcon 1`] = `
     <path
       d="M10.3766 4.97811C12.8324 4.43243 15.4017 5.16223 17.1817 6.91113C17.1884 6.91778 17.1953 6.92433 17.2023 6.93077L19.8153 9.29939H16.5833C16.0771 9.29939 15.6667 9.70243 15.6667 10.1996C15.6667 10.6968 16.0771 11.0998 16.5833 11.0998H22.0833C22.5896 11.0998 23 10.6968 23 10.1996V4.79841C23 4.30125 22.5896 3.89822 22.0833 3.89822C21.5771 3.89822 21.1667 4.30125 21.1667 4.79841V8.0744L18.4679 5.62814C16.2433 3.4494 13.037 2.54107 9.97198 3.22211C6.90215 3.90422 4.40333 6.08529 3.35336 8.99911C3.18447 9.46779 3.43445 9.98219 3.91172 10.148C4.38898 10.3139 4.91278 10.0684 5.08167 9.59971C5.92165 7.26866 7.9207 5.5238 10.3766 4.97811Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M2.83333 15.9256V19.2015C2.83333 19.6987 2.42293 20.1017 1.91667 20.1017C1.41041 20.1017 1 19.6987 1 19.2015V13.8004C1 13.3032 1.41041 12.9002 1.91667 12.9002H7.41667C7.92293 12.9002 8.33333 13.3032 8.33333 13.8004C8.33333 14.2975 7.92293 14.7006 7.41667 14.7006H4.18472L6.79771 17.0692C6.8047 17.0757 6.81157 17.0822 6.81835 17.0889C8.59836 18.8378 11.1676 19.5676 13.6234 19.0219C16.0793 18.4762 18.0784 16.7313 18.9183 14.4003C19.0872 13.9316 19.611 13.6861 20.0883 13.852C20.5656 14.0178 20.8155 14.5322 20.6467 15.0009C19.5967 17.9147 17.0979 20.0958 14.028 20.7779C10.963 21.4589 7.75671 20.5506 5.5321 18.3719L2.83333 15.9256Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/SunIcon/SunIcon.native.test.tsx b/packages/blade/src/components/Icons/SunIcon/SunIcon.native.test.tsx
index 6d733766f55..729e7cfaac4 100644
--- a/packages/blade/src/components/Icons/SunIcon/SunIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SunIcon/SunIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SunIcon />', () => {
   it('should render SunIcon', () => {
     const renderTree = renderWithTheme(
-      <SunIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SunIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SunIcon/SunIcon.web.test.tsx b/packages/blade/src/components/Icons/SunIcon/SunIcon.web.test.tsx
index 54b334b4a73..a0a3d259b13 100644
--- a/packages/blade/src/components/Icons/SunIcon/SunIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SunIcon/SunIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SunIcon />', () => {
   it('should render SunIcon', () => {
     const { container } = renderWithTheme(
-      <SunIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SunIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.native.test.tsx.snap
index 406e88dca64..95507c6f59a 100644
--- a/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -67,7 +67,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M12 0C12.5523 0 13 0.447715 13 1V3C13 3.55228 12.5523 4 12 4C11.4477 4 11 3.55228 11 3V1C11 0.447715 11.4477 0 12 0Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -79,7 +79,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M12 20C12.5523 20 13 20.4477 13 21V23C13 23.5523 12.5523 24 12 24C11.4477 24 11 23.5523 11 23V21C11 20.4477 11.4477 20 12 20Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -91,7 +91,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M3.51289 3.51289C3.90342 3.12237 4.53658 3.12237 4.92711 3.51289L6.34711 4.93289C6.73763 5.32342 6.73763 5.95658 6.34711 6.34711C5.95658 6.73763 5.32342 6.73763 4.93289 6.34711L3.51289 4.92711C3.12237 4.53658 3.12237 3.90342 3.51289 3.51289Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -103,7 +103,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M17.6529 17.6529C18.0434 17.2624 18.6766 17.2624 19.0671 17.6529L20.4871 19.0729C20.8776 19.4634 20.8776 20.0966 20.4871 20.4871C20.0966 20.8776 19.4634 20.8776 19.0729 20.4871L17.6529 19.0671C17.2624 18.6766 17.2624 18.0434 17.6529 17.6529Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -115,7 +115,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M0 12C0 11.4477 0.447715 11 1 11H3C3.55228 11 4 11.4477 4 12C4 12.5523 3.55228 13 3 13H1C0.447715 13 0 12.5523 0 12Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -127,7 +127,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M20 12C20 11.4477 20.4477 11 21 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H21C20.4477 13 20 12.5523 20 12Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -139,7 +139,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M6.34711 17.6529C6.73763 18.0434 6.73763 18.6766 6.34711 19.0671L4.92711 20.4871C4.53658 20.8776 3.90342 20.8776 3.51289 20.4871C3.12237 20.0966 3.12237 19.4634 3.51289 19.0729L4.93289 17.6529C5.32342 17.2624 5.95658 17.2624 6.34711 17.6529Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -151,7 +151,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M20.4871 3.51289C20.8776 3.90342 20.8776 4.53658 20.4871 4.92711L19.0671 6.34711C18.6766 6.73763 18.0434 6.73763 17.6529 6.34711C17.2624 5.95658 17.2624 5.32342 17.6529 4.93289L19.0729 3.51289C19.4634 3.12237 20.0966 3.12237 20.4871 3.51289Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -166,7 +166,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           name="clip0_60_388"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.web.test.tsx.snap
index 35aea92fdbb..1a7a4506bc5 100644
--- a/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.web.test.tsx.snap
@@ -19,63 +19,63 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
         clip-rule="evenodd"
         d="M6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M12 0C12.5523 0 13 0.447715 13 1V3C13 3.55228 12.5523 4 12 4C11.4477 4 11 3.55228 11 3V1C11 0.447715 11.4477 0 12 0Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M12 20C12.5523 20 13 20.4477 13 21V23C13 23.5523 12.5523 24 12 24C11.4477 24 11 23.5523 11 23V21C11 20.4477 11.4477 20 12 20Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M3.51289 3.51289C3.90342 3.12237 4.53658 3.12237 4.92711 3.51289L6.34711 4.93289C6.73763 5.32342 6.73763 5.95658 6.34711 6.34711C5.95658 6.73763 5.32342 6.73763 4.93289 6.34711L3.51289 4.92711C3.12237 4.53658 3.12237 3.90342 3.51289 3.51289Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M17.6529 17.6529C18.0434 17.2624 18.6766 17.2624 19.0671 17.6529L20.4871 19.0729C20.8776 19.4634 20.8776 20.0966 20.4871 20.4871C20.0966 20.8776 19.4634 20.8776 19.0729 20.4871L17.6529 19.0671C17.2624 18.6766 17.2624 18.0434 17.6529 17.6529Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M0 12C0 11.4477 0.447715 11 1 11H3C3.55228 11 4 11.4477 4 12C4 12.5523 3.55228 13 3 13H1C0.447715 13 0 12.5523 0 12Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M20 12C20 11.4477 20.4477 11 21 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H21C20.4477 13 20 12.5523 20 12Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M6.34711 17.6529C6.73763 18.0434 6.73763 18.6766 6.34711 19.0671L4.92711 20.4871C4.53658 20.8776 3.90342 20.8776 3.51289 20.4871C3.12237 20.0966 3.12237 19.4634 3.51289 19.0729L4.93289 17.6529C5.32342 17.2624 5.95658 17.2624 6.34711 17.6529Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M20.4871 3.51289C20.8776 3.90342 20.8776 4.53658 20.4871 4.92711L19.0671 6.34711C18.6766 6.73763 18.0434 6.73763 17.6529 6.34711C17.2624 5.95658 17.2624 5.32342 17.6529 4.93289L19.0729 3.51289C19.4634 3.12237 20.0966 3.12237 20.4871 3.51289Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -88,7 +88,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/SunriseIcon/SunriseIcon.native.test.tsx b/packages/blade/src/components/Icons/SunriseIcon/SunriseIcon.native.test.tsx
index 7cc70a8aabc..6365e58295b 100644
--- a/packages/blade/src/components/Icons/SunriseIcon/SunriseIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SunriseIcon/SunriseIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SunriseIcon />', () => {
   it('should render SunriseIcon', () => {
     const renderTree = renderWithTheme(
-      <SunriseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SunriseIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SunriseIcon/SunriseIcon.web.test.tsx b/packages/blade/src/components/Icons/SunriseIcon/SunriseIcon.web.test.tsx
index 9d89eda29da..a77e380cb13 100644
--- a/packages/blade/src/components/Icons/SunriseIcon/SunriseIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SunriseIcon/SunriseIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SunriseIcon />', () => {
   it('should render SunriseIcon', () => {
     const { container } = renderWithTheme(
-      <SunriseIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SunriseIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.native.test.tsx.snap
index abec8547ed4..ec2e3d213cb 100644
--- a/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M6 17C6 13.6863 8.68629 11 12 11C15.3137 11 18 13.6863 18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 14.7909 14.2091 13 12 13C9.79086 13 8 14.7909 8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -67,7 +67,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M12 2.98023e-08C12.5523 2.98023e-08 13 0.447715 13 1V8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8V1C11 0.447715 11.4477 2.98023e-08 12 2.98023e-08Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -79,7 +79,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M3.51289 8.51289C3.90342 8.12237 4.53658 8.12237 4.92711 8.51289L6.34711 9.93289C6.73763 10.3234 6.73763 10.9566 6.34711 11.3471C5.95658 11.7376 5.32342 11.7376 4.93289 11.3471L3.51289 9.92711C3.12237 9.53658 3.12237 8.90342 3.51289 8.51289Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -91,7 +91,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M0 17C0 16.4477 0.447715 16 1 16H3C3.55228 16 4 16.4477 4 17C4 17.5523 3.55228 18 3 18H1C0.447715 18 0 17.5523 0 17Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -103,7 +103,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M20 17C20 16.4477 20.4477 16 21 16H23C23.5523 16 24 16.4477 24 17C24 17.5523 23.5523 18 23 18H21C20.4477 18 20 17.5523 20 17Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -115,7 +115,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M20.4871 8.51289C20.8776 8.90342 20.8776 9.53658 20.4871 9.92711L19.0671 11.3471C18.6766 11.7376 18.0434 11.7376 17.6529 11.3471C17.2624 10.9566 17.2624 10.3234 17.6529 9.93289L19.0729 8.51289C19.4634 8.12237 20.0966 8.12237 20.4871 8.51289Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -127,7 +127,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M0 21C0 20.4477 0.447715 20 1 20H23C23.5523 20 24 20.4477 24 21C24 21.5523 23.5523 22 23 22H1C0.447715 22 0 21.5523 0 21Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -139,7 +139,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M11.2929 0.292893C11.6834 -0.0976311 12.3166 -0.0976311 12.7071 0.292893L16.7071 4.29289C17.0976 4.68342 17.0976 5.31658 16.7071 5.70711C16.3166 6.09763 15.6834 6.09763 15.2929 5.70711L12 2.41421L8.70711 5.70711C8.31658 6.09763 7.68342 6.09763 7.29289 5.70711C6.90237 5.31658 6.90237 4.68342 7.29289 4.29289L11.2929 0.292893Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -154,7 +154,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
           name="clip0_60_389"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.web.test.tsx.snap
index 45837cc9cb9..efef0fb7027 100644
--- a/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.web.test.tsx.snap
@@ -19,56 +19,56 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
         clip-rule="evenodd"
         d="M6 17C6 13.6863 8.68629 11 12 11C15.3137 11 18 13.6863 18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 14.7909 14.2091 13 12 13C9.79086 13 8 14.7909 8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M12 2.98023e-08C12.5523 2.98023e-08 13 0.447715 13 1V8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8V1C11 0.447715 11.4477 2.98023e-08 12 2.98023e-08Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M3.51289 8.51289C3.90342 8.12237 4.53658 8.12237 4.92711 8.51289L6.34711 9.93289C6.73763 10.3234 6.73763 10.9566 6.34711 11.3471C5.95658 11.7376 5.32342 11.7376 4.93289 11.3471L3.51289 9.92711C3.12237 9.53658 3.12237 8.90342 3.51289 8.51289Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M0 17C0 16.4477 0.447715 16 1 16H3C3.55228 16 4 16.4477 4 17C4 17.5523 3.55228 18 3 18H1C0.447715 18 0 17.5523 0 17Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M20 17C20 16.4477 20.4477 16 21 16H23C23.5523 16 24 16.4477 24 17C24 17.5523 23.5523 18 23 18H21C20.4477 18 20 17.5523 20 17Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M20.4871 8.51289C20.8776 8.90342 20.8776 9.53658 20.4871 9.92711L19.0671 11.3471C18.6766 11.7376 18.0434 11.7376 17.6529 11.3471C17.2624 10.9566 17.2624 10.3234 17.6529 9.93289L19.0729 8.51289C19.4634 8.12237 20.0966 8.12237 20.4871 8.51289Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M0 21C0 20.4477 0.447715 20 1 20H23C23.5523 20 24 20.4477 24 21C24 21.5523 23.5523 22 23 22H1C0.447715 22 0 21.5523 0 21Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         clip-rule="evenodd"
         d="M11.2929 0.292893C11.6834 -0.0976311 12.3166 -0.0976311 12.7071 0.292893L16.7071 4.29289C17.0976 4.68342 17.0976 5.31658 16.7071 5.70711C16.3166 6.09763 15.6834 6.09763 15.2929 5.70711L12 2.41421L8.70711 5.70711C8.31658 6.09763 7.68342 6.09763 7.29289 5.70711C6.90237 5.31658 6.90237 4.68342 7.29289 4.29289L11.2929 0.292893Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -81,7 +81,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/SunsetIcon/SunsetIcon.native.test.tsx b/packages/blade/src/components/Icons/SunsetIcon/SunsetIcon.native.test.tsx
index 40bb4adce0c..16cba16fbab 100644
--- a/packages/blade/src/components/Icons/SunsetIcon/SunsetIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/SunsetIcon/SunsetIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<SunsetIcon />', () => {
   it('should render SunsetIcon', () => {
     const renderTree = renderWithTheme(
-      <SunsetIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SunsetIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SunsetIcon/SunsetIcon.web.test.tsx b/packages/blade/src/components/Icons/SunsetIcon/SunsetIcon.web.test.tsx
index 09407634a51..4ab8ecccce0 100644
--- a/packages/blade/src/components/Icons/SunsetIcon/SunsetIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/SunsetIcon/SunsetIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<SunsetIcon />', () => {
   it('should render SunsetIcon', () => {
     const { container } = renderWithTheme(
-      <SunsetIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <SunsetIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.native.test.tsx.snap
index 0fd634b69bf..593c849cf09 100644
--- a/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M6 17C6 13.6863 8.68629 11 12 11C15.3137 11 18 13.6863 18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 14.7909 14.2091 13 12 13C9.79086 13 8 14.7909 8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 0C12.5523 0 13 0.447715 13 1V8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8V1C11 0.447715 11.4477 0 12 0Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3.51289 8.51289C3.90342 8.12237 4.53658 8.12237 4.92711 8.51289L6.34711 9.93289C6.73763 10.3234 6.73763 10.9566 6.34711 11.3471C5.95658 11.7376 5.32342 11.7376 4.93289 11.3471L3.51289 9.92711C3.12237 9.53658 3.12237 8.90342 3.51289 8.51289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -88,7 +88,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M0 17C0 16.4477 0.447715 16 1 16H3C3.55228 16 4 16.4477 4 17C4 17.5523 3.55228 18 3 18H1C0.447715 18 0 17.5523 0 17Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -100,7 +100,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M20 17C20 16.4477 20.4477 16 21 16H23C23.5523 16 24 16.4477 24 17C24 17.5523 23.5523 18 23 18H21C20.4477 18 20 17.5523 20 17Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -112,7 +112,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M20.4871 8.51289C20.8776 8.90342 20.8776 9.53658 20.4871 9.92711L19.0671 11.3471C18.6766 11.7376 18.0434 11.7376 17.6529 11.3471C17.2624 10.9566 17.2624 10.3234 17.6529 9.93289L19.0729 8.51289C19.4634 8.12237 20.0966 8.12237 20.4871 8.51289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -124,7 +124,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M0 21C0 20.4477 0.447715 20 1 20H23C23.5523 20 24 20.4477 24 21C24 21.5523 23.5523 22 23 22H1C0.447715 22 0 21.5523 0 21Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -136,7 +136,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7.29289 3.29289C7.68342 2.90237 8.31658 2.90237 8.70711 3.29289L12 6.58579L15.2929 3.29289C15.6834 2.90237 16.3166 2.90237 16.7071 3.29289C17.0976 3.68342 17.0976 4.31658 16.7071 4.70711L12.7071 8.70711C12.3166 9.09763 11.6834 9.09763 11.2929 8.70711L7.29289 4.70711C6.90237 4.31658 6.90237 3.68342 7.29289 3.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.web.test.tsx.snap
index 936170481ca..20542e59ee4 100644
--- a/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.web.test.tsx.snap
@@ -15,56 +15,56 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
       clip-rule="evenodd"
       d="M6 17C6 13.6863 8.68629 11 12 11C15.3137 11 18 13.6863 18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 14.7909 14.2091 13 12 13C9.79086 13 8 14.7909 8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M12 0C12.5523 0 13 0.447715 13 1V8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8V1C11 0.447715 11.4477 0 12 0Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M3.51289 8.51289C3.90342 8.12237 4.53658 8.12237 4.92711 8.51289L6.34711 9.93289C6.73763 10.3234 6.73763 10.9566 6.34711 11.3471C5.95658 11.7376 5.32342 11.7376 4.93289 11.3471L3.51289 9.92711C3.12237 9.53658 3.12237 8.90342 3.51289 8.51289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M0 17C0 16.4477 0.447715 16 1 16H3C3.55228 16 4 16.4477 4 17C4 17.5523 3.55228 18 3 18H1C0.447715 18 0 17.5523 0 17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M20 17C20 16.4477 20.4477 16 21 16H23C23.5523 16 24 16.4477 24 17C24 17.5523 23.5523 18 23 18H21C20.4477 18 20 17.5523 20 17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M20.4871 8.51289C20.8776 8.90342 20.8776 9.53658 20.4871 9.92711L19.0671 11.3471C18.6766 11.7376 18.0434 11.7376 17.6529 11.3471C17.2624 10.9566 17.2624 10.3234 17.6529 9.93289L19.0729 8.51289C19.4634 8.12237 20.0966 8.12237 20.4871 8.51289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M0 21C0 20.4477 0.447715 20 1 20H23C23.5523 20 24 20.4477 24 21C24 21.5523 23.5523 22 23 22H1C0.447715 22 0 21.5523 0 21Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M7.29289 3.29289C7.68342 2.90237 8.31658 2.90237 8.70711 3.29289L12 6.58579L15.2929 3.29289C15.6834 2.90237 16.3166 2.90237 16.7071 3.29289C17.0976 3.68342 17.0976 4.31658 16.7071 4.70711L12.7071 8.70711C12.3166 9.09763 11.6834 9.09763 11.2929 8.70711L7.29289 4.70711C6.90237 4.31658 6.90237 3.68342 7.29289 3.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/TabletIcon/TabletIcon.native.test.tsx b/packages/blade/src/components/Icons/TabletIcon/TabletIcon.native.test.tsx
index 98ba7e1646c..2cc21f9eb7a 100644
--- a/packages/blade/src/components/Icons/TabletIcon/TabletIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TabletIcon/TabletIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TabletIcon />', () => {
   it('should render TabletIcon', () => {
     const renderTree = renderWithTheme(
-      <TabletIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TabletIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TabletIcon/TabletIcon.web.test.tsx b/packages/blade/src/components/Icons/TabletIcon/TabletIcon.web.test.tsx
index 01e5b92a622..c83e0dc8c5e 100644
--- a/packages/blade/src/components/Icons/TabletIcon/TabletIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TabletIcon/TabletIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TabletIcon />', () => {
   it('should render TabletIcon', () => {
     const { container } = renderWithTheme(
-      <TabletIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TabletIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.native.test.tsx.snap
index 84947571d6b..087074df8e7 100644
--- a/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<TabletIcon /> should render TabletIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M21 20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4C3 2.34315 4.34315 1 6 1H18C19.6569 1 21 2.34315 21 4V20ZM18 21C18.5523 21 19 20.5523 19 20V4C19 3.44772 18.5523 3 18 3H6C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<TabletIcon /> should render TabletIcon 1`] = `
       />
       <RNSVGPath
         d="M13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17C12.5523 17 13 17.4477 13 18Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.web.test.tsx.snap
index f09d7ec2504..96e3de79472 100644
--- a/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<TabletIcon /> should render TabletIcon 1`] = `
       clip-rule="evenodd"
       d="M21 20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4C3 2.34315 4.34315 1 6 1H18C19.6569 1 21 2.34315 21 4V20ZM18 21C18.5523 21 19 20.5523 19 20V4C19 3.44772 18.5523 3 18 3H6C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17C12.5523 17 13 17.4477 13 18Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/TagIcon/TagIcon.native.test.tsx b/packages/blade/src/components/Icons/TagIcon/TagIcon.native.test.tsx
index d6d08399bd2..511ed2cb1ad 100644
--- a/packages/blade/src/components/Icons/TagIcon/TagIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TagIcon/TagIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TagIcon />', () => {
   it('should render TagIcon', () => {
     const renderTree = renderWithTheme(
-      <TagIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TagIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TagIcon/TagIcon.web.test.tsx b/packages/blade/src/components/Icons/TagIcon/TagIcon.web.test.tsx
index 34aa8ee3a9b..176ce31e192 100644
--- a/packages/blade/src/components/Icons/TagIcon/TagIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TagIcon/TagIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TagIcon />', () => {
   it('should render TagIcon', () => {
     const { container } = renderWithTheme(
-      <TagIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TagIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.native.test.tsx.snap
index 0b839bbe70e..a1976081658 100644
--- a/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<TagIcon /> should render TagIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 2a1 1 0 0 1 1-1h10a1 1 0 0 1 .707.293L21.3 9.885a3 3 0 0 1 0 4.23l-.002.002-7.17 7.17a3.001 3.001 0 0 1-4.244 0l-8.59-8.58A1 1 0 0 1 1 12V2Zm2 1v8.585l8.297 8.287v.001a1 1 0 0 0 1.415 0l7.169-7.168a1 1 0 0 0 0-1.41L11.586 3H3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<TagIcon /> should render TagIcon 1`] = `
       />
       <RNSVGPath
         d="M10 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.web.test.tsx.snap
index c5950d9317b..59c93897980 100644
--- a/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<TagIcon /> should render TagIcon 1`] = `
       clip-rule="evenodd"
       d="M1 2a1 1 0 0 1 1-1h10a1 1 0 0 1 .707.293L21.3 9.885a3 3 0 0 1 0 4.23l-.002.002-7.17 7.17a3.001 3.001 0 0 1-4.244 0l-8.59-8.58A1 1 0 0 1 1 12V2Zm2 1v8.585l8.297 8.287v.001a1 1 0 0 0 1.415 0l7.169-7.168a1 1 0 0 0 0-1.41L11.586 3H3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M10 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/TargetIcon/TargetIcon.native.test.tsx b/packages/blade/src/components/Icons/TargetIcon/TargetIcon.native.test.tsx
index ad5ec72215c..f39b410fe80 100644
--- a/packages/blade/src/components/Icons/TargetIcon/TargetIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TargetIcon/TargetIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TargetIcon />', () => {
   it('should render TargetIcon', () => {
     const renderTree = renderWithTheme(
-      <TargetIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TargetIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TargetIcon/TargetIcon.web.test.tsx b/packages/blade/src/components/Icons/TargetIcon/TargetIcon.web.test.tsx
index 42c668e941a..315230f7f5d 100644
--- a/packages/blade/src/components/Icons/TargetIcon/TargetIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TargetIcon/TargetIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TargetIcon />', () => {
   it('should render TargetIcon', () => {
     const { container } = renderWithTheme(
-      <TargetIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TargetIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.native.test.tsx.snap
index 941c13078aa..6d4d019b869 100644
--- a/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<TargetIcon /> should render TargetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<TargetIcon /> should render TargetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<TargetIcon /> should render TargetIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.web.test.tsx.snap
index fa29377285e..335d0ad68cd 100644
--- a/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.web.test.tsx.snap
@@ -15,21 +15,21 @@ exports[`<TargetIcon /> should render TargetIcon 1`] = `
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ThermometerIcon/ThermometerIcon.native.test.tsx b/packages/blade/src/components/Icons/ThermometerIcon/ThermometerIcon.native.test.tsx
index 28bbe5077b3..6bce015e0bc 100644
--- a/packages/blade/src/components/Icons/ThermometerIcon/ThermometerIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ThermometerIcon/ThermometerIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ThermometerIcon />', () => {
   it('should render ThermometerIcon', () => {
     const renderTree = renderWithTheme(
-      <ThermometerIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ThermometerIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ThermometerIcon/ThermometerIcon.web.test.tsx b/packages/blade/src/components/Icons/ThermometerIcon/ThermometerIcon.web.test.tsx
index f317732b50e..8b033dd5fe2 100644
--- a/packages/blade/src/components/Icons/ThermometerIcon/ThermometerIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ThermometerIcon/ThermometerIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ThermometerIcon />', () => {
   it('should render ThermometerIcon', () => {
     const { container } = renderWithTheme(
-      <ThermometerIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ThermometerIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.native.test.tsx.snap
index 43a9dfe9963..aedc7afd034 100644
--- a/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<ThermometerIcon /> should render ThermometerIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M8.00006 3.5C8.00006 1.567 9.56706 0 11.5001 0C13.4331 0 15.0001 1.567 15.0001 3.5V14.2588C16.6983 15.6585 17.4124 17.958 16.7632 20.0982C16.06 22.4165 13.9227 24.0017 11.5001 24.0017C9.07744 24.0017 6.9401 22.4165 6.23687 20.0982C5.58769 17.958 6.30178 15.6585 8.00006 14.2588V3.5ZM11.5001 2C10.6716 2 10.0001 2.67157 10.0001 3.5V14.76C10.0001 15.094 9.83332 15.4059 9.55562 15.5915C8.27375 16.448 7.70325 18.0423 8.15076 19.5176C8.59827 20.9929 9.95839 22.0017 11.5001 22.0017C13.0417 22.0017 14.4018 20.9929 14.8494 19.5176C15.2969 18.0423 14.7264 16.448 13.4445 15.5915C13.1668 15.4059 13.0001 15.094 13.0001 14.76V3.5C13.0001 2.67157 12.3285 2 11.5001 2Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<ThermometerIcon /> should render ThermometerIcon 1`] = `
           name="clip0_83_742"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.web.test.tsx.snap
index 5aeb514bc71..c0837e6013d 100644
--- a/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<ThermometerIcon /> should render ThermometerIcon 1`] = `
         clip-rule="evenodd"
         d="M8.00006 3.5C8.00006 1.567 9.56706 0 11.5001 0C13.4331 0 15.0001 1.567 15.0001 3.5V14.2588C16.6983 15.6585 17.4124 17.958 16.7632 20.0982C16.06 22.4165 13.9227 24.0017 11.5001 24.0017C9.07744 24.0017 6.9401 22.4165 6.23687 20.0982C5.58769 17.958 6.30178 15.6585 8.00006 14.2588V3.5ZM11.5001 2C10.6716 2 10.0001 2.67157 10.0001 3.5V14.76C10.0001 15.094 9.83332 15.4059 9.55562 15.5915C8.27375 16.448 7.70325 18.0423 8.15076 19.5176C8.59827 20.9929 9.95839 22.0017 11.5001 22.0017C13.0417 22.0017 14.4018 20.9929 14.8494 19.5176C15.2969 18.0423 14.7264 16.448 13.4445 15.5915C13.1668 15.4059 13.0001 15.094 13.0001 14.76V3.5C13.0001 2.67157 12.3285 2 11.5001 2Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<ThermometerIcon /> should render ThermometerIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/ThumbsDownIcon/ThumbsDownIcon.native.test.tsx b/packages/blade/src/components/Icons/ThumbsDownIcon/ThumbsDownIcon.native.test.tsx
index 38f9d18fb4b..f644ed228ce 100644
--- a/packages/blade/src/components/Icons/ThumbsDownIcon/ThumbsDownIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ThumbsDownIcon/ThumbsDownIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ThumbsDownIcon />', () => {
   it('should render ThumbsDownIcon', () => {
     const renderTree = renderWithTheme(
-      <ThumbsDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ThumbsDownIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ThumbsDownIcon/ThumbsDownIcon.web.test.tsx b/packages/blade/src/components/Icons/ThumbsDownIcon/ThumbsDownIcon.web.test.tsx
index 87b5337c991..bf8a2c26bf3 100644
--- a/packages/blade/src/components/Icons/ThumbsDownIcon/ThumbsDownIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ThumbsDownIcon/ThumbsDownIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ThumbsDownIcon />', () => {
   it('should render ThumbsDownIcon', () => {
     const { container } = renderWithTheme(
-      <ThumbsDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ThumbsDownIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.native.test.tsx.snap
index 3b733c99279..022f08b19f2 100644
--- a/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ThumbsDownIcon /> should render ThumbsDownIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M21.0001 4.07678C20.8867 3.44753 20.3327 2.98844 19.6877 2.99985L19.6701 3H18.0001V12H19.6701L19.6877 12.0002C20.3327 12.0116 20.8867 11.5525 21.0001 10.9232V4.07678ZM16.0001 12.7878V3H5.70875C5.2101 2.99437 4.78352 3.3569 4.70875 3.84994L3.32873 12.8501C3.3287 12.8503 3.32876 12.8499 3.32873 12.8501C3.28492 13.1399 3.37042 13.4351 3.5628 13.6563C3.75532 13.8777 4.03535 14.0034 4.32873 14.0001L4.34005 13.9999L10.0001 14C10.5523 14 11.0001 14.4477 11.0001 15V19C11.0001 19.8926 11.5847 20.6486 12.392 20.9059L16.0001 12.7878ZM17.6499 14L13.9139 22.4061C13.7534 22.7673 13.3952 23 13.0001 23C10.7909 23 9.00005 21.2091 9.00005 19V16H4.34517C3.4673 16.0081 2.62979 15.6313 2.05359 14.9687C1.47603 14.3045 1.21929 13.4202 1.35138 12.5499L2.73136 3.55007C2.7314 3.54977 2.73131 3.55037 2.73136 3.55007C2.95574 2.07346 4.23219 0.986171 5.72514 1H19.662C21.3365 0.97518 22.7664 2.2054 22.991 3.86596C22.997 3.91039 23.0001 3.95517 23.0001 4V11C23.0001 11.0448 22.997 11.0896 22.991 11.134C22.7664 12.7946 21.3365 14.0248 19.662 14H17.6499Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.web.test.tsx.snap
index 6eafb0adddd..a322b2b1e87 100644
--- a/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ThumbsDownIcon /> should render ThumbsDownIcon 1`] = `
       clip-rule="evenodd"
       d="M21.0001 4.07678C20.8867 3.44753 20.3327 2.98844 19.6877 2.99985L19.6701 3H18.0001V12H19.6701L19.6877 12.0002C20.3327 12.0116 20.8867 11.5525 21.0001 10.9232V4.07678ZM16.0001 12.7878V3H5.70875C5.2101 2.99437 4.78352 3.3569 4.70875 3.84994L3.32873 12.8501C3.3287 12.8503 3.32876 12.8499 3.32873 12.8501C3.28492 13.1399 3.37042 13.4351 3.5628 13.6563C3.75532 13.8777 4.03535 14.0034 4.32873 14.0001L4.34005 13.9999L10.0001 14C10.5523 14 11.0001 14.4477 11.0001 15V19C11.0001 19.8926 11.5847 20.6486 12.392 20.9059L16.0001 12.7878ZM17.6499 14L13.9139 22.4061C13.7534 22.7673 13.3952 23 13.0001 23C10.7909 23 9.00005 21.2091 9.00005 19V16H4.34517C3.4673 16.0081 2.62979 15.6313 2.05359 14.9687C1.47603 14.3045 1.21929 13.4202 1.35138 12.5499L2.73136 3.55007C2.7314 3.54977 2.73131 3.55037 2.73136 3.55007C2.95574 2.07346 4.23219 0.986171 5.72514 1H19.662C21.3365 0.97518 22.7664 2.2054 22.991 3.86596C22.997 3.91039 23.0001 3.95517 23.0001 4V11C23.0001 11.0448 22.997 11.0896 22.991 11.134C22.7664 12.7946 21.3365 14.0248 19.662 14H17.6499Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ThumbsUpIcon/ThumbsUpIcon.native.test.tsx b/packages/blade/src/components/Icons/ThumbsUpIcon/ThumbsUpIcon.native.test.tsx
index 05a8b5e9127..0befd0d4cc4 100644
--- a/packages/blade/src/components/Icons/ThumbsUpIcon/ThumbsUpIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ThumbsUpIcon/ThumbsUpIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ThumbsUpIcon />', () => {
   it('should render ThumbsUpIcon', () => {
     const renderTree = renderWithTheme(
-      <ThumbsUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ThumbsUpIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ThumbsUpIcon/ThumbsUpIcon.web.test.tsx b/packages/blade/src/components/Icons/ThumbsUpIcon/ThumbsUpIcon.web.test.tsx
index 0b236bd2a0f..0c5ccf97124 100644
--- a/packages/blade/src/components/Icons/ThumbsUpIcon/ThumbsUpIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ThumbsUpIcon/ThumbsUpIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ThumbsUpIcon />', () => {
   it('should render ThumbsUpIcon', () => {
     const { container } = renderWithTheme(
-      <ThumbsUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ThumbsUpIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.native.test.tsx.snap
index 961ac34264c..efb137f131f 100644
--- a/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ThumbsUpIcon /> should render ThumbsUpIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M10.0862 1.59386C10.2467 1.23273 10.6048 1 11 1C13.2091 1 15 2.79086 15 5V8H19.6549C20.5328 7.99187 21.3703 8.36871 21.9465 9.03134C22.524 9.69553 22.7808 10.5798 22.6487 11.4501L21.2687 20.4499C21.2687 20.4502 21.2687 20.4497 21.2687 20.4499C21.0444 21.9266 19.7678 23.0139 18.2748 23H4C2.34315 23 1 21.6569 1 20V13C1 11.3431 2.34315 10 4 10H6.35013L10.0862 1.59386ZM6 12H4C3.44772 12 3 12.4477 3 13V20C3 20.5523 3.44772 21 4 21H6V12ZM8 21V11.2122L11.608 3.09411C12.4153 3.35143 13 4.10743 13 5V9C13 9.55228 13.4477 10 14 10H19.66L19.6713 9.99994C19.9647 9.99661 20.2447 10.1223 20.4373 10.3437C20.6297 10.565 20.7153 10.8596 20.6714 11.1495C20.6714 11.1494 20.6714 11.1497 20.6714 11.1495L19.2913 20.1501C19.2165 20.6431 18.7899 21.0057 18.2913 21.0001L8 21Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.web.test.tsx.snap
index fc030c7fd13..edc881707e7 100644
--- a/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ThumbsUpIcon /> should render ThumbsUpIcon 1`] = `
       clip-rule="evenodd"
       d="M10.0862 1.59386C10.2467 1.23273 10.6048 1 11 1C13.2091 1 15 2.79086 15 5V8H19.6549C20.5328 7.99187 21.3703 8.36871 21.9465 9.03134C22.524 9.69553 22.7808 10.5798 22.6487 11.4501L21.2687 20.4499C21.2687 20.4502 21.2687 20.4497 21.2687 20.4499C21.0444 21.9266 19.7678 23.0139 18.2748 23H4C2.34315 23 1 21.6569 1 20V13C1 11.3431 2.34315 10 4 10H6.35013L10.0862 1.59386ZM6 12H4C3.44772 12 3 12.4477 3 13V20C3 20.5523 3.44772 21 4 21H6V12ZM8 21V11.2122L11.608 3.09411C12.4153 3.35143 13 4.10743 13 5V9C13 9.55228 13.4477 10 14 10H19.66L19.6713 9.99994C19.9647 9.99661 20.2447 10.1223 20.4373 10.3437C20.6297 10.565 20.7153 10.8596 20.6714 11.1495C20.6714 11.1494 20.6714 11.1497 20.6714 11.1495L19.2913 20.1501C19.2165 20.6431 18.7899 21.0057 18.2913 21.0001L8 21Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ToggleLeftIcon/ToggleLeftIcon.native.test.tsx b/packages/blade/src/components/Icons/ToggleLeftIcon/ToggleLeftIcon.native.test.tsx
index f7661d9a0f0..0ae786c82fb 100644
--- a/packages/blade/src/components/Icons/ToggleLeftIcon/ToggleLeftIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ToggleLeftIcon/ToggleLeftIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ToggleLeftIcon />', () => {
   it('should render ToggleLeftIcon', () => {
     const renderTree = renderWithTheme(
-      <ToggleLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ToggleLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ToggleLeftIcon/ToggleLeftIcon.web.test.tsx b/packages/blade/src/components/Icons/ToggleLeftIcon/ToggleLeftIcon.web.test.tsx
index fea20e2f236..620159d93b1 100644
--- a/packages/blade/src/components/Icons/ToggleLeftIcon/ToggleLeftIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ToggleLeftIcon/ToggleLeftIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ToggleLeftIcon />', () => {
   it('should render ToggleLeftIcon', () => {
     const { container } = renderWithTheme(
-      <ToggleLeftIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ToggleLeftIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.native.test.tsx.snap
index fb2ba639266..54fd176a927 100644
--- a/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ToggleLeftIcon /> should render ToggleLeftIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 8C5.79086 8 4 9.79086 4 12C4 14.2091 5.79086 16 8 16C10.2091 16 12 14.2091 12 12C12 9.79086 10.2091 8 8 8ZM6 12C6 10.8954 6.89543 10 8 10C9.10457 10 10 10.8954 10 12C10 13.1046 9.10457 14 8 14C6.89543 14 6 13.1046 6 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<ToggleLeftIcon /> should render ToggleLeftIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 4C3.58172 4 0 7.58172 0 12C0 16.4183 3.58172 20 8 20H16C20.4183 20 24 16.4183 24 12C24 7.58172 20.4183 4 16 4H8ZM2 12C2 8.68629 4.68629 6 8 6H16C19.3137 6 22 8.68629 22 12C22 15.3137 19.3137 18 16 18H8C4.68629 18 2 15.3137 2 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.web.test.tsx.snap
index 19478402524..6be73b819e0 100644
--- a/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<ToggleLeftIcon /> should render ToggleLeftIcon 1`] = `
       clip-rule="evenodd"
       d="M8 8C5.79086 8 4 9.79086 4 12C4 14.2091 5.79086 16 8 16C10.2091 16 12 14.2091 12 12C12 9.79086 10.2091 8 8 8ZM6 12C6 10.8954 6.89543 10 8 10C9.10457 10 10 10.8954 10 12C10 13.1046 9.10457 14 8 14C6.89543 14 6 13.1046 6 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M8 4C3.58172 4 0 7.58172 0 12C0 16.4183 3.58172 20 8 20H16C20.4183 20 24 16.4183 24 12C24 7.58172 20.4183 4 16 4H8ZM2 12C2 8.68629 4.68629 6 8 6H16C19.3137 6 22 8.68629 22 12C22 15.3137 19.3137 18 16 18H8C4.68629 18 2 15.3137 2 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ToggleRightIcon/ToggleRightIcon.native.test.tsx b/packages/blade/src/components/Icons/ToggleRightIcon/ToggleRightIcon.native.test.tsx
index 446069b2f85..1a1faead72a 100644
--- a/packages/blade/src/components/Icons/ToggleRightIcon/ToggleRightIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ToggleRightIcon/ToggleRightIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ToggleRightIcon />', () => {
   it('should render ToggleRightIcon', () => {
     const renderTree = renderWithTheme(
-      <ToggleRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ToggleRightIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ToggleRightIcon/ToggleRightIcon.web.test.tsx b/packages/blade/src/components/Icons/ToggleRightIcon/ToggleRightIcon.web.test.tsx
index 993290be00a..3993525fb15 100644
--- a/packages/blade/src/components/Icons/ToggleRightIcon/ToggleRightIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ToggleRightIcon/ToggleRightIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ToggleRightIcon />', () => {
   it('should render ToggleRightIcon', () => {
     const { container } = renderWithTheme(
-      <ToggleRightIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ToggleRightIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.native.test.tsx.snap
index f5f6fd2799b..1fa42033fcd 100644
--- a/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ToggleRightIcon /> should render ToggleRightIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M16 8C13.7909 8 12 9.79086 12 12C12 14.2091 13.7909 16 16 16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8ZM14 12C14 10.8954 14.8954 10 16 10C17.1046 10 18 10.8954 18 12C18 13.1046 17.1046 14 16 14C14.8954 14 14 13.1046 14 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<ToggleRightIcon /> should render ToggleRightIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 4C3.58172 4 0 7.58172 0 12C0 16.4183 3.58172 20 8 20H16C20.4183 20 24 16.4183 24 12C24 7.58172 20.4183 4 16 4H8ZM2 12C2 8.68629 4.68629 6 8 6H16C19.3137 6 22 8.68629 22 12C22 15.3137 19.3137 18 16 18H8C4.68629 18 2 15.3137 2 12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.web.test.tsx.snap
index e51e30c9627..85fdfd5873e 100644
--- a/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<ToggleRightIcon /> should render ToggleRightIcon 1`] = `
       clip-rule="evenodd"
       d="M16 8C13.7909 8 12 9.79086 12 12C12 14.2091 13.7909 16 16 16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8ZM14 12C14 10.8954 14.8954 10 16 10C17.1046 10 18 10.8954 18 12C18 13.1046 17.1046 14 16 14C14.8954 14 14 13.1046 14 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M8 4C3.58172 4 0 7.58172 0 12C0 16.4183 3.58172 20 8 20H16C20.4183 20 24 16.4183 24 12C24 7.58172 20.4183 4 16 4H8ZM2 12C2 8.68629 4.68629 6 8 6H16C19.3137 6 22 8.68629 22 12C22 15.3137 19.3137 18 16 18H8C4.68629 18 2 15.3137 2 12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/TransactionsIcon/TransactionsIcon.native.test.tsx b/packages/blade/src/components/Icons/TransactionsIcon/TransactionsIcon.native.test.tsx
index 9f615e18e0f..186db19dc6d 100644
--- a/packages/blade/src/components/Icons/TransactionsIcon/TransactionsIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TransactionsIcon/TransactionsIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TransactionsIcon />', () => {
   it('should render TransactionsIcon', () => {
     const renderTree = renderWithTheme(
-      <TransactionsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TransactionsIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TransactionsIcon/TransactionsIcon.web.test.tsx b/packages/blade/src/components/Icons/TransactionsIcon/TransactionsIcon.web.test.tsx
index 9a9b68c12e7..7cd2c712040 100644
--- a/packages/blade/src/components/Icons/TransactionsIcon/TransactionsIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TransactionsIcon/TransactionsIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TransactionsIcon />', () => {
   it('should render TransactionsIcon', () => {
     const { container } = renderWithTheme(
-      <TransactionsIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TransactionsIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.native.test.tsx.snap
index f45c976f8a9..f5b92475f42 100644
--- a/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<TransactionsIcon /> should render TransactionsIcon 1`] = `
     >
       <RNSVGPath
         d="M6.24 12.03a.878.878 0 0 1 .26.623.898.898 0 0 1-.249.627.85.85 0 0 1-.61.257.833.833 0 0 1-.606-.268L1.25 9.377a.869.869 0 0 1-.107-.134c-.014-.022-.024-.044-.036-.067a.853.853 0 0 1-.042-.084.843.843 0 0 1-.027-.087c-.007-.026-.017-.05-.022-.076a.91.91 0 0 1 0-.343c.005-.026.015-.05.022-.075a.812.812 0 0 1 .027-.087.91.91 0 0 1 .042-.085c.012-.022.022-.043.036-.066a.895.895 0 0 1 .107-.135l3.785-3.892a.84.84 0 0 1 .6-.246.84.84 0 0 1 .595.257.89.89 0 0 1 .01 1.228L3.91 7.883h9.715a.84.84 0 0 1 .602.256c.16.164.25.387.25.62 0 .232-.09.455-.25.62a.84.84 0 0 1-.602.256H3.909l2.332 2.395Zm16.617 3.674c.014-.022.024-.044.035-.067a.896.896 0 0 0 .043-.084.806.806 0 0 0 .027-.088c.007-.024.017-.049.022-.074a.912.912 0 0 0 0-.344c-.005-.026-.015-.05-.022-.075a.836.836 0 0 0-.027-.088.843.843 0 0 0-.043-.083c-.011-.023-.021-.044-.035-.067a.87.87 0 0 0-.107-.134l-3.785-3.893a.84.84 0 0 0-1.195.011.889.889 0 0 0-.25.612.89.89 0 0 0 .24.616l2.33 2.397h-9.715a.84.84 0 0 0-.602.257.889.889 0 0 0-.25.62c0 .232.09.455.25.62a.84.84 0 0 0 .602.256h9.716l-2.332 2.397a.877.877 0 0 0-.26.623.898.898 0 0 0 .25.627.85.85 0 0 0 .61.257.833.833 0 0 0 .605-.267l3.786-3.893a.894.894 0 0 0 .107-.134v-.002Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.web.test.tsx.snap
index 42251c56cca..d8d2dd47ec0 100644
--- a/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.web.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<TransactionsIcon /> should render TransactionsIcon 1`] = `
     <path
       d="M6.24 12.03a.878.878 0 0 1 .26.623.898.898 0 0 1-.249.627.85.85 0 0 1-.61.257.833.833 0 0 1-.606-.268L1.25 9.377a.869.869 0 0 1-.107-.134c-.014-.022-.024-.044-.036-.067a.853.853 0 0 1-.042-.084.843.843 0 0 1-.027-.087c-.007-.026-.017-.05-.022-.076a.91.91 0 0 1 0-.343c.005-.026.015-.05.022-.075a.812.812 0 0 1 .027-.087.91.91 0 0 1 .042-.085c.012-.022.022-.043.036-.066a.895.895 0 0 1 .107-.135l3.785-3.892a.84.84 0 0 1 .6-.246.84.84 0 0 1 .595.257.89.89 0 0 1 .01 1.228L3.91 7.883h9.715a.84.84 0 0 1 .602.256c.16.164.25.387.25.62 0 .232-.09.455-.25.62a.84.84 0 0 1-.602.256H3.909l2.332 2.395Zm16.617 3.674c.014-.022.024-.044.035-.067a.896.896 0 0 0 .043-.084.806.806 0 0 0 .027-.088c.007-.024.017-.049.022-.074a.912.912 0 0 0 0-.344c-.005-.026-.015-.05-.022-.075a.836.836 0 0 0-.027-.088.843.843 0 0 0-.043-.083c-.011-.023-.021-.044-.035-.067a.87.87 0 0 0-.107-.134l-3.785-3.893a.84.84 0 0 0-1.195.011.889.889 0 0 0-.25.612.89.89 0 0 0 .24.616l2.33 2.397h-9.715a.84.84 0 0 0-.602.257.889.889 0 0 0-.25.62c0 .232.09.455.25.62a.84.84 0 0 0 .602.256h9.716l-2.332 2.397a.877.877 0 0 0-.26.623.898.898 0 0 0 .25.627.85.85 0 0 0 .61.257.833.833 0 0 0 .605-.267l3.786-3.893a.894.894 0 0 0 .107-.134v-.002Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/TrashIcon/TrashIcon.native.test.tsx b/packages/blade/src/components/Icons/TrashIcon/TrashIcon.native.test.tsx
index d61a7394d3b..98fe2a5ce28 100644
--- a/packages/blade/src/components/Icons/TrashIcon/TrashIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TrashIcon/TrashIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TrashIcon />', () => {
   it('should render TrashIcon', () => {
     const renderTree = renderWithTheme(
-      <TrashIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TrashIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TrashIcon/TrashIcon.web.test.tsx b/packages/blade/src/components/Icons/TrashIcon/TrashIcon.web.test.tsx
index 09c7ec82930..97319ea31d4 100644
--- a/packages/blade/src/components/Icons/TrashIcon/TrashIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TrashIcon/TrashIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TrashIcon />', () => {
   it('should render TrashIcon', () => {
     const { container } = renderWithTheme(
-      <TrashIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TrashIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.native.test.tsx.snap
index b6e966646fb..713db32c1bb 100644
--- a/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<TrashIcon /> should render TrashIcon 1`] = `
     >
       <RNSVGPath
         d="M10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1ZM15 11a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<TrashIcon /> should render TrashIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7 5V4a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1h4a1 1 0 1 1 0 2h-1v13a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7H3a1 1 0 0 1 0-2h4Zm2-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1H9V4Zm9 3v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7h12Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.web.test.tsx.snap
index f9e85f9eccc..f76bea94103 100644
--- a/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<TrashIcon /> should render TrashIcon 1`] = `
     <path
       d="M10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1ZM15 11a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M7 5V4a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1h4a1 1 0 1 1 0 2h-1v13a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7H3a1 1 0 0 1 0-2h4Zm2-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1H9V4Zm9 3v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7h12Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/TrendingDownIcon/TendingDownIcon.native.test.tsx b/packages/blade/src/components/Icons/TrendingDownIcon/TendingDownIcon.native.test.tsx
index c5ea280d0aa..31738659eae 100644
--- a/packages/blade/src/components/Icons/TrendingDownIcon/TendingDownIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TrendingDownIcon/TendingDownIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TrendingDownIcon />', () => {
   it('should render TrendingDownIcon', () => {
     const renderTree = renderWithTheme(
-      <TrendingDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TrendingDownIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TrendingDownIcon/TrendingDownIcon.native.test.tsx b/packages/blade/src/components/Icons/TrendingDownIcon/TrendingDownIcon.native.test.tsx
index 887d1b624bf..7ac622c2e90 100644
--- a/packages/blade/src/components/Icons/TrendingDownIcon/TrendingDownIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TrendingDownIcon/TrendingDownIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TrendingDownIcon />', () => {
   it('should render TrendingDownIcon', () => {
     const renderTree = renderWithTheme(
-      <TrendingDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TrendingDownIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TrendingDownIcon/TrendingDownIcon.web.test.tsx b/packages/blade/src/components/Icons/TrendingDownIcon/TrendingDownIcon.web.test.tsx
index 6664caa28f9..e8d068a7b46 100644
--- a/packages/blade/src/components/Icons/TrendingDownIcon/TrendingDownIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TrendingDownIcon/TrendingDownIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TrendingDownIcon />', () => {
   it('should render TrendingDownIcon', () => {
     const { container } = renderWithTheme(
-      <TrendingDownIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TrendingDownIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TendingDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TendingDownIcon.native.test.tsx.snap
index d3209ceeff2..8bc86dbfe2e 100644
--- a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TendingDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TendingDownIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
       >
         <RNSVGPath
           d="M1.70711 5.29289C1.31658 4.90237 0.683417 4.90237 0.292893 5.29289C-0.0976311 5.68342 -0.0976311 6.31658 0.292893 6.70711L7.79289 14.2071C8.18342 14.5976 8.81658 14.5976 9.20711 14.2071L13.5 9.91421L20.5858 17H17C16.4477 17 16 17.4477 16 18C16 18.5523 16.4477 19 17 19H22.9993C23.0003 19 23.002 19 23.003 19C23.1375 18.9996 23.2657 18.9727 23.3828 18.9241C23.5007 18.8753 23.6112 18.803 23.7071 18.7071C23.8902 18.524 23.9874 18.2877 23.9989 18.048C23.9996 18.032 24 18.016 24 18C24 17.9997 24 18.0003 24 18V12C24 11.4477 23.5523 11 23 11C22.4477 11 22 11.4477 22 12V15.5858L14.2071 7.79289C13.8166 7.40237 13.1834 7.40237 12.7929 7.79289L8.5 12.0858L1.70711 5.29289Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
diff --git a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.native.test.tsx.snap
index d3209ceeff2..8bc86dbfe2e 100644
--- a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
       >
         <RNSVGPath
           d="M1.70711 5.29289C1.31658 4.90237 0.683417 4.90237 0.292893 5.29289C-0.0976311 5.68342 -0.0976311 6.31658 0.292893 6.70711L7.79289 14.2071C8.18342 14.5976 8.81658 14.5976 9.20711 14.2071L13.5 9.91421L20.5858 17H17C16.4477 17 16 17.4477 16 18C16 18.5523 16.4477 19 17 19H22.9993C23.0003 19 23.002 19 23.003 19C23.1375 18.9996 23.2657 18.9727 23.3828 18.9241C23.5007 18.8753 23.6112 18.803 23.7071 18.7071C23.8902 18.524 23.9874 18.2877 23.9989 18.048C23.9996 18.032 24 18.016 24 18C24 17.9997 24 18.0003 24 18V12C24 11.4477 23.5523 11 23 11C22.4477 11 22 11.4477 22 12V15.5858L14.2071 7.79289C13.8166 7.40237 13.1834 7.40237 12.7929 7.79289L8.5 12.0858L1.70711 5.29289Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
diff --git a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.web.test.tsx.snap
index 4a079f84976..94f90bbecd2 100644
--- a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.web.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
       <path
         d="M1.70711 5.29289C1.31658 4.90237 0.683417 4.90237 0.292893 5.29289C-0.0976311 5.68342 -0.0976311 6.31658 0.292893 6.70711L7.79289 14.2071C8.18342 14.5976 8.81658 14.5976 9.20711 14.2071L13.5 9.91421L20.5858 17H17C16.4477 17 16 17.4477 16 18C16 18.5523 16.4477 19 17 19H22.9993C23.0003 19 23.002 19 23.003 19C23.1375 18.9996 23.2657 18.9727 23.3828 18.9241C23.5007 18.8753 23.6112 18.803 23.7071 18.7071C23.8902 18.524 23.9874 18.2877 23.9989 18.048C23.9996 18.032 24 18.016 24 18C24 17.9997 24 18.0003 24 18V12C24 11.4477 23.5523 11 23 11C22.4477 11 22 11.4477 22 12V15.5858L14.2071 7.79289C13.8166 7.40237 13.1834 7.40237 12.7929 7.79289L8.5 12.0858L1.70711 5.29289Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
diff --git a/packages/blade/src/components/Icons/TrendingUpIcon/TendingUpIcon.native.test.tsx b/packages/blade/src/components/Icons/TrendingUpIcon/TendingUpIcon.native.test.tsx
index 7bf2f4aa104..3bebe5fd780 100644
--- a/packages/blade/src/components/Icons/TrendingUpIcon/TendingUpIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TrendingUpIcon/TendingUpIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TrendingUpIcon />', () => {
   it('should render TrendingUpIcon', () => {
     const renderTree = renderWithTheme(
-      <TrendingUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TrendingUpIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TrendingUpIcon/TrendingUpIcon.native.test.tsx b/packages/blade/src/components/Icons/TrendingUpIcon/TrendingUpIcon.native.test.tsx
index 7e19ad444c4..93f8b21a00e 100644
--- a/packages/blade/src/components/Icons/TrendingUpIcon/TrendingUpIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TrendingUpIcon/TrendingUpIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TrendingUpIcon />', () => {
   it('should render TrendingUpIcon', () => {
     const renderTree = renderWithTheme(
-      <TrendingUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TrendingUpIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TrendingUpIcon/TrendingUpIcon.web.test.tsx b/packages/blade/src/components/Icons/TrendingUpIcon/TrendingUpIcon.web.test.tsx
index 750cdea7d56..8302c9f2f70 100644
--- a/packages/blade/src/components/Icons/TrendingUpIcon/TrendingUpIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TrendingUpIcon/TrendingUpIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TrendingUpIcon />', () => {
   it('should render TrendingUpIcon', () => {
     const { container } = renderWithTheme(
-      <TrendingUpIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TrendingUpIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TendingUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TendingUpIcon.native.test.tsx.snap
index b14a7f54020..a7ff0d1d9b4 100644
--- a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TendingUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TendingUpIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
       >
         <RNSVGPath
           d="M17 5C16.4477 5 16 5.44772 16 6C16 6.55228 16.4477 7 17 7H20.5858L13.5 14.0858L9.20711 9.79289C8.81658 9.40237 8.18342 9.40237 7.79289 9.79289L0.292893 17.2929C-0.0976311 17.6834 -0.0976311 18.3166 0.292893 18.7071C0.683417 19.0976 1.31658 19.0976 1.70711 18.7071L8.5 11.9142L12.7929 16.2071C13.1834 16.5976 13.8166 16.5976 14.2071 16.2071L22 8.41421V12C22 12.5523 22.4477 13 23 13C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
diff --git a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.native.test.tsx.snap
index b14a7f54020..a7ff0d1d9b4 100644
--- a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
       >
         <RNSVGPath
           d="M17 5C16.4477 5 16 5.44772 16 6C16 6.55228 16.4477 7 17 7H20.5858L13.5 14.0858L9.20711 9.79289C8.81658 9.40237 8.18342 9.40237 7.79289 9.79289L0.292893 17.2929C-0.0976311 17.6834 -0.0976311 18.3166 0.292893 18.7071C0.683417 19.0976 1.31658 19.0976 1.70711 18.7071L8.5 11.9142L12.7929 16.2071C13.1834 16.5976 13.8166 16.5976 14.2071 16.2071L22 8.41421V12C22 12.5523 22.4477 13 23 13C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
diff --git a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.web.test.tsx.snap
index d1406f75dc3..3bddf6c7eb6 100644
--- a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.web.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
       <path
         d="M17 5C16.4477 5 16 5.44772 16 6C16 6.55228 16.4477 7 17 7H20.5858L13.5 14.0858L9.20711 9.79289C8.81658 9.40237 8.18342 9.40237 7.79289 9.79289L0.292893 17.2929C-0.0976311 17.6834 -0.0976311 18.3166 0.292893 18.7071C0.683417 19.0976 1.31658 19.0976 1.70711 18.7071L8.5 11.9142L12.7929 16.2071C13.1834 16.5976 13.8166 16.5976 14.2071 16.2071L22 8.41421V12C22 12.5523 22.4477 13 23 13C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
diff --git a/packages/blade/src/components/Icons/TriangleIcon/TriangleIcon.native.test.tsx b/packages/blade/src/components/Icons/TriangleIcon/TriangleIcon.native.test.tsx
index 74ed3ae3fa3..c7126111ed9 100644
--- a/packages/blade/src/components/Icons/TriangleIcon/TriangleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TriangleIcon/TriangleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TriangleIcon />', () => {
   it('should render TriangleIcon', () => {
     const renderTree = renderWithTheme(
-      <TriangleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TriangleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TriangleIcon/TriangleIcon.web.test.tsx b/packages/blade/src/components/Icons/TriangleIcon/TriangleIcon.web.test.tsx
index 089745eb48d..12f6e22e8f5 100644
--- a/packages/blade/src/components/Icons/TriangleIcon/TriangleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TriangleIcon/TriangleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TriangleIcon />', () => {
   it('should render TriangleIcon', () => {
     const { container } = renderWithTheme(
-      <TriangleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TriangleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.native.test.tsx.snap
index a7d71675748..26da06b9e42 100644
--- a/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<TriangleIcon /> should render TriangleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M9.43502 3.34133C9.97887 2.44475 10.9514 1.89722 12 1.89722C13.0486 1.89722 14.0212 2.44475 14.565 3.34133L14.5679 3.34608L23.0379 17.4861L23.046 17.4999C23.5791 18.423 23.5822 19.5596 23.0544 20.4857C22.5265 21.4118 21.5469 21.9882 20.481 21.9999L20.47 22L3.51903 22C2.45315 21.9882 1.47353 21.4118 0.94567 20.4857C0.41781 19.5596 0.420993 18.423 0.95403 17.4999L0.962153 17.4861L9.43502 3.34133ZM11.1462 4.3766L2.6827 18.5058C2.50833 18.8125 2.50837 19.1885 2.68322 19.4953C2.85842 19.8026 3.1829 19.9945 3.53642 20H20.4636C20.8171 19.9945 21.1416 19.8026 21.3168 19.4953C21.4917 19.1885 21.4917 18.8125 21.3174 18.5058L12.855 4.37859C12.8546 4.37792 12.8542 4.37726 12.8538 4.3766C12.6723 4.07892 12.3488 3.89722 12 3.89722C11.6513 3.89722 11.3277 4.07892 11.1462 4.3766Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.web.test.tsx.snap
index ae251149cfe..73bd8f37c7a 100644
--- a/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<TriangleIcon /> should render TriangleIcon 1`] = `
       clip-rule="evenodd"
       d="M9.43502 3.34133C9.97887 2.44475 10.9514 1.89722 12 1.89722C13.0486 1.89722 14.0212 2.44475 14.565 3.34133L14.5679 3.34608L23.0379 17.4861L23.046 17.4999C23.5791 18.423 23.5822 19.5596 23.0544 20.4857C22.5265 21.4118 21.5469 21.9882 20.481 21.9999L20.47 22L3.51903 22C2.45315 21.9882 1.47353 21.4118 0.94567 20.4857C0.41781 19.5596 0.420993 18.423 0.95403 17.4999L0.962153 17.4861L9.43502 3.34133ZM11.1462 4.3766L2.6827 18.5058C2.50833 18.8125 2.50837 19.1885 2.68322 19.4953C2.85842 19.8026 3.1829 19.9945 3.53642 20H20.4636C20.8171 19.9945 21.1416 19.8026 21.3168 19.4953C21.4917 19.1885 21.4917 18.8125 21.3174 18.5058L12.855 4.37859C12.8546 4.37792 12.8542 4.37726 12.8538 4.3766C12.6723 4.07892 12.3488 3.89722 12 3.89722C11.6513 3.89722 11.3277 4.07892 11.1462 4.3766Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/TvIcon/TvIcon.native.test.tsx b/packages/blade/src/components/Icons/TvIcon/TvIcon.native.test.tsx
index aae56ada406..f1d272eeb0f 100644
--- a/packages/blade/src/components/Icons/TvIcon/TvIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TvIcon/TvIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TvIcon />', () => {
   it('should render TvIcon', () => {
     const renderTree = renderWithTheme(
-      <TvIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TvIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TvIcon/TvIcon.web.test.tsx b/packages/blade/src/components/Icons/TvIcon/TvIcon.web.test.tsx
index 153d301fc8f..51e6e8213cd 100644
--- a/packages/blade/src/components/Icons/TvIcon/TvIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TvIcon/TvIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TvIcon />', () => {
   it('should render TvIcon', () => {
     const { container } = renderWithTheme(
-      <TvIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TvIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.native.test.tsx.snap
index 3ec0956fe2c..120373930d8 100644
--- a/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<TvIcon /> should render TvIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M7.70711 1.29289C7.31658 0.902369 6.68342 0.902369 6.29289 1.29289C5.90237 1.68342 5.90237 2.31658 6.29289 2.70711L9.58579 6H4C2.34315 6 1 7.34315 1 9V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V9C23 7.34315 21.6569 6 20 6H14.4142L17.7071 2.70711C18.0976 2.31658 18.0976 1.68342 17.7071 1.29289C17.3166 0.902369 16.6834 0.902369 16.2929 1.29289L12 5.58579L7.70711 1.29289ZM3 9C3 8.44772 3.44772 8 4 8H20C20.5523 8 21 8.44772 21 9V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.web.test.tsx.snap
index fb464170f54..b0739af9e11 100644
--- a/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<TvIcon /> should render TvIcon 1`] = `
       clip-rule="evenodd"
       d="M7.70711 1.29289C7.31658 0.902369 6.68342 0.902369 6.29289 1.29289C5.90237 1.68342 5.90237 2.31658 6.29289 2.70711L9.58579 6H4C2.34315 6 1 7.34315 1 9V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V9C23 7.34315 21.6569 6 20 6H14.4142L17.7071 2.70711C18.0976 2.31658 18.0976 1.68342 17.7071 1.29289C17.3166 0.902369 16.6834 0.902369 16.2929 1.29289L12 5.58579L7.70711 1.29289ZM3 9C3 8.44772 3.44772 8 4 8H20C20.5523 8 21 8.44772 21 9V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/TwitterIcon/TwitterIcon.native.test.tsx b/packages/blade/src/components/Icons/TwitterIcon/TwitterIcon.native.test.tsx
index 6987a97c801..932de167160 100644
--- a/packages/blade/src/components/Icons/TwitterIcon/TwitterIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TwitterIcon/TwitterIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TwitterIcon />', () => {
   it('should render TwitterIcon', () => {
     const renderTree = renderWithTheme(
-      <TwitterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TwitterIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TwitterIcon/TwitterIcon.web.test.tsx b/packages/blade/src/components/Icons/TwitterIcon/TwitterIcon.web.test.tsx
index 33d8b091210..5cb1026dd51 100644
--- a/packages/blade/src/components/Icons/TwitterIcon/TwitterIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TwitterIcon/TwitterIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TwitterIcon />', () => {
   it('should render TwitterIcon', () => {
     const { container } = renderWithTheme(
-      <TwitterIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TwitterIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.native.test.tsx.snap
index 2da7e93f0e3..cf153facc65 100644
--- a/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<TwitterIcon /> should render TwitterIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M20.1328 3.38509C18.6196 2.03085 16.4579 1.61269 14.5255 2.35025C12.3887 3.16583 10.9843 5.22202 10.9997 7.50656C8.13296 7.29145 5.48993 5.80559 3.81834 3.42534C3.6113 3.13053 3.26168 2.96986 2.90312 3.00476C2.54456 3.03965 2.23248 3.26471 2.08617 3.59392L2.99998 4.00005C2.08617 3.59392 2.08596 3.5944 2.08573 3.59491L2.08519 3.59612L2.08385 3.59916L2.08011 3.60772L2.06854 3.63465C2.05908 3.6569 2.04619 3.68771 2.03042 3.72664C1.99889 3.80447 1.95575 3.91494 1.90526 4.05459C1.8044 4.33356 1.67356 4.73083 1.54746 5.21842C1.29646 6.18895 1.05769 7.54234 1.12601 9.04546C1.19454 10.553 1.57341 12.2317 2.57704 13.8164C3.3294 15.0043 4.41157 16.1055 5.91472 17.033C4.39635 17.7325 2.72654 18.0679 1.03973 18.0008C0.577005 17.9824 0.162178 18.2841 0.0371299 18.73C-0.0879187 19.1759 0.109527 19.6493 0.514338 19.8742C5.29085 22.5278 10.6509 22.5526 14.8448 20.3203C19.0631 18.0751 22 13.6 22 7.50005L22 7.49675C21.9994 7.33449 21.9917 7.17243 21.9769 7.01103C22.9424 5.93962 23.629 4.6432 23.9716 3.23667C24.0702 2.83167 23.9073 2.40797 23.5627 2.17341C23.2181 1.93885 22.7642 1.94262 22.4236 2.18289C21.7152 2.68259 20.9449 3.08658 20.1328 3.38509ZM3.40458 6.04386C3.22091 6.8452 3.07426 7.86138 3.12395 8.95465C3.18043 10.1972 3.48906 11.5184 4.26667 12.7463C5.04027 13.9677 6.31602 15.1573 8.40612 16.0862C8.73792 16.2337 8.96372 16.5494 8.99602 16.9111C9.02831 17.2728 8.86204 17.6235 8.56161 17.8274C7.45067 18.5815 6.23418 19.1489 4.96008 19.5157C8.13025 20.3234 11.307 19.9377 13.9051 18.5548C17.4365 16.6752 19.9995 12.9009 20 7.50172C19.9992 7.28562 19.9783 7.07007 19.9378 6.85781C19.8751 6.52994 19.9801 6.19243 20.2178 5.95805C20.4406 5.73836 20.6469 5.50422 20.8357 5.25756C20.6092 5.34111 20.3799 5.41784 20.1483 5.48759C19.7717 5.601 19.3635 5.48309 19.1054 5.18629C18.1472 4.08445 16.6029 3.69806 15.2387 4.21877C13.8744 4.73948 12.9803 6.05653 12.9999 7.51665L13.0001 7.53006H13V8.53006C13 9.07224 12.5679 9.51567 12.0259 9.52972C8.76543 9.61426 5.65043 8.33089 3.40458 6.04386Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<TwitterIcon /> should render TwitterIcon 1`] = `
           name="clip0_83_559"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.web.test.tsx.snap
index 3e7d11c057f..fb4ff2271ae 100644
--- a/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<TwitterIcon /> should render TwitterIcon 1`] = `
         clip-rule="evenodd"
         d="M20.1328 3.38509C18.6196 2.03085 16.4579 1.61269 14.5255 2.35025C12.3887 3.16583 10.9843 5.22202 10.9997 7.50656C8.13296 7.29145 5.48993 5.80559 3.81834 3.42534C3.6113 3.13053 3.26168 2.96986 2.90312 3.00476C2.54456 3.03965 2.23248 3.26471 2.08617 3.59392L2.99998 4.00005C2.08617 3.59392 2.08596 3.5944 2.08573 3.59491L2.08519 3.59612L2.08385 3.59916L2.08011 3.60772L2.06854 3.63465C2.05908 3.6569 2.04619 3.68771 2.03042 3.72664C1.99889 3.80447 1.95575 3.91494 1.90526 4.05459C1.8044 4.33356 1.67356 4.73083 1.54746 5.21842C1.29646 6.18895 1.05769 7.54234 1.12601 9.04546C1.19454 10.553 1.57341 12.2317 2.57704 13.8164C3.3294 15.0043 4.41157 16.1055 5.91472 17.033C4.39635 17.7325 2.72654 18.0679 1.03973 18.0008C0.577005 17.9824 0.162178 18.2841 0.0371299 18.73C-0.0879187 19.1759 0.109527 19.6493 0.514338 19.8742C5.29085 22.5278 10.6509 22.5526 14.8448 20.3203C19.0631 18.0751 22 13.6 22 7.50005L22 7.49675C21.9994 7.33449 21.9917 7.17243 21.9769 7.01103C22.9424 5.93962 23.629 4.6432 23.9716 3.23667C24.0702 2.83167 23.9073 2.40797 23.5627 2.17341C23.2181 1.93885 22.7642 1.94262 22.4236 2.18289C21.7152 2.68259 20.9449 3.08658 20.1328 3.38509ZM3.40458 6.04386C3.22091 6.8452 3.07426 7.86138 3.12395 8.95465C3.18043 10.1972 3.48906 11.5184 4.26667 12.7463C5.04027 13.9677 6.31602 15.1573 8.40612 16.0862C8.73792 16.2337 8.96372 16.5494 8.99602 16.9111C9.02831 17.2728 8.86204 17.6235 8.56161 17.8274C7.45067 18.5815 6.23418 19.1489 4.96008 19.5157C8.13025 20.3234 11.307 19.9377 13.9051 18.5548C17.4365 16.6752 19.9995 12.9009 20 7.50172C19.9992 7.28562 19.9783 7.07007 19.9378 6.85781C19.8751 6.52994 19.9801 6.19243 20.2178 5.95805C20.4406 5.73836 20.6469 5.50422 20.8357 5.25756C20.6092 5.34111 20.3799 5.41784 20.1483 5.48759C19.7717 5.601 19.3635 5.48309 19.1054 5.18629C18.1472 4.08445 16.6029 3.69806 15.2387 4.21877C13.8744 4.73948 12.9803 6.05653 12.9999 7.51665L13.0001 7.53006H13V8.53006C13 9.07224 12.5679 9.51567 12.0259 9.52972C8.76543 9.61426 5.65043 8.33089 3.40458 6.04386Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<TwitterIcon /> should render TwitterIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/TypeIcon/TypeIcon.native.test.tsx b/packages/blade/src/components/Icons/TypeIcon/TypeIcon.native.test.tsx
index 72c78fb4b54..2a610a78ee2 100644
--- a/packages/blade/src/components/Icons/TypeIcon/TypeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/TypeIcon/TypeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<TypeIcon />', () => {
   it('should render TypeIcon', () => {
     const renderTree = renderWithTheme(
-      <TypeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TypeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TypeIcon/TypeIcon.web.test.tsx b/packages/blade/src/components/Icons/TypeIcon/TypeIcon.web.test.tsx
index 0d9ebe1fda4..fbd96a77c51 100644
--- a/packages/blade/src/components/Icons/TypeIcon/TypeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/TypeIcon/TypeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<TypeIcon />', () => {
   it('should render TypeIcon', () => {
     const { container } = renderWithTheme(
-      <TypeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <TypeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.native.test.tsx.snap
index 17c06e77e60..02fd836de37 100644
--- a/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<TypeIcon /> should render TypeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V6C21 6.55228 20.5523 7 20 7C19.4477 7 19 6.55228 19 6V4H5V6C5 6.55228 4.55228 7 4 7C3.44772 7 3 6.55228 3 6V3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<TypeIcon /> should render TypeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8 19C8 18.4477 8.44772 18 9 18H15C15.5523 18 16 18.4477 16 19C16 19.5523 15.5523 20 15 20H9C8.44772 20 8 19.5523 8 19Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -76,7 +76,7 @@ exports[`<TypeIcon /> should render TypeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 2C12.5523 2 13 2.44772 13 3V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V3C11 2.44772 11.4477 2 12 2Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.web.test.tsx.snap
index fe6b1b0fbef..6a4d1331703 100644
--- a/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.web.test.tsx.snap
@@ -15,21 +15,21 @@ exports[`<TypeIcon /> should render TypeIcon 1`] = `
       clip-rule="evenodd"
       d="M3 3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V6C21 6.55228 20.5523 7 20 7C19.4477 7 19 6.55228 19 6V4H5V6C5 6.55228 4.55228 7 4 7C3.44772 7 3 6.55228 3 6V3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M8 19C8 18.4477 8.44772 18 9 18H15C15.5523 18 16 18.4477 16 19C16 19.5523 15.5523 20 15 20H9C8.44772 20 8 19.5523 8 19Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M12 2C12.5523 2 13 2.44772 13 3V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V3C11 2.44772 11.4477 2 12 2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/UmbrellaIcon/UmbrellaIcon.native.test.tsx b/packages/blade/src/components/Icons/UmbrellaIcon/UmbrellaIcon.native.test.tsx
index 6ad48315231..7ea8d80791d 100644
--- a/packages/blade/src/components/Icons/UmbrellaIcon/UmbrellaIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UmbrellaIcon/UmbrellaIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UmbrellaIcon />', () => {
   it('should render UmbrellaIcon', () => {
     const renderTree = renderWithTheme(
-      <UmbrellaIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UmbrellaIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UmbrellaIcon/UmbrellaIcon.web.test.tsx b/packages/blade/src/components/Icons/UmbrellaIcon/UmbrellaIcon.web.test.tsx
index 99f4c3417d8..c7c9d6dd62d 100644
--- a/packages/blade/src/components/Icons/UmbrellaIcon/UmbrellaIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UmbrellaIcon/UmbrellaIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UmbrellaIcon />', () => {
   it('should render UmbrellaIcon', () => {
     const { container } = renderWithTheme(
-      <UmbrellaIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UmbrellaIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.native.test.tsx.snap
index fc95a0490f7..764da9eb465 100644
--- a/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<UmbrellaIcon /> should render UmbrellaIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M0.00452884 11.905C0.59476 5.7216 5.78852 1 12 1C18.2115 1 23.4052 5.7216 23.9955 11.905C24.0223 12.1854 23.9295 12.4642 23.7399 12.6727C23.5504 12.8811 23.2817 13 23 13H13V19C13 20.1046 13.8954 21 15 21C16.1046 21 17 20.1046 17 19C17 18.4477 17.4477 18 18 18C18.5523 18 19 18.4477 19 19C19 21.2091 17.2091 23 15 23C12.7909 23 11 21.2091 11 19V13H1C0.718259 13 0.449586 12.8811 0.260064 12.6727C0.0705417 12.4642 -0.0222434 12.1854 0.00452884 11.905ZM21.8394 11C20.8835 6.39076 16.8072 3 12 3C7.19284 3 3.11654 6.39076 2.16062 11H21.8394Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -70,7 +70,7 @@ exports[`<UmbrellaIcon /> should render UmbrellaIcon 1`] = `
           name="clip0_60_996"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.web.test.tsx.snap
index 9e119723079..a5bfe801a49 100644
--- a/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.web.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<UmbrellaIcon /> should render UmbrellaIcon 1`] = `
         clip-rule="evenodd"
         d="M0.00452884 11.905C0.59476 5.7216 5.78852 1 12 1C18.2115 1 23.4052 5.7216 23.9955 11.905C24.0223 12.1854 23.9295 12.4642 23.7399 12.6727C23.5504 12.8811 23.2817 13 23 13H13V19C13 20.1046 13.8954 21 15 21C16.1046 21 17 20.1046 17 19C17 18.4477 17.4477 18 18 18C18.5523 18 19 18.4477 19 19C19 21.2091 17.2091 23 15 23C12.7909 23 11 21.2091 11 19V13H1C0.718259 13 0.449586 12.8811 0.260064 12.6727C0.0705417 12.4642 -0.0222434 12.1854 0.00452884 11.905ZM21.8394 11C20.8835 6.39076 16.8072 3 12 3C7.19284 3 3.11654 6.39076 2.16062 11H21.8394Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -32,7 +32,7 @@ exports[`<UmbrellaIcon /> should render UmbrellaIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/UnderlineIcon/UnderlineIcon.native.test.tsx b/packages/blade/src/components/Icons/UnderlineIcon/UnderlineIcon.native.test.tsx
index 936ffdfa128..7aa67d50c7c 100644
--- a/packages/blade/src/components/Icons/UnderlineIcon/UnderlineIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UnderlineIcon/UnderlineIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UnderlineIcon />', () => {
   it('should render UnderlineIcon', () => {
     const renderTree = renderWithTheme(
-      <UnderlineIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UnderlineIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UnderlineIcon/UnderlineIcon.web.test.tsx b/packages/blade/src/components/Icons/UnderlineIcon/UnderlineIcon.web.test.tsx
index f5f9ef80932..62ce4764d94 100644
--- a/packages/blade/src/components/Icons/UnderlineIcon/UnderlineIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UnderlineIcon/UnderlineIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UnderlineIcon />', () => {
   it('should render UnderlineIcon', () => {
     const { container } = renderWithTheme(
-      <UnderlineIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UnderlineIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.native.test.tsx.snap
index 7df675fc048..bf61ee39be0 100644
--- a/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<UnderlineIcon /> should render UnderlineIcon 1`] = `
     >
       <RNSVGPath
         d="M7 2C7 1.44772 6.55228 1 6 1C5.44772 1 5 1.44772 5 2V9C5 12.866 8.13401 16 12 16C15.866 16 19 12.866 19 9V2C19 1.44772 18.5523 1 18 1C17.4477 1 17 1.44772 17 2V9C17 11.7614 14.7614 14 12 14C9.23858 14 7 11.7614 7 9V2Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<UnderlineIcon /> should render UnderlineIcon 1`] = `
       />
       <RNSVGPath
         d="M4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H4Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.web.test.tsx.snap
index 2fa75e26421..f50b4400503 100644
--- a/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<UnderlineIcon /> should render UnderlineIcon 1`] = `
     <path
       d="M7 2C7 1.44772 6.55228 1 6 1C5.44772 1 5 1.44772 5 2V9C5 12.866 8.13401 16 12 16C15.866 16 19 12.866 19 9V2C19 1.44772 18.5523 1 18 1C17.4477 1 17 1.44772 17 2V9C17 11.7614 14.7614 14 12 14C9.23858 14 7 11.7614 7 9V2Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/UnlockIcon/UnlockIcon.native.test.tsx b/packages/blade/src/components/Icons/UnlockIcon/UnlockIcon.native.test.tsx
index 2c6466faf90..17fbbe95644 100644
--- a/packages/blade/src/components/Icons/UnlockIcon/UnlockIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UnlockIcon/UnlockIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UnlockIcon />', () => {
   it('should render UnlockIcon', () => {
     const renderTree = renderWithTheme(
-      <UnlockIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UnlockIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UnlockIcon/UnlockIcon.web.test.tsx b/packages/blade/src/components/Icons/UnlockIcon/UnlockIcon.web.test.tsx
index 6ada004b535..70d162e3029 100644
--- a/packages/blade/src/components/Icons/UnlockIcon/UnlockIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UnlockIcon/UnlockIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UnlockIcon />', () => {
   it('should render UnlockIcon', () => {
     const { container } = renderWithTheme(
-      <UnlockIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UnlockIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.native.test.tsx.snap
index a58e31a2495..f9300769d04 100644
--- a/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<UnlockIcon /> should render UnlockIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.598 3.01522C13.6426 2.8087 15.5111 4.18508 15.92 6.19899C16.0299 6.74023 16.5578 7.0899 17.099 6.98C17.6402 6.8701 17.9899 6.34224 17.88 5.801C17.2666 2.78013 14.4639 0.71556 11.397 1.02535C8.32071 1.33609 6 3.99656 6 7V10H5C3.34315 10 2 11.3431 2 13V20C2 21.6569 3.34315 23 5 23H19C20.6569 23 22 21.6569 22 20V13C22 11.3431 20.6569 10 19 10H16.9024L16.9 10H8V7C8 5.00355 9.56277 3.2208 11.598 3.01522ZM4 13C4 12.4477 4.44772 12 5 12H19C19.5523 12 20 12.4477 20 13V20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V13Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.web.test.tsx.snap
index 7691bb70a06..6a69b7114ad 100644
--- a/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<UnlockIcon /> should render UnlockIcon 1`] = `
       clip-rule="evenodd"
       d="M11.598 3.01522C13.6426 2.8087 15.5111 4.18508 15.92 6.19899C16.0299 6.74023 16.5578 7.0899 17.099 6.98C17.6402 6.8701 17.9899 6.34224 17.88 5.801C17.2666 2.78013 14.4639 0.71556 11.397 1.02535C8.32071 1.33609 6 3.99656 6 7V10H5C3.34315 10 2 11.3431 2 13V20C2 21.6569 3.34315 23 5 23H19C20.6569 23 22 21.6569 22 20V13C22 11.3431 20.6569 10 19 10H16.9024L16.9 10H8V7C8 5.00355 9.56277 3.2208 11.598 3.01522ZM4 13C4 12.4477 4.44772 12 5 12H19C19.5523 12 20 12.4477 20 13V20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V13Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/UploadCloudIcon/UploadCloudIcon.native.test.tsx b/packages/blade/src/components/Icons/UploadCloudIcon/UploadCloudIcon.native.test.tsx
index e858ff3bfe1..075c039d0cd 100644
--- a/packages/blade/src/components/Icons/UploadCloudIcon/UploadCloudIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UploadCloudIcon/UploadCloudIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UploadCloudIcon />', () => {
   it('should render UploadCloudIcon', () => {
     const renderTree = renderWithTheme(
-      <UploadCloudIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UploadCloudIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UploadCloudIcon/UploadCloudIcon.web.test.tsx b/packages/blade/src/components/Icons/UploadCloudIcon/UploadCloudIcon.web.test.tsx
index 3b9c9db90b5..0aeab67ebd7 100644
--- a/packages/blade/src/components/Icons/UploadCloudIcon/UploadCloudIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UploadCloudIcon/UploadCloudIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UploadCloudIcon />', () => {
   it('should render UploadCloudIcon', () => {
     const { container } = renderWithTheme(
-      <UploadCloudIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UploadCloudIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.native.test.tsx.snap
index 33200275e3d..70c50fe0d91 100644
--- a/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
       >
         <RNSVGPath
           d="M1.01328 6.84348C2.73489 3.53956 6.31417 1.63791 10.0157 2.06055C13.4557 2.45333 16.3404 4.77817 17.4793 7.99999H18C20.7422 8.0018 23.1349 9.86253 23.8113 12.52C24.4877 15.1775 23.2764 17.9554 20.8687 19.268C20.3838 19.5323 19.7764 19.3536 19.512 18.8687C19.2477 18.3837 19.4265 17.7763 19.9114 17.512C21.5165 16.6369 22.3241 14.785 21.8731 13.0133C21.4222 11.2417 19.8275 10.0012 17.9994 9.99999H16.74C16.2841 9.99999 15.886 9.69167 15.7719 9.2503C15.0466 6.44488 12.6677 4.37635 9.78879 4.04764C6.90984 3.71892 4.12596 5.19798 2.78693 7.76769C1.4479 10.3374 1.83056 13.4665 3.74936 15.6378C4.11508 16.0516 4.07607 16.6836 3.66222 17.0493C3.24838 17.415 2.61641 17.376 2.2507 16.9622C-0.216341 14.1705 -0.708325 10.1474 1.01328 6.84348Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
         />
         <RNSVGPath
           d="M12.7071 11.2929C12.3166 10.9024 11.6834 10.9024 11.2929 11.2929L7.29289 15.2929C6.90237 15.6834 6.90237 16.3166 7.29289 16.7071C7.68342 17.0976 8.31658 17.0976 8.70711 16.7071L11 14.4142V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V14.4142L15.2929 16.7071C15.6834 17.0976 16.3166 17.0976 16.7071 16.7071C17.0976 16.3166 17.0976 15.6834 16.7071 15.2929L12.7071 11.2929Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -76,7 +76,7 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
           name="clip0_60_143"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.web.test.tsx.snap
index 32dbdb163d3..c81f9bc8f8c 100644
--- a/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.web.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
       <path
         d="M1.01328 6.84348C2.73489 3.53956 6.31417 1.63791 10.0157 2.06055C13.4557 2.45333 16.3404 4.77817 17.4793 7.99999H18C20.7422 8.0018 23.1349 9.86253 23.8113 12.52C24.4877 15.1775 23.2764 17.9554 20.8687 19.268C20.3838 19.5323 19.7764 19.3536 19.512 18.8687C19.2477 18.3837 19.4265 17.7763 19.9114 17.512C21.5165 16.6369 22.3241 14.785 21.8731 13.0133C21.4222 11.2417 19.8275 10.0012 17.9994 9.99999H16.74C16.2841 9.99999 15.886 9.69167 15.7719 9.2503C15.0466 6.44488 12.6677 4.37635 9.78879 4.04764C6.90984 3.71892 4.12596 5.19798 2.78693 7.76769C1.4479 10.3374 1.83056 13.4665 3.74936 15.6378C4.11508 16.0516 4.07607 16.6836 3.66222 17.0493C3.24838 17.415 2.61641 17.376 2.2507 16.9622C-0.216341 14.1705 -0.708325 10.1474 1.01328 6.84348Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M12.7071 11.2929C12.3166 10.9024 11.6834 10.9024 11.2929 11.2929L7.29289 15.2929C6.90237 15.6834 6.90237 16.3166 7.29289 16.7071C7.68342 17.0976 8.31658 17.0976 8.70711 16.7071L11 14.4142V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V14.4142L15.2929 16.7071C15.6834 17.0976 16.3166 17.0976 16.7071 16.7071C17.0976 16.3166 17.0976 15.6834 16.7071 15.2929L12.7071 11.2929Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -35,7 +35,7 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/UploadIcon/UploadIcon.native.test.tsx b/packages/blade/src/components/Icons/UploadIcon/UploadIcon.native.test.tsx
index a9e3188c9fe..2629bb999e6 100644
--- a/packages/blade/src/components/Icons/UploadIcon/UploadIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UploadIcon/UploadIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UploadIcon />', () => {
   it('should render UploadIcon', () => {
     const renderTree = renderWithTheme(
-      <UploadIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UploadIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UploadIcon/UploadIcon.web.test.tsx b/packages/blade/src/components/Icons/UploadIcon/UploadIcon.web.test.tsx
index df977fde246..b03f76c957c 100644
--- a/packages/blade/src/components/Icons/UploadIcon/UploadIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UploadIcon/UploadIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UploadIcon />', () => {
   it('should render UploadIcon', () => {
     const { container } = renderWithTheme(
-      <UploadIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UploadIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.native.test.tsx.snap
index dd540d8cbb1..c43a946af8d 100644
--- a/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<UploadIcon /> should render UploadIcon 1`] = `
     >
       <RNSVGPath
         d="M11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289L16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711C16.3166 7.09763 15.6834 7.09763 15.2929 6.70711L13 4.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V4.41421L8.70711 6.70711C8.31658 7.09763 7.68342 7.09763 7.29289 6.70711C6.90237 6.31658 6.90237 5.68342 7.29289 5.29289L11.2929 1.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<UploadIcon /> should render UploadIcon 1`] = `
       />
       <RNSVGPath
         d="M3 16C3.55228 16 4 16.4477 4 17V20C4 20.5523 4.44772 21 5 21H19C19.5523 21 20 20.5523 20 20V17C20 16.4477 20.4477 16 21 16C21.5523 16 22 16.4477 22 17V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V17C2 16.4477 2.44772 16 3 16Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.web.test.tsx.snap
index cbaa87cb632..7487006eb58 100644
--- a/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.web.test.tsx.snap
@@ -14,12 +14,12 @@ exports[`<UploadIcon /> should render UploadIcon 1`] = `
     <path
       d="M11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289L16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711C16.3166 7.09763 15.6834 7.09763 15.2929 6.70711L13 4.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V4.41421L8.70711 6.70711C8.31658 7.09763 7.68342 7.09763 7.29289 6.70711C6.90237 6.31658 6.90237 5.68342 7.29289 5.29289L11.2929 1.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M3 16C3.55228 16 4 16.4477 4 17V20C4 20.5523 4.44772 21 5 21H19C19.5523 21 20 20.5523 20 20V17C20 16.4477 20.4477 16 21 16C21.5523 16 22 16.4477 22 17V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V17C2 16.4477 2.44772 16 3 16Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/UserCheckIcon/UserCheckIcon.native.test.tsx b/packages/blade/src/components/Icons/UserCheckIcon/UserCheckIcon.native.test.tsx
index 7e1c2b29563..3b813d1f0d5 100644
--- a/packages/blade/src/components/Icons/UserCheckIcon/UserCheckIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UserCheckIcon/UserCheckIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UserCheckIcon />', () => {
   it('should render UserCheckIcon', () => {
     const renderTree = renderWithTheme(
-      <UserCheckIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserCheckIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserCheckIcon/UserCheckIcon.web.test.tsx b/packages/blade/src/components/Icons/UserCheckIcon/UserCheckIcon.web.test.tsx
index 9498a859909..9cef4fde9cb 100644
--- a/packages/blade/src/components/Icons/UserCheckIcon/UserCheckIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UserCheckIcon/UserCheckIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UserCheckIcon />', () => {
   it('should render UserCheckIcon', () => {
     const { container } = renderWithTheme(
-      <UserCheckIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserCheckIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.native.test.tsx.snap
index dd06c7603b9..b2e4e490c48 100644
--- a/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3.5 7C3.5 4.23858 5.73858 2 8.5 2C11.2614 2 13.5 4.23858 13.5 7C13.5 9.76142 11.2614 12 8.5 12C5.73858 12 3.5 9.76142 3.5 7ZM8.5 4C6.84315 4 5.5 5.34315 5.5 7C5.5 8.65685 6.84315 10 8.5 10C10.1569 10 11.5 8.65685 11.5 7C11.5 5.34315 10.1569 4 8.5 4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
       />
       <RNSVGPath
         d="M0 19C0 16.2386 2.23858 14 5 14H12C14.7614 14 17 16.2386 17 19V21C17 21.5523 16.5523 22 16 22C15.4477 22 15 21.5523 15 21V19C15 17.3431 13.6569 16 12 16H5C3.34315 16 2 17.3431 2 19V21C2 21.5523 1.55228 22 1 22C0.447715 22 0 21.5523 0 21V19Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -72,7 +72,7 @@ exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
       />
       <RNSVGPath
         d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L19 11.5858L17.7071 10.2929C17.3166 9.90237 16.6834 9.90237 16.2929 10.2929C15.9024 10.6834 15.9024 11.3166 16.2929 11.7071L18.2929 13.7071C18.6834 14.0976 19.3166 14.0976 19.7071 13.7071L23.7071 9.70711Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.web.test.tsx.snap
index 6dd468c1e04..c26e2265602 100644
--- a/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.web.test.tsx.snap
@@ -15,18 +15,18 @@ exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
       clip-rule="evenodd"
       d="M3.5 7C3.5 4.23858 5.73858 2 8.5 2C11.2614 2 13.5 4.23858 13.5 7C13.5 9.76142 11.2614 12 8.5 12C5.73858 12 3.5 9.76142 3.5 7ZM8.5 4C6.84315 4 5.5 5.34315 5.5 7C5.5 8.65685 6.84315 10 8.5 10C10.1569 10 11.5 8.65685 11.5 7C11.5 5.34315 10.1569 4 8.5 4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M0 19C0 16.2386 2.23858 14 5 14H12C14.7614 14 17 16.2386 17 19V21C17 21.5523 16.5523 22 16 22C15.4477 22 15 21.5523 15 21V19C15 17.3431 13.6569 16 12 16H5C3.34315 16 2 17.3431 2 19V21C2 21.5523 1.55228 22 1 22C0.447715 22 0 21.5523 0 21V19Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L19 11.5858L17.7071 10.2929C17.3166 9.90237 16.6834 9.90237 16.2929 10.2929C15.9024 10.6834 15.9024 11.3166 16.2929 11.7071L18.2929 13.7071C18.6834 14.0976 19.3166 14.0976 19.7071 13.7071L23.7071 9.70711Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/UserIcon/UserIcon.native.test.tsx b/packages/blade/src/components/Icons/UserIcon/UserIcon.native.test.tsx
index ae01ae76316..4bfad8b5129 100644
--- a/packages/blade/src/components/Icons/UserIcon/UserIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UserIcon/UserIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UserIcon />', () => {
   it('should render UserIcon', () => {
     const renderTree = renderWithTheme(
-      <UserIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserIcon/UserIcon.web.test.tsx b/packages/blade/src/components/Icons/UserIcon/UserIcon.web.test.tsx
index ce6c1a3316e..6ac32aa628a 100644
--- a/packages/blade/src/components/Icons/UserIcon/UserIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UserIcon/UserIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UserIcon />', () => {
   it('should render UserIcon', () => {
     const { container } = renderWithTheme(
-      <UserIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.native.test.tsx.snap
index ad6510cbb48..c85444700f9 100644
--- a/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<UserIcon /> should render UserIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10ZM9 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<UserIcon /> should render UserIcon 1`] = `
       />
       <RNSVGPath
         d="M8 14a5 5 0 0 0-5 5v2a1 1 0 1 0 2 0v-2a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v2a1 1 0 1 0 2 0v-2a5 5 0 0 0-5-5H8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.web.test.tsx.snap
index 2c6ff4cfd0f..9ba0fd7647f 100644
--- a/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<UserIcon /> should render UserIcon 1`] = `
       clip-rule="evenodd"
       d="M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10ZM9 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M8 14a5 5 0 0 0-5 5v2a1 1 0 1 0 2 0v-2a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v2a1 1 0 1 0 2 0v-2a5 5 0 0 0-5-5H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/UserMinusIcon/UserMinusIcon.native.test.tsx b/packages/blade/src/components/Icons/UserMinusIcon/UserMinusIcon.native.test.tsx
index 1d1c62cc623..8b4cf453f23 100644
--- a/packages/blade/src/components/Icons/UserMinusIcon/UserMinusIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UserMinusIcon/UserMinusIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UserMinusIcon />', () => {
   it('should render UserMinusIcon', () => {
     const renderTree = renderWithTheme(
-      <UserMinusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserMinusIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserMinusIcon/UserMinusIcon.web.test.tsx b/packages/blade/src/components/Icons/UserMinusIcon/UserMinusIcon.web.test.tsx
index a67abcf9d37..cbd5963905c 100644
--- a/packages/blade/src/components/Icons/UserMinusIcon/UserMinusIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UserMinusIcon/UserMinusIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UserMinusIcon />', () => {
   it('should render UserMinusIcon', () => {
     const { container } = renderWithTheme(
-      <UserMinusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserMinusIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.native.test.tsx.snap
index 23e67823a8c..0c770407710 100644
--- a/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3.5 7C3.5 4.23858 5.73858 2 8.5 2C11.2614 2 13.5 4.23858 13.5 7C13.5 9.76142 11.2614 12 8.5 12C5.73858 12 3.5 9.76142 3.5 7ZM8.5 4C6.84315 4 5.5 5.34315 5.5 7C5.5 8.65685 6.84315 10 8.5 10C10.1569 10 11.5 8.65685 11.5 7C11.5 5.34315 10.1569 4 8.5 4Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
       />
       <RNSVGPath
         d="M0 19C0 16.2386 2.23858 14 5 14H12C14.7614 14 17 16.2386 17 19V21C17 21.5523 16.5523 22 16 22C15.4477 22 15 21.5523 15 21V19C15 17.3431 13.6569 16 12 16H5C3.34315 16 2 17.3431 2 19V21C2 21.5523 1.55228 22 1 22C0.447715 22 0 21.5523 0 21V19Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -72,7 +72,7 @@ exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
       />
       <RNSVGPath
         d="M17 10C16.4477 10 16 10.4477 16 11C16 11.5523 16.4477 12 17 12H23C23.5523 12 24 11.5523 24 11C24 10.4477 23.5523 10 23 10H17Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.web.test.tsx.snap
index 903fa16fa58..afbb6debb2d 100644
--- a/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.web.test.tsx.snap
@@ -15,18 +15,18 @@ exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
       clip-rule="evenodd"
       d="M3.5 7C3.5 4.23858 5.73858 2 8.5 2C11.2614 2 13.5 4.23858 13.5 7C13.5 9.76142 11.2614 12 8.5 12C5.73858 12 3.5 9.76142 3.5 7ZM8.5 4C6.84315 4 5.5 5.34315 5.5 7C5.5 8.65685 6.84315 10 8.5 10C10.1569 10 11.5 8.65685 11.5 7C11.5 5.34315 10.1569 4 8.5 4Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M0 19C0 16.2386 2.23858 14 5 14H12C14.7614 14 17 16.2386 17 19V21C17 21.5523 16.5523 22 16 22C15.4477 22 15 21.5523 15 21V19C15 17.3431 13.6569 16 12 16H5C3.34315 16 2 17.3431 2 19V21C2 21.5523 1.55228 22 1 22C0.447715 22 0 21.5523 0 21V19Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M17 10C16.4477 10 16 10.4477 16 11C16 11.5523 16.4477 12 17 12H23C23.5523 12 24 11.5523 24 11C24 10.4477 23.5523 10 23 10H17Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/UserPlusIcon/UserPlusIcon.native.test.tsx b/packages/blade/src/components/Icons/UserPlusIcon/UserPlusIcon.native.test.tsx
index cb71cd60a30..9e02ff4b62c 100644
--- a/packages/blade/src/components/Icons/UserPlusIcon/UserPlusIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UserPlusIcon/UserPlusIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UserPlusIcon />', () => {
   it('should render UserPlusIcon', () => {
     const renderTree = renderWithTheme(
-      <UserPlusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserPlusIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserPlusIcon/UserPlusIcon.web.test.tsx b/packages/blade/src/components/Icons/UserPlusIcon/UserPlusIcon.web.test.tsx
index d0b17168bc5..90cf1bf447f 100644
--- a/packages/blade/src/components/Icons/UserPlusIcon/UserPlusIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UserPlusIcon/UserPlusIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UserPlusIcon />', () => {
   it('should render UserPlusIcon', () => {
     const { container } = renderWithTheme(
-      <UserPlusIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserPlusIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.native.test.tsx.snap
index 8c10a97de5a..ab54d0d6f9f 100644
--- a/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8.5 2C5.73858 2 3.5 4.23858 3.5 7C3.5 9.76142 5.73858 12 8.5 12C11.2614 12 13.5 9.76142 13.5 7C13.5 4.23858 11.2614 2 8.5 2ZM5.5 7C5.5 5.34315 6.84315 4 8.5 4C10.1569 4 11.5 5.34315 11.5 7C11.5 8.65685 10.1569 10 8.5 10C6.84315 10 5.5 8.65685 5.5 7Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
       />
       <RNSVGPath
         d="M5 14C2.23858 14 0 16.2386 0 19V21C0 21.5523 0.447715 22 1 22C1.55228 22 2 21.5523 2 21V19C2 17.3431 3.34315 16 5 16H12C13.6569 16 15 17.3431 15 19V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V19C17 16.2386 14.7614 14 12 14H5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -72,7 +72,7 @@ exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
       />
       <RNSVGPath
         d="M20 7C20.5523 7 21 7.44772 21 8V10H23C23.5523 10 24 10.4477 24 11C24 11.5523 23.5523 12 23 12H21V14C21 14.5523 20.5523 15 20 15C19.4477 15 19 14.5523 19 14V12H17C16.4477 12 16 11.5523 16 11C16 10.4477 16.4477 10 17 10H19V8C19 7.44772 19.4477 7 20 7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.web.test.tsx.snap
index 9efe63a0cd2..d413fb2fbb6 100644
--- a/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.web.test.tsx.snap
@@ -15,18 +15,18 @@ exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
       clip-rule="evenodd"
       d="M8.5 2C5.73858 2 3.5 4.23858 3.5 7C3.5 9.76142 5.73858 12 8.5 12C11.2614 12 13.5 9.76142 13.5 7C13.5 4.23858 11.2614 2 8.5 2ZM5.5 7C5.5 5.34315 6.84315 4 8.5 4C10.1569 4 11.5 5.34315 11.5 7C11.5 8.65685 10.1569 10 8.5 10C6.84315 10 5.5 8.65685 5.5 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M5 14C2.23858 14 0 16.2386 0 19V21C0 21.5523 0.447715 22 1 22C1.55228 22 2 21.5523 2 21V19C2 17.3431 3.34315 16 5 16H12C13.6569 16 15 17.3431 15 19V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V19C17 16.2386 14.7614 14 12 14H5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M20 7C20.5523 7 21 7.44772 21 8V10H23C23.5523 10 24 10.4477 24 11C24 11.5523 23.5523 12 23 12H21V14C21 14.5523 20.5523 15 20 15C19.4477 15 19 14.5523 19 14V12H17C16.4477 12 16 11.5523 16 11C16 10.4477 16.4477 10 17 10H19V8C19 7.44772 19.4477 7 20 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/UserXIcon/UserXIcon.native.test.tsx b/packages/blade/src/components/Icons/UserXIcon/UserXIcon.native.test.tsx
index b1eab3e4bb6..6280cb58eed 100644
--- a/packages/blade/src/components/Icons/UserXIcon/UserXIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UserXIcon/UserXIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UserXIcon />', () => {
   it('should render UserXIcon', () => {
     const renderTree = renderWithTheme(
-      <UserXIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserXIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserXIcon/UserXIcon.web.test.tsx b/packages/blade/src/components/Icons/UserXIcon/UserXIcon.web.test.tsx
index 41d1aa1267b..c696fbdf637 100644
--- a/packages/blade/src/components/Icons/UserXIcon/UserXIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UserXIcon/UserXIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UserXIcon />', () => {
   it('should render UserXIcon', () => {
     const { container } = renderWithTheme(
-      <UserXIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UserXIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.native.test.tsx.snap
index 7b1d281d26c..5f3c10dc591 100644
--- a/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<UserXIcon /> should render UserXIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M8.5 2C5.73858 2 3.5 4.23858 3.5 7C3.5 9.76142 5.73858 12 8.5 12C11.2614 12 13.5 9.76142 13.5 7C13.5 4.23858 11.2614 2 8.5 2ZM5.5 7C5.5 5.34315 6.84315 4 8.5 4C10.1569 4 11.5 5.34315 11.5 7C11.5 8.65685 10.1569 10 8.5 10C6.84315 10 5.5 8.65685 5.5 7Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<UserXIcon /> should render UserXIcon 1`] = `
       />
       <RNSVGPath
         d="M5 14C2.23858 14 0 16.2386 0 19V21C0 21.5523 0.447715 22 1 22C1.55228 22 2 21.5523 2 21V19C2 17.3431 3.34315 16 5 16H12C13.6569 16 15 17.3431 15 19V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V19C17 16.2386 14.7614 14 12 14H5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -72,7 +72,7 @@ exports[`<UserXIcon /> should render UserXIcon 1`] = `
       />
       <RNSVGPath
         d="M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L20.5 9.08579L22.2929 7.29289C22.6834 6.90237 23.3166 6.90237 23.7071 7.29289C24.0976 7.68342 24.0976 8.31658 23.7071 8.70711L21.9142 10.5L23.7071 12.2929C24.0976 12.6834 24.0976 13.3166 23.7071 13.7071C23.3166 14.0976 22.6834 14.0976 22.2929 13.7071L20.5 11.9142L18.7071 13.7071C18.3166 14.0976 17.6834 14.0976 17.2929 13.7071C16.9024 13.3166 16.9024 12.6834 17.2929 12.2929L19.0858 10.5L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.web.test.tsx.snap
index 5def6c3af66..66656a72dc9 100644
--- a/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.web.test.tsx.snap
@@ -15,18 +15,18 @@ exports[`<UserXIcon /> should render UserXIcon 1`] = `
       clip-rule="evenodd"
       d="M8.5 2C5.73858 2 3.5 4.23858 3.5 7C3.5 9.76142 5.73858 12 8.5 12C11.2614 12 13.5 9.76142 13.5 7C13.5 4.23858 11.2614 2 8.5 2ZM5.5 7C5.5 5.34315 6.84315 4 8.5 4C10.1569 4 11.5 5.34315 11.5 7C11.5 8.65685 10.1569 10 8.5 10C6.84315 10 5.5 8.65685 5.5 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M5 14C2.23858 14 0 16.2386 0 19V21C0 21.5523 0.447715 22 1 22C1.55228 22 2 21.5523 2 21V19C2 17.3431 3.34315 16 5 16H12C13.6569 16 15 17.3431 15 19V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V19C17 16.2386 14.7614 14 12 14H5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L20.5 9.08579L22.2929 7.29289C22.6834 6.90237 23.3166 6.90237 23.7071 7.29289C24.0976 7.68342 24.0976 8.31658 23.7071 8.70711L21.9142 10.5L23.7071 12.2929C24.0976 12.6834 24.0976 13.3166 23.7071 13.7071C23.3166 14.0976 22.6834 14.0976 22.2929 13.7071L20.5 11.9142L18.7071 13.7071C18.3166 14.0976 17.6834 14.0976 17.2929 13.7071C16.9024 13.3166 16.9024 12.6834 17.2929 12.2929L19.0858 10.5L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/UsersIcon/UsersIcon.native.test.tsx b/packages/blade/src/components/Icons/UsersIcon/UsersIcon.native.test.tsx
index 7e5ff6d961f..758ee23818e 100644
--- a/packages/blade/src/components/Icons/UsersIcon/UsersIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/UsersIcon/UsersIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<UsersIcon />', () => {
   it('should render UsersIcon', () => {
     const renderTree = renderWithTheme(
-      <UsersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UsersIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UsersIcon/UsersIcon.web.test.tsx b/packages/blade/src/components/Icons/UsersIcon/UsersIcon.web.test.tsx
index de6bd47b114..dbb9db7464a 100644
--- a/packages/blade/src/components/Icons/UsersIcon/UsersIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/UsersIcon/UsersIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<UsersIcon />', () => {
   it('should render UsersIcon', () => {
     const { container } = renderWithTheme(
-      <UsersIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <UsersIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.native.test.tsx.snap
index caeec1431fa..9e395315e47 100644
--- a/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
     >
       <RNSVGPath
         d="M9 0C6.23858 0 4 2.23858 4 5C4 7.76142 6.23858 10 9 10C11.7614 10 14 7.76142 14 5C14 2.23858 11.7614 0 9 0ZM6 5C6 3.34315 7.34315 2 9 2C10.6569 2 12 3.34315 12 5C12 6.65685 10.6569 8 9 8C7.34315 8 6 6.65685 6 5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
       />
       <RNSVGPath
         d="M5 12C2.23858 12 0 14.2386 0 17V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V17C2 15.3431 3.34315 14 5 14H13C14.6569 14 16 15.3431 16 17V19C16 19.5523 16.4477 20 17 20C17.5523 20 18 19.5523 18 19V17C18 14.2386 15.7614 12 13 12H5Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -69,7 +69,7 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
       />
       <RNSVGPath
         d="M19.0318 12.88C19.1698 12.3453 19.7153 12.0237 20.25 12.1618C22.4562 12.7314 23.9983 14.7207 24 16.9993V19C24 19.5523 23.5523 20 23 20C22.4477 20 22 19.5523 22 19V17.0007C21.9988 15.6337 21.0737 14.44 19.75 14.0982C19.2153 13.9602 18.8937 13.4148 19.0318 12.88Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -78,7 +78,7 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
       />
       <RNSVGPath
         d="M16.248 0.161251C15.713 0.0242632 15.1682 0.346936 15.0312 0.881962C14.8943 1.41699 15.2169 1.96176 15.752 2.09875C17.0794 2.43863 18.0078 3.63474 18.0078 5.005C18.0078 6.37526 17.0794 7.57137 15.752 7.91125C15.2169 8.04824 14.8943 8.59301 15.0312 9.12804C15.1682 9.66307 15.713 9.98574 16.248 9.84875C18.4604 9.28229 20.0078 7.28876 20.0078 5.005C20.0078 2.72124 18.4604 0.727714 16.248 0.161251Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.web.test.tsx.snap
index 8a151d3771b..57020115dc5 100644
--- a/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.web.test.tsx.snap
@@ -14,22 +14,22 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
     <path
       d="M9 0C6.23858 0 4 2.23858 4 5C4 7.76142 6.23858 10 9 10C11.7614 10 14 7.76142 14 5C14 2.23858 11.7614 0 9 0ZM6 5C6 3.34315 7.34315 2 9 2C10.6569 2 12 3.34315 12 5C12 6.65685 10.6569 8 9 8C7.34315 8 6 6.65685 6 5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M5 12C2.23858 12 0 14.2386 0 17V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V17C2 15.3431 3.34315 14 5 14H13C14.6569 14 16 15.3431 16 17V19C16 19.5523 16.4477 20 17 20C17.5523 20 18 19.5523 18 19V17C18 14.2386 15.7614 12 13 12H5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M19.0318 12.88C19.1698 12.3453 19.7153 12.0237 20.25 12.1618C22.4562 12.7314 23.9983 14.7207 24 16.9993V19C24 19.5523 23.5523 20 23 20C22.4477 20 22 19.5523 22 19V17.0007C21.9988 15.6337 21.0737 14.44 19.75 14.0982C19.2153 13.9602 18.8937 13.4148 19.0318 12.88Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M16.248 0.161251C15.713 0.0242632 15.1682 0.346936 15.0312 0.881962C14.8943 1.41699 15.2169 1.96176 15.752 2.09875C17.0794 2.43863 18.0078 3.63474 18.0078 5.005C18.0078 6.37526 17.0794 7.57137 15.752 7.91125C15.2169 8.04824 14.8943 8.59301 15.0312 9.12804C15.1682 9.66307 15.713 9.98574 16.248 9.84875C18.4604 9.28229 20.0078 7.28876 20.0078 5.005C20.0078 2.72124 18.4604 0.727714 16.248 0.161251Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/VideoIcon/VideoIcon.native.test.tsx b/packages/blade/src/components/Icons/VideoIcon/VideoIcon.native.test.tsx
index 19e25ea78fd..bb47e26c142 100644
--- a/packages/blade/src/components/Icons/VideoIcon/VideoIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/VideoIcon/VideoIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<VideoIcon />', () => {
   it('should render VideoIcon', () => {
     const renderTree = renderWithTheme(
-      <VideoIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VideoIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VideoIcon/VideoIcon.web.test.tsx b/packages/blade/src/components/Icons/VideoIcon/VideoIcon.web.test.tsx
index a02edd38c55..f5d7f89cf06 100644
--- a/packages/blade/src/components/Icons/VideoIcon/VideoIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/VideoIcon/VideoIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<VideoIcon />', () => {
   it('should render VideoIcon', () => {
     const { container } = renderWithTheme(
-      <VideoIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VideoIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.native.test.tsx.snap
index 0cb7a893b02..379657ece39 100644
--- a/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<VideoIcon /> should render VideoIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M3 4C1.34315 4 0 5.34315 0 7V17C0 18.6569 1.34315 20 3 20H14C15.6569 20 17 18.6569 17 17V13.9432L22.4188 17.8137C22.7236 18.0315 23.1245 18.0606 23.4576 17.8892C23.7907 17.7178 24 17.3746 24 17V7C24 6.62542 23.7907 6.28224 23.4576 6.11084C23.1245 5.93943 22.7236 5.96855 22.4188 6.18627L17 10.0568V7C17 5.34315 15.6569 4 14 4H3ZM15 7C15 6.44772 14.5523 6 14 6H3C2.44772 6 2 6.44772 2 7V17C2 17.5523 2.44772 18 3 18H14C14.5523 18 15 17.5523 15 17V7ZM22 15.0568L17.7205 12L22 8.94319V15.0568Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.web.test.tsx.snap
index f5969c16901..45bd5abcd47 100644
--- a/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<VideoIcon /> should render VideoIcon 1`] = `
       clip-rule="evenodd"
       d="M3 4C1.34315 4 0 5.34315 0 7V17C0 18.6569 1.34315 20 3 20H14C15.6569 20 17 18.6569 17 17V13.9432L22.4188 17.8137C22.7236 18.0315 23.1245 18.0606 23.4576 17.8892C23.7907 17.7178 24 17.3746 24 17V7C24 6.62542 23.7907 6.28224 23.4576 6.11084C23.1245 5.93943 22.7236 5.96855 22.4188 6.18627L17 10.0568V7C17 5.34315 15.6569 4 14 4H3ZM15 7C15 6.44772 14.5523 6 14 6H3C2.44772 6 2 6.44772 2 7V17C2 17.5523 2.44772 18 3 18H14C14.5523 18 15 17.5523 15 17V7ZM22 15.0568L17.7205 12L22 8.94319V15.0568Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/VideoOffIcon/VideoOffIcon.native.test.tsx b/packages/blade/src/components/Icons/VideoOffIcon/VideoOffIcon.native.test.tsx
index c36e3bfb9ce..86d09dc50fb 100644
--- a/packages/blade/src/components/Icons/VideoOffIcon/VideoOffIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/VideoOffIcon/VideoOffIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<VideoOffIcon />', () => {
   it('should render VideoOffIcon', () => {
     const renderTree = renderWithTheme(
-      <VideoOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VideoOffIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VideoOffIcon/VideoOffIcon.web.test.tsx b/packages/blade/src/components/Icons/VideoOffIcon/VideoOffIcon.web.test.tsx
index 882cf99756a..c1e01cb231b 100644
--- a/packages/blade/src/components/Icons/VideoOffIcon/VideoOffIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/VideoOffIcon/VideoOffIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<VideoOffIcon />', () => {
   it('should render VideoOffIcon', () => {
     const { container } = renderWithTheme(
-      <VideoOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VideoOffIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.native.test.tsx.snap
index e1bc9eacbaf..cfa9282c6ee 100644
--- a/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.native.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L2.6108 4.02501C1.13781 4.21583 1.49012e-08 5.47504 1.49012e-08 7V17C1.49012e-08 18.6569 1.34315 20 3 20H14C15.2397 20 16.3038 19.248 16.761 18.1753L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L1.70711 0.292893ZM15 16.4142L4.58579 6H3C2.44772 6 2 6.44772 2 7V17C2 17.5523 2.44772 18 3 18H14C14.5523 18 15 17.5523 15 17V16.4142Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -66,7 +66,7 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
         />
         <RNSVGPath
           d="M14 4H10.66C10.1077 4 9.66 4.44772 9.66 5C9.66 5.55228 10.1077 6 10.66 6H14C14.5523 6 15 6.44772 15 7V10.34C15 10.6052 15.1054 10.8596 15.2929 11.0471L16.2929 12.0471C16.6402 12.3944 17.1882 12.4381 17.5861 12.1503L22 8.95752V17C22 17.5523 22.4477 18 23 18C23.5523 18 24 17.5523 24 17V7C24 6.62434 23.7895 6.28037 23.4549 6.10947C23.1204 5.93857 22.7183 5.96958 22.4139 6.18975L17.1045 10.0303L17 9.92579V7C17 5.34315 15.6569 4 14 4Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -79,7 +79,7 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
           name="clip0_59_161"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.web.test.tsx.snap
index 3a5ec1c5478..596b8bf8a6f 100644
--- a/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.web.test.tsx.snap
@@ -19,13 +19,13 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
         clip-rule="evenodd"
         d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L2.6108 4.02501C1.13781 4.21583 1.49012e-08 5.47504 1.49012e-08 7V17C1.49012e-08 18.6569 1.34315 20 3 20H14C15.2397 20 16.3038 19.248 16.761 18.1753L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L1.70711 0.292893ZM15 16.4142L4.58579 6H3C2.44772 6 2 6.44772 2 7V17C2 17.5523 2.44772 18 3 18H14C14.5523 18 15 17.5523 15 17V16.4142Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
       <path
         d="M14 4H10.66C10.1077 4 9.66 4.44772 9.66 5C9.66 5.55228 10.1077 6 10.66 6H14C14.5523 6 15 6.44772 15 7V10.34C15 10.6052 15.1054 10.8596 15.2929 11.0471L16.2929 12.0471C16.6402 12.3944 17.1882 12.4381 17.5861 12.1503L22 8.95752V17C22 17.5523 22.4477 18 23 18C23.5523 18 24 17.5523 24 17V7C24 6.62434 23.7895 6.28037 23.4549 6.10947C23.1204 5.93857 22.7183 5.96958 22.4139 6.18975L17.1045 10.0303L17 9.92579V7C17 5.34315 15.6569 4 14 4Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -37,7 +37,7 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/VoicemailIcon/VoicemailIcon.native.test.tsx b/packages/blade/src/components/Icons/VoicemailIcon/VoicemailIcon.native.test.tsx
index a09ee6b4e8f..b4cbee579d1 100644
--- a/packages/blade/src/components/Icons/VoicemailIcon/VoicemailIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/VoicemailIcon/VoicemailIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<VoicemailIcon />', () => {
   it('should render VoicemailIcon', () => {
     const renderTree = renderWithTheme(
-      <VoicemailIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VoicemailIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VoicemailIcon/VoicemailIcon.web.test.tsx b/packages/blade/src/components/Icons/VoicemailIcon/VoicemailIcon.web.test.tsx
index 51dff2ccf8b..6bd6a8f82a7 100644
--- a/packages/blade/src/components/Icons/VoicemailIcon/VoicemailIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/VoicemailIcon/VoicemailIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<VoicemailIcon />', () => {
   it('should render VoicemailIcon', () => {
     const { container } = renderWithTheme(
-      <VoicemailIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VoicemailIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.native.test.tsx.snap
index 9a9b94b0de6..85ee6bed90f 100644
--- a/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<VoicemailIcon /> should render VoicemailIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M0 11.5C0 8.46243 2.46243 6 5.5 6C8.53757 6 11 8.46243 11 11.5C11 12.8296 10.5282 14.0491 9.74284 15H14.2572C13.4718 14.0491 13 12.8296 13 11.5C13 8.46243 15.4624 6 18.5 6C21.5376 6 24 8.46243 24 11.5C24 14.5376 21.5376 17 18.5 17H5.5C2.46243 17 0 14.5376 0 11.5ZM18.5 15C20.433 15 22 13.433 22 11.5C22 9.567 20.433 8 18.5 8C16.567 8 15 9.567 15 11.5C15 13.433 16.567 15 18.5 15ZM5.5 15C7.433 15 9 13.433 9 11.5C9 9.567 7.433 8 5.5 8C3.567 8 2 9.567 2 11.5C2 13.433 3.567 15 5.5 15Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.web.test.tsx.snap
index 73ef785e754..951cff656e6 100644
--- a/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<VoicemailIcon /> should render VoicemailIcon 1`] = `
       clip-rule="evenodd"
       d="M0 11.5C0 8.46243 2.46243 6 5.5 6C8.53757 6 11 8.46243 11 11.5C11 12.8296 10.5282 14.0491 9.74284 15H14.2572C13.4718 14.0491 13 12.8296 13 11.5C13 8.46243 15.4624 6 18.5 6C21.5376 6 24 8.46243 24 11.5C24 14.5376 21.5376 17 18.5 17H5.5C2.46243 17 0 14.5376 0 11.5ZM18.5 15C20.433 15 22 13.433 22 11.5C22 9.567 20.433 8 18.5 8C16.567 8 15 9.567 15 11.5C15 13.433 16.567 15 18.5 15ZM5.5 15C7.433 15 9 13.433 9 11.5C9 9.567 7.433 8 5.5 8C3.567 8 2 9.567 2 11.5C2 13.433 3.567 15 5.5 15Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/VolumeHighIcon/VolumeHighIcon.native.test.tsx b/packages/blade/src/components/Icons/VolumeHighIcon/VolumeHighIcon.native.test.tsx
index 65362aa8426..ee0d1ace52b 100644
--- a/packages/blade/src/components/Icons/VolumeHighIcon/VolumeHighIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/VolumeHighIcon/VolumeHighIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<VolumeHighIcon />', () => {
   it('should render VolumeHighIcon', () => {
     const renderTree = renderWithTheme(
-      <VolumeHighIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VolumeHighIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VolumeHighIcon/VolumeHighIcon.web.test.tsx b/packages/blade/src/components/Icons/VolumeHighIcon/VolumeHighIcon.web.test.tsx
index 4930c080456..a92d3e878c4 100644
--- a/packages/blade/src/components/Icons/VolumeHighIcon/VolumeHighIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/VolumeHighIcon/VolumeHighIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<VolumeHighIcon />', () => {
   it('should render VolumeHighIcon', () => {
     const { container } = renderWithTheme(
-      <VolumeHighIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VolumeHighIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.native.test.tsx.snap
index b646dad2aa8..c22d8df8bf0 100644
--- a/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
     >
       <RNSVGPath
         d="M19.7773 4.22318C19.3868 3.83259 18.7536 3.8325 18.363 4.22296C17.9725 4.61343 17.9724 5.24659 18.3628 5.63718C21.8763 9.15167 21.8763 14.8487 18.3628 18.3632C17.9724 18.7538 17.9725 19.3869 18.363 19.7774C18.7536 20.1679 19.3868 20.1678 19.7773 19.7772C24.0715 15.4817 24.0715 8.51867 19.7773 4.22318Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -60,7 +60,7 @@ exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
       />
       <RNSVGPath
         d="M16.2473 7.75318C15.8568 7.36259 15.2236 7.3625 14.833 7.75296C14.4425 8.14343 14.4424 8.77659 14.8328 9.16718C16.3944 10.7292 16.3944 13.2612 14.8328 14.8232C14.4424 15.2138 14.4425 15.8469 14.833 16.2374C15.2236 16.6279 15.8568 16.6278 16.2473 16.2372C18.5895 13.8942 18.5895 10.0962 16.2473 7.75318Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -70,7 +70,7 @@ exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M12 5.00013C12 4.61573 11.7797 4.26535 11.4332 4.09883C11.0867 3.93231 10.6755 3.97913 10.3753 4.21926L5.64922 8.00013H2C1.44772 8.00013 1 8.44785 1 9.00013V15.0001C1 15.5524 1.44772 16.0001 2 16.0001H5.64922L10.3753 19.781C10.6755 20.0211 11.0867 20.068 11.4332 19.9014C11.7797 19.7349 12 19.3845 12 19.0001V5.00013ZM6.62469 9.781L10 7.08076V16.9195L6.62469 14.2193C6.44738 14.0774 6.22707 14.0001 6 14.0001H3V10.0001H6C6.22707 10.0001 6.44738 9.92285 6.62469 9.781Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.web.test.tsx.snap
index b523390cd30..f7f14d760a2 100644
--- a/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.web.test.tsx.snap
@@ -14,18 +14,18 @@ exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
     <path
       d="M19.7773 4.22318C19.3868 3.83259 18.7536 3.8325 18.363 4.22296C17.9725 4.61343 17.9724 5.24659 18.3628 5.63718C21.8763 9.15167 21.8763 14.8487 18.3628 18.3632C17.9724 18.7538 17.9725 19.3869 18.363 19.7774C18.7536 20.1679 19.3868 20.1678 19.7773 19.7772C24.0715 15.4817 24.0715 8.51867 19.7773 4.22318Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       d="M16.2473 7.75318C15.8568 7.36259 15.2236 7.3625 14.833 7.75296C14.4425 8.14343 14.4424 8.77659 14.8328 9.16718C16.3944 10.7292 16.3944 13.2612 14.8328 14.8232C14.4424 15.2138 14.4425 15.8469 14.833 16.2374C15.2236 16.6279 15.8568 16.6278 16.2473 16.2372C18.5895 13.8942 18.5895 10.0962 16.2473 7.75318Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M12 5.00013C12 4.61573 11.7797 4.26535 11.4332 4.09883C11.0867 3.93231 10.6755 3.97913 10.3753 4.21926L5.64922 8.00013H2C1.44772 8.00013 1 8.44785 1 9.00013V15.0001C1 15.5524 1.44772 16.0001 2 16.0001H5.64922L10.3753 19.781C10.6755 20.0211 11.0867 20.068 11.4332 19.9014C11.7797 19.7349 12 19.3845 12 19.0001V5.00013ZM6.62469 9.781L10 7.08076V16.9195L6.62469 14.2193C6.44738 14.0774 6.22707 14.0001 6 14.0001H3V10.0001H6C6.22707 10.0001 6.44738 9.92285 6.62469 9.781Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/VolumeIcon/VolumeIcon.native.test.tsx b/packages/blade/src/components/Icons/VolumeIcon/VolumeIcon.native.test.tsx
index 5b047744265..98f99c37efc 100644
--- a/packages/blade/src/components/Icons/VolumeIcon/VolumeIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/VolumeIcon/VolumeIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<VolumeIcon />', () => {
   it('should render VolumeIcon', () => {
     const renderTree = renderWithTheme(
-      <VolumeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VolumeIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VolumeIcon/VolumeIcon.web.test.tsx b/packages/blade/src/components/Icons/VolumeIcon/VolumeIcon.web.test.tsx
index 57e4076cbd7..544515a0a83 100644
--- a/packages/blade/src/components/Icons/VolumeIcon/VolumeIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/VolumeIcon/VolumeIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<VolumeIcon />', () => {
   it('should render VolumeIcon', () => {
     const { container } = renderWithTheme(
-      <VolumeIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VolumeIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.native.test.tsx.snap
index 3d401d72cde..e29fb3da76c 100644
--- a/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<VolumeIcon /> should render VolumeIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M16.4332 4.09871C16.7797 4.26523 17 4.6156 17 5.00001V19C17 19.3844 16.7797 19.7348 16.4332 19.9013C16.0867 20.0678 15.6755 20.021 15.3753 19.7809L10.6492 16H7C6.44772 16 6 15.5523 6 15V9.00001C6 8.44772 6.44772 8.00001 7 8.00001H10.6492L15.3753 4.21914C15.6755 3.979 16.0867 3.93219 16.4332 4.09871ZM15 7.08063L11.6247 9.78088C11.4474 9.92273 11.2271 10 11 10H8V14H11C11.2271 14 11.4474 14.0773 11.6247 14.2191L15 16.9194V7.08063Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.web.test.tsx.snap
index e2a3890c480..b9227b4f3f4 100644
--- a/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<VolumeIcon /> should render VolumeIcon 1`] = `
       clip-rule="evenodd"
       d="M16.4332 4.09871C16.7797 4.26523 17 4.6156 17 5.00001V19C17 19.3844 16.7797 19.7348 16.4332 19.9013C16.0867 20.0678 15.6755 20.021 15.3753 19.7809L10.6492 16H7C6.44772 16 6 15.5523 6 15V9.00001C6 8.44772 6.44772 8.00001 7 8.00001H10.6492L15.3753 4.21914C15.6755 3.979 16.0867 3.93219 16.4332 4.09871ZM15 7.08063L11.6247 9.78088C11.4474 9.92273 11.2271 10 11 10H8V14H11C11.2271 14 11.4474 14.0773 11.6247 14.2191L15 16.9194V7.08063Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/VolumeLowIcon/VolumeLowIcon.native.test.tsx b/packages/blade/src/components/Icons/VolumeLowIcon/VolumeLowIcon.native.test.tsx
index bd9434cafb4..3cb393bbfbd 100644
--- a/packages/blade/src/components/Icons/VolumeLowIcon/VolumeLowIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/VolumeLowIcon/VolumeLowIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<VolumeLowIcon />', () => {
   it('should render VolumeLowIcon', () => {
     const renderTree = renderWithTheme(
-      <VolumeLowIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VolumeLowIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VolumeLowIcon/VolumeLowIcon.web.test.tsx b/packages/blade/src/components/Icons/VolumeLowIcon/VolumeLowIcon.web.test.tsx
index 90fb67683b6..9a1bbbbee59 100644
--- a/packages/blade/src/components/Icons/VolumeLowIcon/VolumeLowIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/VolumeLowIcon/VolumeLowIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<VolumeLowIcon />', () => {
   it('should render VolumeLowIcon', () => {
     const { container } = renderWithTheme(
-      <VolumeLowIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VolumeLowIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.native.test.tsx.snap
index c14a43b7710..704e48ef06d 100644
--- a/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<VolumeLowIcon /> should render VolumeLowIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M13.4332 4.09871C13.7797 4.26523 14 4.6156 14 5.00001V19C14 19.3844 13.7797 19.7348 13.4332 19.9013C13.0867 20.0678 12.6755 20.021 12.3753 19.7809L7.64922 16H4C3.44772 16 3 15.5523 3 15V9.00001C3 8.44772 3.44772 8.00001 4 8.00001H7.64922L12.3753 4.21914C12.6755 3.979 13.0867 3.93219 13.4332 4.09871ZM12 7.08063L8.62469 9.78088C8.44738 9.92273 8.22707 10 8 10H5V14H8C8.22707 14 8.44738 14.0773 8.62469 14.2191L12 16.9194V7.08063Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -64,7 +64,7 @@ exports[`<VolumeLowIcon /> should render VolumeLowIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M16.833 7.7528C17.2236 7.36233 17.8567 7.36243 18.2472 7.75301C20.5895 10.096 20.5895 13.894 18.2472 16.237C17.8567 16.6276 17.2236 16.6277 16.833 16.2372C16.4424 15.8468 16.4423 15.2136 16.8328 14.823C18.3943 13.261 18.3943 10.729 16.8328 9.16701C16.4423 8.77643 16.4424 8.14326 16.833 7.7528Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.web.test.tsx.snap
index 81f23a44f95..6dc5ce7d0c4 100644
--- a/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.web.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<VolumeLowIcon /> should render VolumeLowIcon 1`] = `
       clip-rule="evenodd"
       d="M13.4332 4.09871C13.7797 4.26523 14 4.6156 14 5.00001V19C14 19.3844 13.7797 19.7348 13.4332 19.9013C13.0867 20.0678 12.6755 20.021 12.3753 19.7809L7.64922 16H4C3.44772 16 3 15.5523 3 15V9.00001C3 8.44772 3.44772 8.00001 4 8.00001H7.64922L12.3753 4.21914C12.6755 3.979 13.0867 3.93219 13.4332 4.09871ZM12 7.08063L8.62469 9.78088C8.44738 9.92273 8.22707 10 8 10H5V14H8C8.22707 14 8.44738 14.0773 8.62469 14.2191L12 16.9194V7.08063Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       clip-rule="evenodd"
       d="M16.833 7.7528C17.2236 7.36233 17.8567 7.36243 18.2472 7.75301C20.5895 10.096 20.5895 13.894 18.2472 16.237C17.8567 16.6276 17.2236 16.6277 16.833 16.2372C16.4424 15.8468 16.4423 15.2136 16.8328 14.823C18.3943 13.261 18.3943 10.729 16.8328 9.16701C16.4423 8.77643 16.4424 8.14326 16.833 7.7528Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/VolumeMuteIcon/VolumeMuteIcon.native.test.tsx b/packages/blade/src/components/Icons/VolumeMuteIcon/VolumeMuteIcon.native.test.tsx
index 61adf9c4adc..744d55892a4 100644
--- a/packages/blade/src/components/Icons/VolumeMuteIcon/VolumeMuteIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/VolumeMuteIcon/VolumeMuteIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<VolumeMuteIcon />', () => {
   it('should render VolumeMuteIcon', () => {
     const renderTree = renderWithTheme(
-      <VolumeMuteIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VolumeMuteIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VolumeMuteIcon/VolumeMuteIcon.web.test.tsx b/packages/blade/src/components/Icons/VolumeMuteIcon/VolumeMuteIcon.web.test.tsx
index f959cffa119..46c28d54323 100644
--- a/packages/blade/src/components/Icons/VolumeMuteIcon/VolumeMuteIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/VolumeMuteIcon/VolumeMuteIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<VolumeMuteIcon />', () => {
   it('should render VolumeMuteIcon', () => {
     const { container } = renderWithTheme(
-      <VolumeMuteIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <VolumeMuteIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.native.test.tsx.snap
index fb165d807ca..bbd6265ef69 100644
--- a/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<VolumeMuteIcon /> should render VolumeMuteIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M10.4332 4.09871C10.7797 4.26523 11 4.6156 11 5.00001V19C11 19.3844 10.7797 19.7348 10.4332 19.9013C10.0867 20.0678 9.67548 20.021 9.37531 19.7809L4.64922 16H1C0.447715 16 0 15.5523 0 15V9.00001C0 8.44772 0.447715 8.00001 1 8.00001H4.64922L9.37531 4.21914C9.67548 3.979 10.0867 3.93219 10.4332 4.09871ZM9 7.08063L5.62469 9.78088C5.44738 9.92273 5.22707 10 5 10H2V14H5C5.22707 14 5.44738 14.0773 5.62469 14.2191L9 16.9194V7.08063Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
@@ -63,7 +63,7 @@ exports[`<VolumeMuteIcon /> should render VolumeMuteIcon 1`] = `
       />
       <RNSVGPath
         d="M22.7071 8.29289C23.0976 8.68342 23.0976 9.31658 22.7071 9.70711L20.4142 12L22.7071 14.2929C23.0976 14.6834 23.0976 15.3166 22.7071 15.7071C22.3166 16.0976 21.6834 16.0976 21.2929 15.7071L19 13.4142L16.7071 15.7071C16.3166 16.0976 15.6834 16.0976 15.2929 15.7071C14.9024 15.3166 14.9024 14.6834 15.2929 14.2929L17.5858 12L15.2929 9.70711C14.9024 9.31658 14.9024 8.68342 15.2929 8.29289C15.6834 7.90237 16.3166 7.90237 16.7071 8.29289L19 10.5858L21.2929 8.29289C21.6834 7.90237 22.3166 7.90237 22.7071 8.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
diff --git a/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.web.test.tsx.snap
index 576a8f40f16..fd734f849cc 100644
--- a/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.web.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`<VolumeMuteIcon /> should render VolumeMuteIcon 1`] = `
       clip-rule="evenodd"
       d="M10.4332 4.09871C10.7797 4.26523 11 4.6156 11 5.00001V19C11 19.3844 10.7797 19.7348 10.4332 19.9013C10.0867 20.0678 9.67548 20.021 9.37531 19.7809L4.64922 16H1C0.447715 16 0 15.5523 0 15V9.00001C0 8.44772 0.447715 8.00001 1 8.00001H4.64922L9.37531 4.21914C9.67548 3.979 10.0867 3.93219 10.4332 4.09871ZM9 7.08063L5.62469 9.78088C5.44738 9.92273 5.22707 10 5 10H2V14H5C5.22707 14 5.44738 14.0773 5.62469 14.2191L9 16.9194V7.08063Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
     <path
       d="M22.7071 8.29289C23.0976 8.68342 23.0976 9.31658 22.7071 9.70711L20.4142 12L22.7071 14.2929C23.0976 14.6834 23.0976 15.3166 22.7071 15.7071C22.3166 16.0976 21.6834 16.0976 21.2929 15.7071L19 13.4142L16.7071 15.7071C16.3166 16.0976 15.6834 16.0976 15.2929 15.7071C14.9024 15.3166 14.9024 14.6834 15.2929 14.2929L17.5858 12L15.2929 9.70711C14.9024 9.31658 14.9024 8.68342 15.2929 8.29289C15.6834 7.90237 16.3166 7.90237 16.7071 8.29289L19 10.5858L21.2929 8.29289C21.6834 7.90237 22.3166 7.90237 22.7071 8.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
   </svg>
 </div>
diff --git a/packages/blade/src/components/Icons/WatchIcon/WatchIcon.native.test.tsx b/packages/blade/src/components/Icons/WatchIcon/WatchIcon.native.test.tsx
index e6ae95e9276..4b98721a2d4 100644
--- a/packages/blade/src/components/Icons/WatchIcon/WatchIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/WatchIcon/WatchIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<WatchIcon />', () => {
   it('should render WatchIcon', () => {
     const renderTree = renderWithTheme(
-      <WatchIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <WatchIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/WatchIcon/WatchIcon.web.test.tsx b/packages/blade/src/components/Icons/WatchIcon/WatchIcon.web.test.tsx
index 63671a2c5e7..0ed62563fa0 100644
--- a/packages/blade/src/components/Icons/WatchIcon/WatchIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/WatchIcon/WatchIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<WatchIcon />', () => {
   it('should render WatchIcon', () => {
     const { container } = renderWithTheme(
-      <WatchIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <WatchIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.native.test.tsx.snap
index f68f5c59da7..7c5cfde817f 100644
--- a/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
       >
         <RNSVGPath
           d="M13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9V12C11 12.2652 11.1054 12.5196 11.2929 12.7071L12.7929 14.2071C13.1834 14.5976 13.8166 14.5976 14.2071 14.2071C14.5976 13.8166 14.5976 13.1834 14.2071 12.7929L13 11.5858V9Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -64,7 +64,7 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
         <RNSVGPath
           clipRule={0}
           d="M14.18 0H9.82999C8.27904 0.00146073 6.98392 1.18543 6.84405 2.73L6.53044 6.16183C4.97305 7.62147 4 9.6971 4 12C4 14.3029 4.97305 16.3785 6.53044 17.8382L6.84405 21.27C6.98392 22.8146 8.27904 23.9985 9.82999 24H14.18C14.4145 24 14.7429 23.9606 15.0843 23.8565C15.4071 23.758 15.8106 23.5806 16.1549 23.2577C16.5455 22.9439 17.086 22.2545 17.1758 21.271L17.4914 17.8176C19.036 16.3591 20 14.2921 20 12C20 9.7079 19.036 7.64093 17.4914 6.18239L17.1758 2.729C17.086 1.74552 16.5455 1.05606 16.1549 0.742309C15.8106 0.419433 15.4071 0.241973 15.0843 0.143508C14.7429 0.03936 14.4145 -2.086e-06 14.18 0ZM15.3507 4.73337L15.1841 2.91101C15.1678 2.73272 15.1076 2.58488 15.0381 2.47143C14.9797 2.37626 14.9266 2.32408 14.913 2.31074C14.9088 2.30665 14.9084 2.30621 14.9127 2.30934L14.8488 2.26296L14.7929 2.20709C14.748 2.16222 14.6531 2.10298 14.5007 2.05647C14.3504 2.01063 14.2188 2 14.18 2H9.83061C9.3137 2.00065 8.88246 2.39516 8.83593 2.91L8.67018 4.72378C9.68402 4.25906 10.8118 4 12 4C13.1964 4 14.3315 4.26263 15.3507 4.73337ZM8.83593 21.09L8.67018 19.2762C9.68402 19.7409 10.8118 20 12 20C13.1964 20 14.3315 19.7374 15.3507 19.2666L15.1841 21.089C15.1678 21.2673 15.1076 21.4151 15.0381 21.5286C14.9797 21.6237 14.9266 21.6759 14.913 21.6893C14.9089 21.6933 14.9084 21.6938 14.9126 21.6907L14.8488 21.737L14.7929 21.7929C14.748 21.8378 14.6531 21.897 14.5007 21.9435C14.3504 21.9894 14.2188 22 14.18 22H9.83061C9.3137 21.9993 8.88246 21.6048 8.83593 21.09ZM6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z"
-          fill={4282603381}
+          fill={4280563015}
           fillRule={0}
           propList={
             [
@@ -79,7 +79,7 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
           name="clip0_60_398"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.web.test.tsx.snap
index 0f6c8a0cf56..309db54adcd 100644
--- a/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.web.test.tsx.snap
@@ -18,13 +18,13 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
       <path
         d="M13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9V12C11 12.2652 11.1054 12.5196 11.2929 12.7071L12.7929 14.2071C13.1834 14.5976 13.8166 14.5976 14.2071 14.2071C14.5976 13.8166 14.5976 13.1834 14.2071 12.7929L13 11.5858V9Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         clip-rule="evenodd"
         d="M14.18 0H9.82999C8.27904 0.00146073 6.98392 1.18543 6.84405 2.73L6.53044 6.16183C4.97305 7.62147 4 9.6971 4 12C4 14.3029 4.97305 16.3785 6.53044 17.8382L6.84405 21.27C6.98392 22.8146 8.27904 23.9985 9.82999 24H14.18C14.4145 24 14.7429 23.9606 15.0843 23.8565C15.4071 23.758 15.8106 23.5806 16.1549 23.2577C16.5455 22.9439 17.086 22.2545 17.1758 21.271L17.4914 17.8176C19.036 16.3591 20 14.2921 20 12C20 9.7079 19.036 7.64093 17.4914 6.18239L17.1758 2.729C17.086 1.74552 16.5455 1.05606 16.1549 0.742309C15.8106 0.419433 15.4071 0.241973 15.0843 0.143508C14.7429 0.03936 14.4145 -2.086e-06 14.18 0ZM15.3507 4.73337L15.1841 2.91101C15.1678 2.73272 15.1076 2.58488 15.0381 2.47143C14.9797 2.37626 14.9266 2.32408 14.913 2.31074C14.9088 2.30665 14.9084 2.30621 14.9127 2.30934L14.8488 2.26296L14.7929 2.20709C14.748 2.16222 14.6531 2.10298 14.5007 2.05647C14.3504 2.01063 14.2188 2 14.18 2H9.83061C9.3137 2.00065 8.88246 2.39516 8.83593 2.91L8.67018 4.72378C9.68402 4.25906 10.8118 4 12 4C13.1964 4 14.3315 4.26263 15.3507 4.73337ZM8.83593 21.09L8.67018 19.2762C9.68402 19.7409 10.8118 20 12 20C13.1964 20 14.3315 19.7374 15.3507 19.2666L15.1841 21.089C15.1678 21.2673 15.1076 21.4151 15.0381 21.5286C14.9797 21.6237 14.9266 21.6759 14.913 21.6893C14.9089 21.6933 14.9084 21.6938 14.9126 21.6907L14.8488 21.737L14.7929 21.7929C14.748 21.8378 14.6531 21.897 14.5007 21.9435C14.3504 21.9894 14.2188 22 14.18 22H9.83061C9.3137 21.9993 8.88246 21.6048 8.83593 21.09ZM6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
         fill-rule="evenodd"
       />
     </g>
@@ -37,7 +37,7 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/WifiIcon/WifiIcon.native.test.tsx b/packages/blade/src/components/Icons/WifiIcon/WifiIcon.native.test.tsx
index 13a26a1ae6d..d68214f17f4 100644
--- a/packages/blade/src/components/Icons/WifiIcon/WifiIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/WifiIcon/WifiIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<WifiIcon />', () => {
   it('should render WifiIcon', () => {
     const renderTree = renderWithTheme(
-      <WifiIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <WifiIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/WifiIcon/WifiIcon.web.test.tsx b/packages/blade/src/components/Icons/WifiIcon/WifiIcon.web.test.tsx
index acbd5271280..aa5fd2aef01 100644
--- a/packages/blade/src/components/Icons/WifiIcon/WifiIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/WifiIcon/WifiIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<WifiIcon />', () => {
   it('should render WifiIcon', () => {
     const { container } = renderWithTheme(
-      <WifiIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <WifiIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.native.test.tsx.snap
index 8d77016dd91..d521f9d6b29 100644
--- a/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
       >
         <RNSVGPath
           d="M1.66126 10.7475C7.32983 5.75083 15.8302 5.75083 21.4988 10.7475C21.9131 11.1127 22.545 11.0729 22.9102 10.6586C23.2754 10.2443 23.2356 9.61238 22.8213 9.24718C16.3969 3.58427 6.76314 3.58427 0.338762 9.24718C-0.0755428 9.61238 -0.115352 10.2443 0.249847 10.6586C0.615045 11.0729 1.24696 11.1127 1.66126 10.7475Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
         />
         <RNSVGPath
           d="M5.2201 14.3158C8.92791 11.2274 14.3123 11.2274 18.0201 14.3158C18.4445 14.6692 19.075 14.6117 19.4285 14.1874C19.7819 13.763 19.7245 13.1325 19.3001 12.779C14.8507 9.07301 8.38948 9.07301 3.9401 12.779C3.51574 13.1325 3.45827 13.763 3.81173 14.1874C4.16519 14.6117 4.79574 14.6692 5.2201 14.3158Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -72,7 +72,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
         />
         <RNSVGPath
           d="M14.4809 17.9225C12.7469 16.6905 10.4233 16.6905 8.68923 17.9225C8.239 18.2424 7.61472 18.1367 7.29486 17.6864C6.97499 17.2362 7.08067 16.6119 7.5309 16.2921C9.95853 14.5674 13.2116 14.5674 15.6392 16.2921C16.0895 16.6119 16.1951 17.2362 15.8753 17.6864C15.5554 18.1367 14.9311 18.2424 14.4809 17.9225Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -81,7 +81,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
         />
         <RNSVGPath
           d="M12 22C12.5523 22 13 21.5523 13 21C13 20.4477 12.5523 20 12 20C11.4477 20 11 20.4477 11 21C11 21.5523 11.4477 22 12 22Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -94,7 +94,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
           name="clip0_59_173"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.web.test.tsx.snap
index 94ba274f3c5..3c66fcc441e 100644
--- a/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.web.test.tsx.snap
@@ -18,22 +18,22 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
       <path
         d="M1.66126 10.7475C7.32983 5.75083 15.8302 5.75083 21.4988 10.7475C21.9131 11.1127 22.545 11.0729 22.9102 10.6586C23.2754 10.2443 23.2356 9.61238 22.8213 9.24718C16.3969 3.58427 6.76314 3.58427 0.338762 9.24718C-0.0755428 9.61238 -0.115352 10.2443 0.249847 10.6586C0.615045 11.0729 1.24696 11.1127 1.66126 10.7475Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M5.2201 14.3158C8.92791 11.2274 14.3123 11.2274 18.0201 14.3158C18.4445 14.6692 19.075 14.6117 19.4285 14.1874C19.7819 13.763 19.7245 13.1325 19.3001 12.779C14.8507 9.07301 8.38948 9.07301 3.9401 12.779C3.51574 13.1325 3.45827 13.763 3.81173 14.1874C4.16519 14.6117 4.79574 14.6692 5.2201 14.3158Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M14.4809 17.9225C12.7469 16.6905 10.4233 16.6905 8.68923 17.9225C8.239 18.2424 7.61472 18.1367 7.29486 17.6864C6.97499 17.2362 7.08067 16.6119 7.5309 16.2921C9.95853 14.5674 13.2116 14.5674 15.6392 16.2921C16.0895 16.6119 16.1951 17.2362 15.8753 17.6864C15.5554 18.1367 14.9311 18.2424 14.4809 17.9225Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M12 22C12.5523 22 13 21.5523 13 21C13 20.4477 12.5523 20 12 20C11.4477 20 11 20.4477 11 21C11 21.5523 11.4477 22 12 22Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -45,7 +45,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/WifiOffIcon/WifiOffIcon.native.test.tsx b/packages/blade/src/components/Icons/WifiOffIcon/WifiOffIcon.native.test.tsx
index b86dc308513..beb5706d075 100644
--- a/packages/blade/src/components/Icons/WifiOffIcon/WifiOffIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/WifiOffIcon/WifiOffIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<WifiOffIcon />', () => {
   it('should render WifiOffIcon', () => {
     const renderTree = renderWithTheme(
-      <WifiOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <WifiOffIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/WifiOffIcon/WifiOffIcon.web.test.tsx b/packages/blade/src/components/Icons/WifiOffIcon/WifiOffIcon.web.test.tsx
index 343f0bc4f8e..4ddafe7ee33 100644
--- a/packages/blade/src/components/Icons/WifiOffIcon/WifiOffIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/WifiOffIcon/WifiOffIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<WifiOffIcon />', () => {
   it('should render WifiOffIcon', () => {
     const { container } = renderWithTheme(
-      <WifiOffIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <WifiOffIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.native.test.tsx.snap
index 20c15ca43d1..5e70b4ee213 100644
--- a/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.native.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
       >
         <RNSVGPath
           d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.81081 5.3966C6.82218 5.40743 6.8333 5.41856 6.84418 5.42997L10.7878 9.37359C10.8507 9.42296 10.9077 9.47987 10.9575 9.54326L23.7071 22.2929C24.0976 22.6834 24.0976 23.3166 23.7071 23.7071C23.3166 24.0976 22.6834 24.0976 22.2929 23.7071L15.6763 17.0905C15.4156 17.1427 15.1347 17.0913 14.9008 16.9252C13.1668 15.6932 10.8432 15.6932 9.10915 16.9252C8.65893 17.245 8.03464 17.1394 7.71478 16.6891C7.39491 16.2389 7.50059 15.6146 7.95082 15.2948C9.33815 14.3091 10.9951 13.8868 12.6134 14.0277L9.83187 11.2461C8.29273 11.593 6.85566 12.3019 5.64146 13.3171C5.21776 13.6714 4.5871 13.6151 4.23285 13.1914C3.87859 12.7677 3.93489 12.137 4.35859 11.7828C5.50171 10.827 6.80929 10.0972 8.21145 9.62566L5.88764 7.30186C4.50326 7.91882 3.21984 8.74381 2.08234 9.74927C1.66854 10.115 1.03657 10.0761 0.670802 9.6623C0.305033 9.2485 0.343971 8.61653 0.757772 8.25076C1.85745 7.27873 3.07738 6.45542 4.38598 5.80019L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -63,7 +63,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
         />
         <RNSVGPath
           d="M13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -72,7 +72,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
         />
         <RNSVGPath
           d="M17.1585 10.1614C16.6622 9.91913 16.0635 10.1251 15.8213 10.6214C15.579 11.1178 15.785 11.7165 16.2814 11.9587C17.0256 12.3219 17.7215 12.7767 18.353 13.3125C18.7741 13.6699 19.4051 13.6182 19.7624 13.197C20.1198 12.7759 20.0681 12.1449 19.647 11.7876C18.8885 11.1439 18.0525 10.5976 17.1585 10.1614Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -81,7 +81,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
         />
         <RNSVGPath
           d="M10.7903 6.0468C14.8485 5.71979 18.8654 7.05648 21.9185 9.74992C22.3326 10.1153 22.9645 10.0757 23.3299 9.66158C23.6953 9.24743 23.6557 8.6155 23.2416 8.25013C19.7814 5.19756 15.229 3.68266 10.6297 4.05326C10.0792 4.09762 9.66889 4.57984 9.71324 5.13034C9.7576 5.68085 10.2398 6.09115 10.7903 6.0468Z"
-          fill={4282603381}
+          fill={4280563015}
           propList={
             [
               "fill",
@@ -94,7 +94,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
           name="clip0_59_168"
         >
           <RNSVGRect
-            fill={4282603381}
+            fill={4280563015}
             height="24"
             propList={
               [
diff --git a/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.web.test.tsx.snap
index c6d84e8299a..9465daadea1 100644
--- a/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.web.test.tsx.snap
@@ -18,22 +18,22 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
       <path
         d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.81081 5.3966C6.82218 5.40743 6.8333 5.41856 6.84418 5.42997L10.7878 9.37359C10.8507 9.42296 10.9077 9.47987 10.9575 9.54326L23.7071 22.2929C24.0976 22.6834 24.0976 23.3166 23.7071 23.7071C23.3166 24.0976 22.6834 24.0976 22.2929 23.7071L15.6763 17.0905C15.4156 17.1427 15.1347 17.0913 14.9008 16.9252C13.1668 15.6932 10.8432 15.6932 9.10915 16.9252C8.65893 17.245 8.03464 17.1394 7.71478 16.6891C7.39491 16.2389 7.50059 15.6146 7.95082 15.2948C9.33815 14.3091 10.9951 13.8868 12.6134 14.0277L9.83187 11.2461C8.29273 11.593 6.85566 12.3019 5.64146 13.3171C5.21776 13.6714 4.5871 13.6151 4.23285 13.1914C3.87859 12.7677 3.93489 12.137 4.35859 11.7828C5.50171 10.827 6.80929 10.0972 8.21145 9.62566L5.88764 7.30186C4.50326 7.91882 3.21984 8.74381 2.08234 9.74927C1.66854 10.115 1.03657 10.0761 0.670802 9.6623C0.305033 9.2485 0.343971 8.61653 0.757772 8.25076C1.85745 7.27873 3.07738 6.45542 4.38598 5.80019L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M17.1585 10.1614C16.6622 9.91913 16.0635 10.1251 15.8213 10.6214C15.579 11.1178 15.785 11.7165 16.2814 11.9587C17.0256 12.3219 17.7215 12.7767 18.353 13.3125C18.7741 13.6699 19.4051 13.6182 19.7624 13.197C20.1198 12.7759 20.0681 12.1449 19.647 11.7876C18.8885 11.1439 18.0525 10.5976 17.1585 10.1614Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
       <path
         d="M10.7903 6.0468C14.8485 5.71979 18.8654 7.05648 21.9185 9.74992C22.3326 10.1153 22.9645 10.0757 23.3299 9.66158C23.6953 9.24743 23.6557 8.6155 23.2416 8.25013C19.7814 5.19756 15.229 3.68266 10.6297 4.05326C10.0792 4.09762 9.66889 4.57984 9.71324 5.13034C9.7576 5.68085 10.2398 6.09115 10.7903 6.0468Z"
         data-blade-component="svg-path"
-        fill="hsla(216, 27%, 36%, 1)"
+        fill="hsla(211, 33%, 21%, 1)"
       />
     </g>
     <defs
@@ -45,7 +45,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
       >
         <rect
           data-blade-component="svg-rect"
-          fill="hsla(216, 27%, 36%, 1)"
+          fill="hsla(211, 33%, 21%, 1)"
           height="24"
           width="24"
         />
diff --git a/packages/blade/src/components/Icons/WindIcon/WindIcon.native.test.tsx b/packages/blade/src/components/Icons/WindIcon/WindIcon.native.test.tsx
index dbc40905bef..5c2dc3eff52 100644
--- a/packages/blade/src/components/Icons/WindIcon/WindIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/WindIcon/WindIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<WindIcon />', () => {
   it('should render WindIcon', () => {
     const renderTree = renderWithTheme(
-      <WindIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <WindIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/WindIcon/WindIcon.web.test.tsx b/packages/blade/src/components/Icons/WindIcon/WindIcon.web.test.tsx
index 5d87592b38f..34d1b4ac9bc 100644
--- a/packages/blade/src/components/Icons/WindIcon/WindIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/WindIcon/WindIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<WindIcon />', () => {
   it('should render WindIcon', () => {
     const { container } = renderWithTheme(
-      <WindIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <WindIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.native.test.tsx.snap
index a23775c2dfc..d0dbb443ead 100644
--- a/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<WindIcon /> should render WindIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11.5079 5.13376C11.115 4.90724 10.6189 4.97345 10.2992 5.29506C9.90983 5.68674 9.27667 5.68862 8.88499 5.29925C8.49331 4.90989 8.49144 4.27673 8.8808 3.88505C9.83995 2.9202 11.3283 2.72157 12.5069 3.40113C13.6855 4.0807 14.2593 5.4683 13.9048 6.78178C13.5505 8.09454 12.3576 9.00476 10.998 9.00005C10.9973 9.00005 10.9965 9.00005 10.9958 9.00005L11 8.00005V9.00005H10.998H2C1.44772 9.00005 1 8.55234 1 8.00005C1 7.44777 1.44772 7.00005 2 7.00005H11.0042C11.4577 7.00196 11.8557 6.69847 11.9739 6.26064C12.092 5.82281 11.9008 5.36028 11.5079 5.13376ZM20.2458 8.20121C19.6585 7.86189 18.9165 7.95901 18.4362 8.43806C18.0452 8.82809 17.412 8.82728 17.022 8.43627C16.632 8.04525 16.6328 7.41208 17.0238 7.02205C18.1444 5.90427 19.8757 5.67767 21.2463 6.4694C22.6168 7.26114 23.2854 8.87414 22.877 10.4033C22.4685 11.9325 21.0846 12.9972 19.5018 13.0001L19.5 13.0001H2C1.44772 13.0001 1 12.5523 1 12.0001C1 11.4478 1.44772 11.0001 2 11.0001H19.4989C20.177 10.9985 20.7697 10.5423 20.9447 9.88717C21.1198 9.23181 20.8332 8.54052 20.2458 8.20121ZM13.998 15.0001C15.3576 14.9954 16.5505 15.9056 16.9048 17.2183C17.2593 18.5318 16.6855 19.9194 15.5069 20.599C14.3283 21.2785 12.84 21.0799 11.8808 20.1151C11.4914 19.7234 11.4933 19.0902 11.885 18.7009C12.2767 18.3115 12.9098 18.3134 13.2992 18.705C13.6189 19.0267 14.115 19.0929 14.5079 18.8664C14.9008 18.6398 15.092 18.1773 14.9739 17.7395C14.8557 17.3016 14.4577 16.9981 14.0042 17L14 17.0001H2C1.44772 17.0001 1 16.5523 1 16.0001C1 15.4478 1.44772 15.0001 2 15.0001H13.998Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.web.test.tsx.snap
index d00f92d918e..02147ed36ba 100644
--- a/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<WindIcon /> should render WindIcon 1`] = `
       clip-rule="evenodd"
       d="M11.5079 5.13376C11.115 4.90724 10.6189 4.97345 10.2992 5.29506C9.90983 5.68674 9.27667 5.68862 8.88499 5.29925C8.49331 4.90989 8.49144 4.27673 8.8808 3.88505C9.83995 2.9202 11.3283 2.72157 12.5069 3.40113C13.6855 4.0807 14.2593 5.4683 13.9048 6.78178C13.5505 8.09454 12.3576 9.00476 10.998 9.00005C10.9973 9.00005 10.9965 9.00005 10.9958 9.00005L11 8.00005V9.00005H10.998H2C1.44772 9.00005 1 8.55234 1 8.00005C1 7.44777 1.44772 7.00005 2 7.00005H11.0042C11.4577 7.00196 11.8557 6.69847 11.9739 6.26064C12.092 5.82281 11.9008 5.36028 11.5079 5.13376ZM20.2458 8.20121C19.6585 7.86189 18.9165 7.95901 18.4362 8.43806C18.0452 8.82809 17.412 8.82728 17.022 8.43627C16.632 8.04525 16.6328 7.41208 17.0238 7.02205C18.1444 5.90427 19.8757 5.67767 21.2463 6.4694C22.6168 7.26114 23.2854 8.87414 22.877 10.4033C22.4685 11.9325 21.0846 12.9972 19.5018 13.0001L19.5 13.0001H2C1.44772 13.0001 1 12.5523 1 12.0001C1 11.4478 1.44772 11.0001 2 11.0001H19.4989C20.177 10.9985 20.7697 10.5423 20.9447 9.88717C21.1198 9.23181 20.8332 8.54052 20.2458 8.20121ZM13.998 15.0001C15.3576 14.9954 16.5505 15.9056 16.9048 17.2183C17.2593 18.5318 16.6855 19.9194 15.5069 20.599C14.3283 21.2785 12.84 21.0799 11.8808 20.1151C11.4914 19.7234 11.4933 19.0902 11.885 18.7009C12.2767 18.3115 12.9098 18.3134 13.2992 18.705C13.6189 19.0267 14.115 19.0929 14.5079 18.8664C14.9008 18.6398 15.092 18.1773 14.9739 17.7395C14.8557 17.3016 14.4577 16.9981 14.0042 17L14 17.0001H2C1.44772 17.0001 1 16.5523 1 16.0001C1 15.4478 1.44772 15.0001 2 15.0001H13.998Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/XCircleIcon/XCircleIcon.native.test.tsx b/packages/blade/src/components/Icons/XCircleIcon/XCircleIcon.native.test.tsx
index 43927ccf1b5..8c4aacb934a 100644
--- a/packages/blade/src/components/Icons/XCircleIcon/XCircleIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/XCircleIcon/XCircleIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<XCircleIcon />', () => {
   it('should render XCircleIcon', () => {
     const renderTree = renderWithTheme(
-      <XCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <XCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/XCircleIcon/XCircleIcon.web.test.tsx b/packages/blade/src/components/Icons/XCircleIcon/XCircleIcon.web.test.tsx
index c9947e24d96..24a6a891a20 100644
--- a/packages/blade/src/components/Icons/XCircleIcon/XCircleIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/XCircleIcon/XCircleIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<XCircleIcon />', () => {
   it('should render XCircleIcon', () => {
     const { container } = renderWithTheme(
-      <XCircleIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <XCircleIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.native.test.tsx.snap
index 250abd0b184..f81af6e5ca4 100644
--- a/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<XCircleIcon /> should render XCircleIcon 1`] = `
     >
       <RNSVGPath
         d="M15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<XCircleIcon /> should render XCircleIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.web.test.tsx.snap
index 25bbb48e181..39798409d21 100644
--- a/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<XCircleIcon /> should render XCircleIcon 1`] = `
     <path
       d="M15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/XSquareIcon/XSquareIcon.native.test.tsx b/packages/blade/src/components/Icons/XSquareIcon/XSquareIcon.native.test.tsx
index 26dc01bfe27..215dd46acea 100644
--- a/packages/blade/src/components/Icons/XSquareIcon/XSquareIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/XSquareIcon/XSquareIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<XSquareIcon />', () => {
   it('should render XSquareIcon', () => {
     const renderTree = renderWithTheme(
-      <XSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <XSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/XSquareIcon/XSquareIcon.web.test.tsx b/packages/blade/src/components/Icons/XSquareIcon/XSquareIcon.web.test.tsx
index 720251cb224..bd180a081d7 100644
--- a/packages/blade/src/components/Icons/XSquareIcon/XSquareIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/XSquareIcon/XSquareIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<XSquareIcon />', () => {
   it('should render XSquareIcon', () => {
     const { container } = renderWithTheme(
-      <XSquareIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <XSquareIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.native.test.tsx.snap
index 7346a6e5178..486110e59fc 100644
--- a/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<XSquareIcon /> should render XSquareIcon 1`] = `
     >
       <RNSVGPath
         d="M8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<XSquareIcon /> should render XSquareIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.web.test.tsx.snap
index 35a19ae978b..41bad4fbbda 100644
--- a/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<XSquareIcon /> should render XSquareIcon 1`] = `
     <path
       d="M8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ZapIcon/ZapIcon.native.test.tsx b/packages/blade/src/components/Icons/ZapIcon/ZapIcon.native.test.tsx
index fb4fb1946e4..2b710eb1992 100644
--- a/packages/blade/src/components/Icons/ZapIcon/ZapIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ZapIcon/ZapIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ZapIcon />', () => {
   it('should render ZapIcon', () => {
     const renderTree = renderWithTheme(
-      <ZapIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ZapIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ZapIcon/ZapIcon.web.test.tsx b/packages/blade/src/components/Icons/ZapIcon/ZapIcon.web.test.tsx
index e0f69c13dc3..c455e9785fd 100644
--- a/packages/blade/src/components/Icons/ZapIcon/ZapIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ZapIcon/ZapIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ZapIcon />', () => {
   it('should render ZapIcon', () => {
     const { container } = renderWithTheme(
-      <ZapIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ZapIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.native.test.tsx.snap
index 0a919c72105..52043faf1b0 100644
--- a/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.native.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`<ZapIcon /> should render ZapIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M13.3982 1.08275C13.8054 1.25952 14.0474 1.68359 13.9923 2.12409L13.1328 9.00006H21C21.388 9.00006 21.741 9.22452 21.9056 9.5759C22.0702 9.92729 22.0166 10.3422 21.7682 10.6402L11.7682 22.6402C11.484 22.9813 11.009 23.0941 10.6018 22.9174C10.1946 22.7406 9.95267 22.3165 10.0077 21.876L10.8672 15.0001H3.00001C2.61199 15.0001 2.259 14.7756 2.09442 14.4242C1.92984 14.0728 1.98339 13.658 2.23179 13.3599L12.2318 1.35987C12.516 1.01884 12.991 0.905986 13.3982 1.08275ZM5.13505 13.0001H12C12.2868 13.0001 12.5599 13.1232 12.7497 13.3383C12.9395 13.5533 13.0279 13.8395 12.9923 14.1241L12.4154 18.7396L18.865 11.0001H12C11.7132 11.0001 11.4402 10.8769 11.2503 10.6619C11.0605 10.4468 10.9722 10.1606 11.0077 9.87602L11.5847 5.26051L5.13505 13.0001Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.web.test.tsx.snap
index 9840afeefa1..69c8d605547 100644
--- a/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.web.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<ZapIcon /> should render ZapIcon 1`] = `
       clip-rule="evenodd"
       d="M13.3982 1.08275C13.8054 1.25952 14.0474 1.68359 13.9923 2.12409L13.1328 9.00006H21C21.388 9.00006 21.741 9.22452 21.9056 9.5759C22.0702 9.92729 22.0166 10.3422 21.7682 10.6402L11.7682 22.6402C11.484 22.9813 11.009 23.0941 10.6018 22.9174C10.1946 22.7406 9.95267 22.3165 10.0077 21.876L10.8672 15.0001H3.00001C2.61199 15.0001 2.259 14.7756 2.09442 14.4242C1.92984 14.0728 1.98339 13.658 2.23179 13.3599L12.2318 1.35987C12.516 1.01884 12.991 0.905986 13.3982 1.08275ZM5.13505 13.0001H12C12.2868 13.0001 12.5599 13.1232 12.7497 13.3383C12.9395 13.5533 13.0279 13.8395 12.9923 14.1241L12.4154 18.7396L18.865 11.0001H12C11.7132 11.0001 11.4402 10.8769 11.2503 10.6619C11.0605 10.4468 10.9722 10.1606 11.0077 9.87602L11.5847 5.26051L5.13505 13.0001Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ZoomInIcon/ZoomInIcon.native.test.tsx b/packages/blade/src/components/Icons/ZoomInIcon/ZoomInIcon.native.test.tsx
index 4d3e2b28407..87191e9b641 100644
--- a/packages/blade/src/components/Icons/ZoomInIcon/ZoomInIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ZoomInIcon/ZoomInIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ZoomInIcon />', () => {
   it('should render ZoomInIcon', () => {
     const renderTree = renderWithTheme(
-      <ZoomInIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ZoomInIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ZoomInIcon/ZoomInIcon.web.test.tsx b/packages/blade/src/components/Icons/ZoomInIcon/ZoomInIcon.web.test.tsx
index 32c3cb5f208..72b094b4621 100644
--- a/packages/blade/src/components/Icons/ZoomInIcon/ZoomInIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ZoomInIcon/ZoomInIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ZoomInIcon />', () => {
   it('should render ZoomInIcon', () => {
     const { container } = renderWithTheme(
-      <ZoomInIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ZoomInIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.native.test.tsx.snap
index 1b2529713c2..3e6abe13411 100644
--- a/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ZoomInIcon /> should render ZoomInIcon 1`] = `
     >
       <RNSVGPath
         d="M11 7C11.5523 7 12 7.44772 12 8V10H14C14.5523 10 15 10.4477 15 11C15 11.5523 14.5523 12 14 12H12V14C12 14.5523 11.5523 15 11 15C10.4477 15 10 14.5523 10 14V12H8C7.44772 12 7 11.5523 7 11C7 10.4477 7.44772 10 8 10H10V8C10 7.44772 10.4477 7 11 7Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<ZoomInIcon /> should render ZoomInIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0977 21.3166 22.0977 21.7071 21.7071C22.0977 21.3166 22.0977 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2ZM16.0412 15.8566C17.2541 14.5978 18 12.886 18 11C18 7.13401 14.866 4 11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18C12.886 18 14.5978 17.2541 15.8566 16.0412C15.8828 16.0071 15.9116 15.9742 15.9429 15.9429C15.9742 15.9116 16.0071 15.8828 16.0412 15.8566Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.web.test.tsx.snap
index 7531b558c5f..add9d291b53 100644
--- a/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<ZoomInIcon /> should render ZoomInIcon 1`] = `
     <path
       d="M11 7C11.5523 7 12 7.44772 12 8V10H14C14.5523 10 15 10.4477 15 11C15 11.5523 14.5523 12 14 12H12V14C12 14.5523 11.5523 15 11 15C10.4477 15 10 14.5523 10 14V12H8C7.44772 12 7 11.5523 7 11C7 10.4477 7.44772 10 8 10H10V8C10 7.44772 10.4477 7 11 7Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0977 21.3166 22.0977 21.7071 21.7071C22.0977 21.3166 22.0977 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2ZM16.0412 15.8566C17.2541 14.5978 18 12.886 18 11C18 7.13401 14.866 4 11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18C12.886 18 14.5978 17.2541 15.8566 16.0412C15.8828 16.0071 15.9116 15.9742 15.9429 15.9429C15.9742 15.9116 16.0071 15.8828 16.0412 15.8566Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/ZoomOutIcon/ZoomOutIcon.native.test.tsx b/packages/blade/src/components/Icons/ZoomOutIcon/ZoomOutIcon.native.test.tsx
index a54454fbe87..492d6671aa0 100644
--- a/packages/blade/src/components/Icons/ZoomOutIcon/ZoomOutIcon.native.test.tsx
+++ b/packages/blade/src/components/Icons/ZoomOutIcon/ZoomOutIcon.native.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.native';
 describe('<ZoomOutIcon />', () => {
   it('should render ZoomOutIcon', () => {
     const renderTree = renderWithTheme(
-      <ZoomOutIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ZoomOutIcon color="feedback.icon.neutral.intense" size="large" />,
     ).toJSON();
     expect(renderTree).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ZoomOutIcon/ZoomOutIcon.web.test.tsx b/packages/blade/src/components/Icons/ZoomOutIcon/ZoomOutIcon.web.test.tsx
index cdcbf934632..7128373e93a 100644
--- a/packages/blade/src/components/Icons/ZoomOutIcon/ZoomOutIcon.web.test.tsx
+++ b/packages/blade/src/components/Icons/ZoomOutIcon/ZoomOutIcon.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 describe('<ZoomOutIcon />', () => {
   it('should render ZoomOutIcon', () => {
     const { container } = renderWithTheme(
-      <ZoomOutIcon color="feedback.icon.neutral.lowContrast" size="large" />,
+      <ZoomOutIcon color="feedback.icon.neutral.intense" size="large" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.native.test.tsx.snap
index 16302f9c69c..262200e1aa2 100644
--- a/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.native.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ZoomOutIcon /> should render ZoomOutIcon 1`] = `
     >
       <RNSVGPath
         d="M8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12H14C14.5523 12 15 11.5523 15 11C15 10.4477 14.5523 10 14 10H8Z"
-        fill={4282603381}
+        fill={4280563015}
         propList={
           [
             "fill",
@@ -61,7 +61,7 @@ exports[`<ZoomOutIcon /> should render ZoomOutIcon 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M2 11C2 6.02944 6.02944 2 11 2C15.9706 2 20 6.02944 20 11C20 13.125 19.2635 15.078 18.0319 16.6177L21.7071 20.2929C22.0977 20.6834 22.0977 21.3166 21.7071 21.7071C21.3166 22.0977 20.6834 22.0977 20.2929 21.7071L16.6177 18.0319C15.078 19.2635 13.125 20 11 20C6.02944 20 2 15.9706 2 11ZM18 11C18 12.886 17.2541 14.5978 16.0412 15.8566C16.0071 15.8828 15.9742 15.9116 15.9429 15.9429C15.9116 15.9742 15.8828 16.0071 15.8566 16.0412C14.5978 17.2541 12.886 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z"
-        fill={4282603381}
+        fill={4280563015}
         fillRule={0}
         propList={
           [
diff --git a/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.web.test.tsx.snap
index d98a1711456..62ff9935ea2 100644
--- a/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.web.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.web.test.tsx.snap
@@ -14,13 +14,13 @@ exports[`<ZoomOutIcon /> should render ZoomOutIcon 1`] = `
     <path
       d="M8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12H14C14.5523 12 15 11.5523 15 11C15 10.4477 14.5523 10 14 10H8Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
     />
     <path
       clip-rule="evenodd"
       d="M2 11C2 6.02944 6.02944 2 11 2C15.9706 2 20 6.02944 20 11C20 13.125 19.2635 15.078 18.0319 16.6177L21.7071 20.2929C22.0977 20.6834 22.0977 21.3166 21.7071 21.7071C21.3166 22.0977 20.6834 22.0977 20.2929 21.7071L16.6177 18.0319C15.078 19.2635 13.125 20 11 20C6.02944 20 2 15.9706 2 11ZM18 11C18 12.886 17.2541 14.5978 16.0412 15.8566C16.0071 15.8828 15.9742 15.9116 15.9429 15.9429C15.9116 15.9742 15.8828 16.0071 15.8566 16.0412C14.5978 17.2541 12.886 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z"
       data-blade-component="svg-path"
-      fill="hsla(216, 27%, 36%, 1)"
+      fill="hsla(211, 33%, 21%, 1)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/packages/blade/src/components/Icons/_Svg/Circle/Circle.web.tsx b/packages/blade/src/components/Icons/_Svg/Circle/Circle.web.tsx
index 9d5758f9cbb..b2a07ae0fc4 100644
--- a/packages/blade/src/components/Icons/_Svg/Circle/Circle.web.tsx
+++ b/packages/blade/src/components/Icons/_Svg/Circle/Circle.web.tsx
@@ -2,7 +2,17 @@ import type { ReactElement } from 'react';
 import type { CircleProps } from './types';
 import { metaAttribute } from '~utils/metaAttribute';
 
-const Circle = ({ cx, cy, x, y, r, fill, stroke, strokeWidth }: CircleProps): ReactElement => {
+const Circle = ({
+  cx,
+  cy,
+  x,
+  y,
+  r,
+  fill,
+  stroke,
+  strokeWidth,
+  fillOpacity,
+}: CircleProps): ReactElement => {
   return (
     <circle
       cx={cx}
@@ -13,6 +23,7 @@ const Circle = ({ cx, cy, x, y, r, fill, stroke, strokeWidth }: CircleProps): Re
       fill={fill}
       stroke={stroke}
       strokeWidth={strokeWidth}
+      fillOpacity={fillOpacity}
       {...metaAttribute({ name: 'svg-circle' })}
     />
   );
diff --git a/packages/blade/src/components/Icons/_Svg/Circle/types.ts b/packages/blade/src/components/Icons/_Svg/Circle/types.ts
index 2d18996c128..9a67103f17d 100644
--- a/packages/blade/src/components/Icons/_Svg/Circle/types.ts
+++ b/packages/blade/src/components/Icons/_Svg/Circle/types.ts
@@ -7,4 +7,5 @@ export type CircleProps = {
   cy: string;
   x?: string;
   y?: string;
+  fillOpacity?: number;
 };
diff --git a/packages/blade/src/components/Icons/_Svg/Rect/Rect.web.tsx b/packages/blade/src/components/Icons/_Svg/Rect/Rect.web.tsx
index 72ede43535f..d1cba9f0d8a 100644
--- a/packages/blade/src/components/Icons/_Svg/Rect/Rect.web.tsx
+++ b/packages/blade/src/components/Icons/_Svg/Rect/Rect.web.tsx
@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 import type { RectProps } from './types';
 import { metaAttribute } from '~utils/metaAttribute';
 
-const Rect = ({ height, width, rx, ry, x, y, fill }: RectProps): ReactElement => {
+const Rect = ({ height, width, rx, ry, x, y, fill, fillOpacity }: RectProps): ReactElement => {
   return (
     <rect
       {...metaAttribute({ name: 'svg-rect' })}
@@ -13,6 +13,7 @@ const Rect = ({ height, width, rx, ry, x, y, fill }: RectProps): ReactElement =>
       x={x}
       y={y}
       fill={fill}
+      fillOpacity={fillOpacity}
     />
   );
 };
diff --git a/packages/blade/src/components/Icons/_Svg/Rect/types.ts b/packages/blade/src/components/Icons/_Svg/Rect/types.ts
index 2c49f351ba7..46713485b3d 100644
--- a/packages/blade/src/components/Icons/_Svg/Rect/types.ts
+++ b/packages/blade/src/components/Icons/_Svg/Rect/types.ts
@@ -6,4 +6,5 @@ export type RectProps = {
   ry?: string;
   x?: string;
   y?: string;
+  fillOpacity?: number;
 };
diff --git a/packages/blade/src/components/Icons/_Svg/Svg/Svg.web.tsx b/packages/blade/src/components/Icons/_Svg/Svg/Svg.web.tsx
index 94f16f443bf..0453a34dcf0 100644
--- a/packages/blade/src/components/Icons/_Svg/Svg/Svg.web.tsx
+++ b/packages/blade/src/components/Icons/_Svg/Svg/Svg.web.tsx
@@ -20,6 +20,7 @@ const Svg = ({
   fill,
   testID,
   display,
+  fillOpacity,
   ...styledProps
 }: SvgProps): ReactElement => {
   return (
@@ -32,6 +33,7 @@ const Svg = ({
       fill={fill}
       // svg has its own display prop, which conflicts with our styled display prop
       styledDisplay={display}
+      fillOpacity={fillOpacity}
       {...styledProps}
     >
       {children}
diff --git a/packages/blade/src/components/Icons/_Svg/Svg/types.ts b/packages/blade/src/components/Icons/_Svg/Svg/types.ts
index 8c851245a87..d2941397a09 100644
--- a/packages/blade/src/components/Icons/_Svg/Svg/types.ts
+++ b/packages/blade/src/components/Icons/_Svg/Svg/types.ts
@@ -7,5 +7,6 @@ export type SvgProps = {
   height: string;
   viewBox: string;
   width: string;
+  fillOpacity?: number;
 } & TestID &
   Omit<StyledPropsBlade, 'order'>; // Order prop on SVG has different meaning so removing this prop from styledProps
diff --git a/packages/blade/src/components/Icons/index.tsx b/packages/blade/src/components/Icons/index.tsx
index cb3a266ba9c..02a1f7e5cdd 100644
--- a/packages/blade/src/components/Icons/index.tsx
+++ b/packages/blade/src/components/Icons/index.tsx
@@ -1,53 +1,21 @@
 import type { Theme } from '~components/BladeProvider';
-import type { DotNotationColorStringToken } from '~utils/types';
-import type { Feedback } from '~tokens/theme/theme';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 
-type FeedbackIconColors = `feedback.icon.${DotNotationColorStringToken<
-  Theme['colors']['feedback']['icon']
->}`;
-
-type FeedbackActionIconColors = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<
-  Theme['colors']['feedback'][Feedback]['action']['icon']
->}`;
-
-type ActionIconColors = `action.icon.${DotNotationColorStringToken<
-  Theme['colors']['action']['icon']
->}`;
-
-type TextIconColors = `surface.text.${DotNotationColorStringToken<
-  Theme['colors']['surface']['text']
->}`;
-
-type SurfaceActionIconColors = `surface.action.icon.${DotNotationColorStringToken<
-  Theme['colors']['surface']['action']['icon']
->}`;
-
-type BadgeIconColors = `badge.icon.${DotNotationColorStringToken<
-  Theme['colors']['badge']['icon']
->}`;
-
-type WhiteIconColors = `white.action.icon.${DotNotationColorStringToken<
-  Theme['colors']['white']['action']['icon']
->}`;
-
-type BrandColors = `brand.${DotNotationColorStringToken<Theme['colors']['brand']>}`;
+type InteractiveText = DotNotationToken<Theme['colors']['interactive']['icon']>;
+type FeedbackText = DotNotationToken<Theme['colors']['feedback']['icon']>;
+type SurfaceText = DotNotationToken<Theme['colors']['surface']['icon']>;
+export type IconColors =
+  | `interactive.icon.${InteractiveText}`
+  | `surface.icon.${SurfaceText}`
+  | `feedback.icon.${FeedbackText}`;
 
 export type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
 export type IconProps = {
   /**
    * Color token (not to be confused with actual hsla value)
    */
-  color?:
-    | ActionIconColors
-    | SurfaceActionIconColors
-    | FeedbackIconColors
-    | FeedbackActionIconColors
-    | TextIconColors
-    | BadgeIconColors
-    | WhiteIconColors
-    | BrandColors
-    | 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
+  color?: IconColors | 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
   size?: IconSize;
 } & StyledPropsBlade;
 export type IconComponent = React.ComponentType<IconProps>;
diff --git a/packages/blade/src/components/Icons/useIconProps/useIconProps.test.tsx b/packages/blade/src/components/Icons/useIconProps/useIconProps.test.tsx
index 9366a782be1..cef5db3ea97 100644
--- a/packages/blade/src/components/Icons/useIconProps/useIconProps.test.tsx
+++ b/packages/blade/src/components/Icons/useIconProps/useIconProps.test.tsx
@@ -5,62 +5,62 @@ import themeWrapper from '~utils/testing/themeWrapper';
 describe('useIconProps', () => {
   it('should return a xsmall icon with the correct color', () => {
     const { result } = renderHook(
-      () => useIconProps({ size: 'xsmall', color: 'action.icon.secondary.default' }),
+      () => useIconProps({ size: 'xsmall', color: 'interactive.icon.primary.normal' }),
       { wrapper: themeWrapper },
     );
     expect(result.current.height).toEqual('8px');
     expect(result.current.width).toEqual('8px');
-    expect(result.current.iconColor).toEqual('hsla(218, 89%, 51%, 1)');
+    expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(227, 71%, 51%, 1)"`);
   });
 
   it('should return a small icon with the correct color', () => {
     const { result } = renderHook(
-      () => useIconProps({ size: 'small', color: 'feedback.icon.negative.lowContrast' }),
+      () => useIconProps({ size: 'small', color: 'feedback.icon.negative.subtle' }),
       { wrapper: themeWrapper },
     );
     expect(result.current.height).toEqual('12px');
     expect(result.current.width).toEqual('12px');
-    expect(result.current.iconColor).toEqual('hsla(8, 73%, 47%, 1)');
+    expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(4, 93%, 94%, 1)"`);
   });
 
   it('should return a medium icon with the correct color', () => {
     const { result } = renderHook(
-      () => useIconProps({ size: 'medium', color: 'action.icon.primary.default' }),
+      () => useIconProps({ size: 'medium', color: 'interactive.icon.staticWhite.normal' }),
       { wrapper: themeWrapper },
     );
     expect(result.current.height).toEqual('16px');
     expect(result.current.width).toEqual('16px');
-    expect(result.current.iconColor).toEqual('hsla(0, 0%, 100%, 1)');
+    expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(0, 0%, 100%, 1)"`);
   });
 
   it('should return a large icon with the correct color', () => {
     const { result } = renderHook(
-      () => useIconProps({ size: 'large', color: 'feedback.icon.information.lowContrast' }),
+      () => useIconProps({ size: 'large', color: 'feedback.icon.information.subtle' }),
       { wrapper: themeWrapper },
     );
     expect(result.current.height).toEqual('20px');
     expect(result.current.width).toEqual('20px');
-    expect(result.current.iconColor).toEqual('hsla(193, 100%, 35%, 1)');
+    expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(200, 88%, 90%, 1)"`);
   });
 
   it('should return a xlarge icon with the correct color', () => {
     const { result } = renderHook(
-      () => useIconProps({ size: 'xlarge', color: 'feedback.icon.neutral.lowContrast' }),
+      () => useIconProps({ size: 'xlarge', color: 'feedback.icon.neutral.subtle' }),
       { wrapper: themeWrapper },
     );
     expect(result.current.height).toEqual('24px');
     expect(result.current.width).toEqual('24px');
-    expect(result.current.iconColor).toEqual('hsla(216, 27%, 36%, 1)');
+    expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(211, 24%, 65%, 1)"`);
   });
 
   it('should return a 2xlarge icon with the correct color', () => {
     const { result } = renderHook(
-      () => useIconProps({ size: '2xlarge', color: 'feedback.icon.neutral.lowContrast' }),
+      () => useIconProps({ size: '2xlarge', color: 'feedback.icon.neutral.subtle' }),
       { wrapper: themeWrapper },
     );
     expect(result.current.height).toEqual('32px');
     expect(result.current.width).toEqual('32px');
-    expect(result.current.iconColor).toEqual('hsla(216, 27%, 36%, 1)');
+    expect(result.current.iconColor).toMatchInlineSnapshot(`"hsla(211, 24%, 65%, 1)"`);
   });
 
   it('should set fill property to currentColor when color is set to currentColor', () => {
diff --git a/packages/blade/src/components/Icons/useIconProps/useIconProps.tsx b/packages/blade/src/components/Icons/useIconProps/useIconProps.tsx
index dd8d57d0647..c11edd2ebc5 100644
--- a/packages/blade/src/components/Icons/useIconProps/useIconProps.tsx
+++ b/packages/blade/src/components/Icons/useIconProps/useIconProps.tsx
@@ -15,7 +15,7 @@ const iconSize = {
 
 function useIconProps({
   size = 'medium',
-  color = 'surface.text.normal.lowContrast',
+  color = 'surface.icon.gray.normal',
 }: IconProps): {
   height: `${typeof iconSize[keyof typeof iconSize]}px`;
   width: `${typeof iconSize[keyof typeof iconSize]}px`;
diff --git a/packages/blade/src/components/Indicator/Indicator.stories.tsx b/packages/blade/src/components/Indicator/Indicator.stories.tsx
index 99b7e1f3998..4dcee875d9f 100644
--- a/packages/blade/src/components/Indicator/Indicator.stories.tsx
+++ b/packages/blade/src/components/Indicator/Indicator.stories.tsx
@@ -16,12 +16,7 @@ const Page = (): ReactElement => {
       componentName="Indicator"
       componentDescription="Indicators describe the condition of an entity. They can be used to convey semantic meaning,
     such as statuses and semantical-categories."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8224%3A1',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=8224%3A0',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8224%3A1"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
@@ -31,7 +26,7 @@ const Page = (): ReactElement => {
         function App() {
           return (
             <Box>
-              <Indicator accessibilityLabel="Success" intent="positive" />
+              <Indicator accessibilityLabel="Success" color="positive" />
             </Box>
           )
         }
@@ -104,7 +99,7 @@ export const Composition: StoryFn<typeof IndicatorComponent> = ({ ...args }) =>
 };
 Composition.args = {
   children: undefined,
-  intent: 'notice',
+  color: 'notice',
   accessibilityLabel: 'New offers',
   size: 'large',
 };
diff --git a/packages/blade/src/components/Indicator/Indicator.tsx b/packages/blade/src/components/Indicator/Indicator.tsx
index 9707071e561..a79dd1998fc 100644
--- a/packages/blade/src/components/Indicator/Indicator.tsx
+++ b/packages/blade/src/components/Indicator/Indicator.tsx
@@ -8,7 +8,7 @@ import { Text } from '~components/Typography';
 import { size as sizeToken } from '~tokens/global';
 import { getStringFromReactText } from '~src/utils/getStringChildren';
 import type { StringChildrenType, TestID } from '~utils/types';
-import type { Feedback } from '~tokens/theme/theme';
+import type { FeedbackColors } from '~tokens/theme/theme';
 import { isReactNative } from '~utils';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { getStyledProps } from '~components/Box/styledProps';
@@ -21,7 +21,7 @@ type IndicatorCommonProps = {
    *
    * @default neutral
    */
-  intent?: Feedback;
+  color?: FeedbackColors;
 
   /**
    * Size of the indicator
@@ -67,15 +67,14 @@ const Indicator = ({
   accessibilityLabel,
   children,
   size = 'medium',
-  intent = 'neutral',
+  color = 'neutral',
   testID,
   ...styledProps
 }: IndicatorProps): ReactElement => {
   const { theme } = useTheme();
   const childrenString = getStringFromReactText(children);
 
-  const fillColor = theme.colors.feedback.background[intent].highContrast;
-  const strokeColor = theme.colors.brand.gray.a100.highContrast;
+  const fillColor = theme.colors.feedback.background[color].intense;
   const getDimension = useCallback((): Dimensions => {
     switch (size) {
       case 'small':
@@ -109,10 +108,14 @@ const Indicator = ({
           fill="none"
         >
           <Circle cx="5" cy="5" r="5" fill={fillColor} />
-          <Circle cx="5" cy="5" r="4.75" stroke={strokeColor} strokeWidth="0.5" />
         </Svg>
         <BaseBox marginLeft="spacing.2">
-          <Text textAlign="left" contrast="low" type="subtle" size={dimensions.textSize}>
+          <Text
+            weight="medium"
+            color="surface.text.gray.subtle"
+            textAlign="left"
+            size={dimensions.textSize}
+          >
             {children}
           </Text>
         </BaseBox>
diff --git a/packages/blade/src/components/Indicator/__tests__/Indicator.native.test.tsx b/packages/blade/src/components/Indicator/__tests__/Indicator.native.test.tsx
index 617c95fb904..f7d8c522ccb 100644
--- a/packages/blade/src/components/Indicator/__tests__/Indicator.native.test.tsx
+++ b/packages/blade/src/components/Indicator/__tests__/Indicator.native.test.tsx
@@ -8,13 +8,13 @@ describe('<Indicator />', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render different variants for size and intent', () => {
+  it('should render different variants for size and color', () => {
     const { toJSON } = renderWithTheme(
       <>
-        <Indicator accessibilityLabel="Warning" size="small" intent="notice" />
-        <Indicator accessibilityLabel="Success" size="medium" intent="positive" />
-        <Indicator accessibilityLabel="Error" size="large" intent="negative" />
-        <Indicator accessibilityLabel="Info" intent="information" />
+        <Indicator accessibilityLabel="Warning" size="small" color="notice" />
+        <Indicator accessibilityLabel="Success" size="medium" color="positive" />
+        <Indicator accessibilityLabel="Error" size="large" color="negative" />
+        <Indicator accessibilityLabel="Info" color="information" />
       </>,
     );
 
diff --git a/packages/blade/src/components/Indicator/__tests__/Indicator.web.test.tsx b/packages/blade/src/components/Indicator/__tests__/Indicator.web.test.tsx
index 77495c230a1..aa1f71bb5ef 100644
--- a/packages/blade/src/components/Indicator/__tests__/Indicator.web.test.tsx
+++ b/packages/blade/src/components/Indicator/__tests__/Indicator.web.test.tsx
@@ -9,13 +9,13 @@ describe('<Indicator />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should render different variants for size and intent', () => {
+  it('should render different variants for size and color', () => {
     const { container } = renderWithTheme(
       <>
-        <Indicator accessibilityLabel="Warning" size="small" intent="notice" />
-        <Indicator accessibilityLabel="Success" size="medium" intent="positive" />
-        <Indicator accessibilityLabel="Error" size="large" intent="negative" />
-        <Indicator accessibilityLabel="Info" intent="information" />
+        <Indicator accessibilityLabel="Warning" size="small" color="notice" />
+        <Indicator accessibilityLabel="Success" size="medium" color="positive" />
+        <Indicator accessibilityLabel="Error" size="large" color="negative" />
+        <Indicator accessibilityLabel="Info" color="information" />
       </>,
     );
 
diff --git a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.native.test.tsx.snap b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.native.test.tsx.snap
index eb4bb300715..82ee6db4777 100644
--- a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.native.test.tsx.snap
+++ b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.native.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`<Indicator /> should render 1`] = `
           <RNSVGCircle
             cx="5"
             cy="5"
-            fill={4281484642}
+            fill={4281287254}
             propList={
               [
                 "fill",
@@ -88,19 +88,6 @@ exports[`<Indicator /> should render 1`] = `
             }
             r="5"
           />
-          <RNSVGCircle
-            cx="5"
-            cy="5"
-            propList={
-              [
-                "stroke",
-                "strokeWidth",
-              ]
-            }
-            r="4.75"
-            stroke={787279859}
-            strokeWidth="0.5"
-          />
         </RNSVGGroup>
       </RNSVGSvgView>
       <View
@@ -115,21 +102,22 @@ exports[`<Indicator /> should render 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.subtle.lowContrast"
+          color="surface.text.gray.subtle"
           data-blade-component="text"
           fontFamily="text"
           fontSize={100}
           fontStyle="normal"
-          fontWeight="regular"
+          fontWeight="medium"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "500",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -152,7 +140,7 @@ exports[`<Indicator /> should render 1`] = `
 </View>
 `;
 
-exports[`<Indicator /> should render different variants for size and intent 1`] = `
+exports[`<Indicator /> should render different variants for size and color 1`] = `
 <View
   style={
     {
@@ -232,7 +220,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           <RNSVGCircle
             cx="5"
             cy="5"
-            fill={4290738691}
+            fill={4293486604}
             propList={
               [
                 "fill",
@@ -240,19 +228,6 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             }
             r="5"
           />
-          <RNSVGCircle
-            cx="5"
-            cy="5"
-            propList={
-              [
-                "stroke",
-                "strokeWidth",
-              ]
-            }
-            r="4.75"
-            stroke={787279859}
-            strokeWidth="0.5"
-          />
         </RNSVGGroup>
       </RNSVGSvgView>
       <View
@@ -267,22 +242,23 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       >
         <Text
           accessible={true}
-          color="surface.text.subtle.lowContrast"
+          color="surface.text.gray.subtle"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
+          fontWeight="medium"
+          lineHeight={75}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
+                "fontWeight": "500",
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -373,7 +349,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           <RNSVGCircle
             cx="5"
             cy="5"
-            fill={4278224216}
+            fill={4278231890}
             propList={
               [
                 "fill",
@@ -381,19 +357,6 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             }
             r="5"
           />
-          <RNSVGCircle
-            cx="5"
-            cy="5"
-            propList={
-              [
-                "stroke",
-                "strokeWidth",
-              ]
-            }
-            r="4.75"
-            stroke={787279859}
-            strokeWidth="0.5"
-          />
         </RNSVGGroup>
       </RNSVGSvgView>
       <View
@@ -408,21 +371,22 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       >
         <Text
           accessible={true}
-          color="surface.text.subtle.lowContrast"
+          color="surface.text.gray.subtle"
           data-blade-component="text"
           fontFamily="text"
           fontSize={100}
           fontStyle="normal"
-          fontWeight="regular"
+          fontWeight="medium"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "500",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -514,7 +478,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           <RNSVGCircle
             cx="5"
             cy="5"
-            fill={4291770400}
+            fill={4292422944}
             propList={
               [
                 "fill",
@@ -522,19 +486,6 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             }
             r="5"
           />
-          <RNSVGCircle
-            cx="5"
-            cy="5"
-            propList={
-              [
-                "stroke",
-                "strokeWidth",
-              ]
-            }
-            r="4.75"
-            stroke={787279859}
-            strokeWidth="0.5"
-          />
         </RNSVGGroup>
       </RNSVGSvgView>
       <View
@@ -549,21 +500,22 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       >
         <Text
           accessible={true}
-          color="surface.text.subtle.lowContrast"
+          color="surface.text.gray.subtle"
           data-blade-component="text"
           fontFamily="text"
           fontSize={100}
           fontStyle="normal"
-          fontWeight="regular"
+          fontWeight="medium"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "500",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
@@ -655,7 +607,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           <RNSVGCircle
             cx="5"
             cy="5"
-            fill={4278226099}
+            fill={4279406798}
             propList={
               [
                 "fill",
@@ -663,19 +615,6 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             }
             r="5"
           />
-          <RNSVGCircle
-            cx="5"
-            cy="5"
-            propList={
-              [
-                "stroke",
-                "strokeWidth",
-              ]
-            }
-            r="4.75"
-            stroke={787279859}
-            strokeWidth="0.5"
-          />
         </RNSVGGroup>
       </RNSVGSvgView>
       <View
@@ -690,21 +629,22 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       >
         <Text
           accessible={true}
-          color="surface.text.subtle.lowContrast"
+          color="surface.text.gray.subtle"
           data-blade-component="text"
           fontFamily="text"
           fontSize={100}
           fontStyle="normal"
-          fontWeight="regular"
+          fontWeight="medium"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "500",
+                "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
                 "marginLeft": 0,
diff --git a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.ssr.test.tsx.snap b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.ssr.test.tsx.snap
index 982ee9b7319..0889130530a 100644
--- a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Indicator /> should have role and a11y label when text label is passed 1`] = `"<div id="root"><div aria-label="Active" role="status" data-blade-component="indicator" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="8" viewBox="0 0 10 10" width="8" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><circle cx="5" cy="5" r="5" fill="hsla(216, 33%, 29%, 1)" data-blade-component="svg-circle"></circle><circle cx="5" cy="5" r="4.75" stroke="hsla(214, 21%, 94%, 0.18)" stroke-width="0.5" data-blade-component="svg-circle"></circle></svg><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"><p class="StyledBaseText-dVBfTO fgMpRE" data-blade-component="text">Active</p></div></div></div></div>"`;
+exports[`<Indicator /> should have role and a11y label when text label is passed 1`] = `"<div id="root"><div aria-label="Active" role="status" data-blade-component="indicator" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="8" viewBox="0 0 10 10" width="8" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><circle cx="5" cy="5" r="5" fill="hsla(211, 29%, 26%, 1)" data-blade-component="svg-circle"></circle></svg><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"><p class="StyledBaseText-dVBfTO fbLNTy" data-blade-component="text">Active</p></div></div></div></div>"`;
 
 exports[`<Indicator /> should have role and a11y label when text label is passed 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -29,14 +29,18 @@ exports[`<Indicator /> should have role and a11y label when text label is passed
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -68,17 +72,9 @@ exports[`<Indicator /> should have role and a11y label when text label is passed
           cx="5"
           cy="5"
           data-blade-component="svg-circle"
-          fill="hsla(216, 33%, 29%, 1)"
+          fill="hsla(211, 29%, 26%, 1)"
           r="5"
         />
-        <circle
-          cx="5"
-          cy="5"
-          data-blade-component="svg-circle"
-          r="4.75"
-          stroke="hsla(214, 21%, 94%, 0.18)"
-          stroke-width="0.5"
-        />
       </svg>
       <div
         class="c2"
diff --git a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.web.test.tsx.snap b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.web.test.tsx.snap
index 2d08d524ab3..4ae21e0a6a7 100644
--- a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.web.test.tsx.snap
+++ b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.web.test.tsx.snap
@@ -27,14 +27,18 @@ exports[`<Indicator /> should render 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -64,17 +68,9 @@ exports[`<Indicator /> should render 1`] = `
           cx="5"
           cy="5"
           data-blade-component="svg-circle"
-          fill="hsla(216, 33%, 29%, 1)"
+          fill="hsla(211, 29%, 26%, 1)"
           r="5"
         />
-        <circle
-          cx="5"
-          cy="5"
-          data-blade-component="svg-circle"
-          r="4.75"
-          stroke="hsla(214, 21%, 94%, 0.18)"
-          stroke-width="0.5"
-        />
       </svg>
       <div
         class="c2"
@@ -90,7 +86,7 @@ exports[`<Indicator /> should render 1`] = `
 </div>
 `;
 
-exports[`<Indicator /> should render different variants for size and intent 1`] = `
+exports[`<Indicator /> should render different variants for size and color 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -117,28 +113,36 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -168,17 +172,9 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           cx="5"
           cy="5"
           data-blade-component="svg-circle"
-          fill="hsla(38, 97%, 38%, 1)"
+          fill="hsla(25, 90%, 48%, 1)"
           r="5"
         />
-        <circle
-          cx="5"
-          cy="5"
-          data-blade-component="svg-circle"
-          r="4.75"
-          stroke="hsla(214, 21%, 94%, 0.18)"
-          stroke-width="0.5"
-        />
       </svg>
       <div
         class="c2"
@@ -214,17 +210,9 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           cx="5"
           cy="5"
           data-blade-component="svg-circle"
-          fill="hsla(160, 100%, 26%, 1)"
+          fill="hsla(150, 100%, 32%, 1)"
           r="5"
         />
-        <circle
-          cx="5"
-          cy="5"
-          data-blade-component="svg-circle"
-          r="4.75"
-          stroke="hsla(214, 21%, 94%, 0.18)"
-          stroke-width="0.5"
-        />
       </svg>
       <div
         class="c2"
@@ -260,17 +248,9 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           cx="5"
           cy="5"
           data-blade-component="svg-circle"
-          fill="hsla(8, 73%, 47%, 1)"
+          fill="hsla(4, 74%, 49%, 1)"
           r="5"
         />
-        <circle
-          cx="5"
-          cy="5"
-          data-blade-component="svg-circle"
-          r="4.75"
-          stroke="hsla(214, 21%, 94%, 0.18)"
-          stroke-width="0.5"
-        />
       </svg>
       <div
         class="c2"
@@ -306,17 +286,9 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           cx="5"
           cy="5"
           data-blade-component="svg-circle"
-          fill="hsla(193, 100%, 35%, 1)"
+          fill="hsla(200, 84%, 44%, 1)"
           r="5"
         />
-        <circle
-          cx="5"
-          cy="5"
-          data-blade-component="svg-circle"
-          r="4.75"
-          stroke="hsla(214, 21%, 94%, 0.18)"
-          stroke-width="0.5"
-        />
       </svg>
       <div
         class="c2"
diff --git a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx
index 0d7b571af66..d7af29d5e68 100644
--- a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx
+++ b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx
@@ -15,7 +15,7 @@ import { useTheme } from '~components/BladeProvider';
 const StyledBaseInputWrapper = styled(Animated.View)<BaseInputWrapperProps>((props) => ({
   ...getInputBackgroundAndBorderStyles({
     theme: props.theme,
-    isFocused: props.currentInteraction === 'active',
+    isFocused: props.currentInteraction === 'focus',
     isDisabled: props.isDisabled,
     validationState: props.validationState,
     isTextArea: props.isTextArea,
diff --git a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx
index ba49ac3f682..d5f6b8711f5 100644
--- a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx
+++ b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx
@@ -50,7 +50,7 @@ const StyledBaseInputWrapper = styled(BaseBox)<
 >((props) => ({
   ...getInputBackgroundAndBorderStyles({
     theme: props.theme,
-    isFocused: props.currentInteraction === 'active',
+    isFocused: props.currentInteraction === 'focus',
     isDisabled: props.isDisabled,
     validationState: props.validationState,
     isTextArea: props.isTextArea,
@@ -60,7 +60,7 @@ const StyledBaseInputWrapper = styled(BaseBox)<
     ...getInputBackgroundAndBorderStyles({
       theme: props.theme,
       isHovered: true,
-      isFocused: props.currentInteraction === 'active',
+      isFocused: props.currentInteraction === 'focus',
       isDisabled: props.isDisabled,
       validationState: props.validationState,
       isDropdownTrigger: props.isDropdownTrigger,
@@ -72,7 +72,7 @@ const StyledBaseInputWrapper = styled(BaseBox)<
   ':focus-within': {
     ...getInputBackgroundAndBorderStyles({
       theme: props.theme,
-      isFocused: props.currentInteraction === 'active',
+      isFocused: props.currentInteraction === 'focus',
       isDisabled: props.isDisabled,
       validationState: props.validationState,
       isDropdownTrigger: props.isDropdownTrigger,
diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx
index 4eb86476f2f..037714a9e8b 100644
--- a/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx
+++ b/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx
@@ -8,9 +8,9 @@ import Animated, {
 } from 'react-native-reanimated';
 import type { ReactElement } from 'react';
 import { useEffect } from 'react';
+import type { ActionStates } from '../../../utils/useInteraction';
 import type { BaseInputProps } from './BaseInput';
 import { useTheme } from '~components/BladeProvider';
-import type { ActionStates } from '~tokens/theme/theme';
 import { makeBorderSize } from '~utils/makeBorderSize';
 
 const BaseInputStyledAnimatedBorder = styled(Animated.View)(({ theme }) => ({
@@ -19,7 +19,7 @@ const BaseInputStyledAnimatedBorder = styled(Animated.View)(({ theme }) => ({
   left: 0,
   right: 0,
   opacity: 1,
-  backgroundColor: theme.colors.brand.primary[500],
+  backgroundColor: theme.colors.interactive.background.primary.default,
   height: makeBorderSize(theme.border.width.thin),
 }));
 
@@ -27,7 +27,7 @@ export const BaseInputAnimatedBorder = ({
   currentInteraction,
   validationState,
 }: {
-  currentInteraction: keyof ActionStates;
+  currentInteraction: ActionStates;
   validationState: BaseInputProps['validationState'];
 }): ReactElement => {
   const { theme } = useTheme();
@@ -45,7 +45,7 @@ export const BaseInputAnimatedBorder = ({
 
   useEffect(() => {
     if (
-      currentInteraction == 'active' &&
+      currentInteraction == 'focus' &&
       validationState !== 'error' &&
       validationState !== 'success'
     ) {
diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx
index ae48030ef7d..37d8fea49a1 100644
--- a/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx
+++ b/packages/blade/src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx
@@ -7,8 +7,8 @@ import BaseBox from '~components/Box/BaseBox';
 import { makeMotionTime } from '~utils/makeMotionTime';
 import type { Theme } from '~components/BladeProvider';
 import { useTheme } from '~components/BladeProvider';
-import type { ActionStates } from '~tokens/theme/theme';
 import { makeBorderSize } from '~utils/makeBorderSize';
+import type { ActionStates } from '~utils/useInteraction';
 
 const scaleBorder = keyframes`
 from {
@@ -39,7 +39,7 @@ const BaseInputStyledAnimatedBorder = styled(BaseBox)(
     left: 0;
     right: 0;
     opacity: 0;
-    background-color: ${theme.colors.brand.primary[500]};
+    background-color: ${theme.colors.interactive.background.primary.default};
     border-width: ${makeBorderSize(theme.border.width.thin)};
     height: ${makeBorderSize(theme.border.width.thin)};
     ${animation}
@@ -50,7 +50,7 @@ export const BaseInputAnimatedBorder = ({
   currentInteraction,
   validationState,
 }: {
-  currentInteraction: keyof ActionStates;
+  currentInteraction: ActionStates;
   validationState: BaseInputProps['validationState'];
 }): ReactElement => {
   const { theme } = useTheme();
@@ -67,7 +67,7 @@ export const BaseInputAnimatedBorder = ({
   // need ref because we don't have `blur` as an interaction which means the exit animation would run on default as well as blur event
   const borderAnimation = React.useRef<FlattenSimpleInterpolation>();
   if (
-    currentInteraction === 'active' &&
+    currentInteraction === 'focus' &&
     validationState !== 'error' &&
     validationState !== 'success'
   ) {
diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.native.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.native.tsx
index 5dc946465aa..11221b4dbe9 100644
--- a/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.native.tsx
+++ b/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.native.tsx
@@ -69,7 +69,14 @@ const ClickableText = ({
       }}
     >
       <BaseBox alignSelf="center" marginRight="spacing.4">
-        <Text type={isDisabled ? 'placeholder' : 'normal'}>{children}</Text>
+        <Text
+          size="small"
+          variant="body"
+          weight="regular"
+          color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}
+        >
+          {children}
+        </Text>
       </BaseBox>
     </TouchableWithoutFeedback>
   );
diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx
index c206b5e5809..18eb9994b42 100644
--- a/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx
+++ b/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx
@@ -189,10 +189,13 @@ const BaseInputTagSlot = ({
       {visibleTags}
       {tags && !showAllTags && invisibleTagsCount ? (
         <Text
-          type={isDisabled ? 'placeholder' : 'normal'}
+          color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}
           alignSelf="center"
           marginY="spacing.2"
           marginRight="spacing.4"
+          variant="body"
+          size="small"
+          weight="regular"
         >
           <BaseBox as="span" whiteSpace="nowrap">
             {visibleTags?.length === 0
diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputVisuals.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputVisuals.tsx
index a62027c7ce9..73459f77e63 100644
--- a/packages/blade/src/components/Input/BaseInput/BaseInputVisuals.tsx
+++ b/packages/blade/src/components/Input/BaseInput/BaseInputVisuals.tsx
@@ -140,11 +140,7 @@ export const BaseInputVisuals = ({
           <BaseBox paddingLeft="spacing.4" display="flex">
             <LeadingIcon
               size="medium"
-              color={
-                isDisabled
-                  ? 'surface.text.placeholder.lowContrast'
-                  : 'surface.text.subtle.lowContrast'
-              }
+              color={isDisabled ? 'surface.icon.gray.disabled' : 'surface.icon.gray.subtle'}
             />
           </BaseBox>
         ) : null}
@@ -154,8 +150,7 @@ export const BaseInputVisuals = ({
               size="medium"
               variant="body"
               weight="regular"
-              contrast="low"
-              type={isDisabled ? 'placeholder' : 'subtle'}
+              color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}
             >
               {prefix}
             </Text>
@@ -184,8 +179,7 @@ export const BaseInputVisuals = ({
               size="medium"
               variant="body"
               weight="regular"
-              contrast="low"
-              type={isDisabled ? 'placeholder' : 'subtle'}
+              color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}
             >
               {suffix}
             </Text>
@@ -197,9 +191,7 @@ export const BaseInputVisuals = ({
               <TrailingIcon
                 size="medium"
                 color={
-                  isDisabled
-                    ? 'surface.text.placeholder.lowContrast'
-                    : 'surface.text.subtle.lowContrast'
+                  isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted'
                 }
               />
             }
diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputWrapper.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputWrapper.tsx
index 7d8675fb376..62de6903f04 100644
--- a/packages/blade/src/components/Input/BaseInput/BaseInputWrapper.tsx
+++ b/packages/blade/src/components/Input/BaseInput/BaseInputWrapper.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import type { BaseInputProps } from './BaseInput';
 import { BaseInputAnimatedBorder } from './BaseInputAnimatedBorder';
 import { AnimatedBaseInputWrapper } from './AnimatedBaseInputWrapper';
-import type { ActionStates } from '~tokens/theme/theme';
 import type { ContainerElementType } from '~utils/types';
+import type { ActionStates } from '~utils/useInteraction';
 
 type BaseInputWrapperProps = Pick<
   BaseInputProps,
@@ -17,7 +17,7 @@ type BaseInputWrapperProps = Pick<
 > & {
   isFocused?: boolean;
   isLabelLeftPositioned?: boolean;
-  currentInteraction: keyof ActionStates;
+  currentInteraction: ActionStates;
   isTextArea?: boolean;
   setShowAllTagsWithAnimation: (showAllTagsWithAnimation: boolean) => void;
   children: React.ReactNode;
diff --git a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx
index 7cd5b033fd4..30ca906b447 100644
--- a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx
+++ b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx
@@ -254,7 +254,7 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
         setCurrentInteraction('default');
       }
     },
-    isFocused: currentInteraction === 'active',
+    isFocused: currentInteraction === 'focus',
   };
 
   return renderAs === 'button' ? (
@@ -267,7 +267,7 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
       }}
       onFocus={(): void => {
         handleOnFocus?.({ name, value: props.value });
-        setCurrentInteraction('active');
+        setCurrentInteraction('focus');
       }}
       as={undefined}
       {...commonProps}
@@ -275,7 +275,9 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
       {...accessibilityProps}
     >
       <Text
-        type={props.value && !isDisabled ? 'subtle' : 'placeholder'}
+        color={
+          props.value && !isDisabled ? 'surface.text.gray.subtle' : 'surface.text.gray.disabled'
+        }
         truncateAfterLines={1}
         textAlign={props.textAlign}
       >
@@ -291,12 +293,12 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
       numberOfLines={numberOfLines}
       editable={!isDisabled}
       maxLength={maxCharacters}
-      placeholderTextColor={theme.colors.surface.text.placeholder.lowContrast}
+      placeholderTextColor={theme.colors.surface.text.gray.disabled}
       onFocus={(event): void => {
         handleOnFocus?.({ name, value: event?.nativeEvent.text });
         // React Native does not have native onPress event on Input elements so for consistency of API we call it on onFocus which also gets triggered on clicks
         handleOnClick?.({ name, value: event?.nativeEvent.text });
-        setCurrentInteraction('active');
+        setCurrentInteraction('focus');
       }}
       onChangeText={(text): void => {
         handleOnChange?.({ name, value: text });
diff --git a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx
index e0e39cf86d0..cabe7e9913f 100644
--- a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx
+++ b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx
@@ -34,9 +34,8 @@ const getWebInputStyles = (
       ...getTextStyles({
         size: 'medium',
         variant: 'body',
-        type: 'placeholder',
         weight: 'regular',
-        contrast: 'low',
+        color: 'surface.text.gray.disabled',
         theme: props.theme,
       }),
       textAlign: props.textAlign,
@@ -116,7 +115,7 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
       handleOnBlur?.({ name, value: event });
     },
     onFocus: (event: React.ChangeEvent<HTMLInputElement>): void => {
-      setCurrentInteraction('active');
+      setCurrentInteraction('focus');
       handleOnFocus?.({ name, value: event });
     },
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -144,7 +143,9 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
       value={props.value}
     >
       <Text
-        type={props.value && !isDisabled ? 'subtle' : 'placeholder'}
+        color={
+          props.value && !isDisabled ? 'surface.text.gray.subtle' : 'surface.text.gray.disabled'
+        }
         truncateAfterLines={1}
         textAlign={props.textAlign}
       >
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
index 8ef035dc5ad..842bd0ea183 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
@@ -84,23 +84,24 @@ exports[`<BaseInput /> should render 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subdued.lowContrast"
+              color="surface.text.gray.subtle"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
+              fontWeight="semibold"
+              lineHeight={75}
               numberOfLines={2}
               style={
                 [
                   {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 26%, 34%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
+                    "fontWeight": "600",
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -147,7 +148,7 @@ exports[`<BaseInput /> should render 1`] = `
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -157,11 +158,12 @@ exports[`<BaseInput /> should render 1`] = `
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -186,8 +188,8 @@ exports[`<BaseInput /> should render 1`] = `
         style={
           [
             {
-              "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-              "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+              "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+              "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
               "borderBottomStyle": "solid",
               "borderBottomWidth": 1,
               "borderTopLeftRadius": 2,
@@ -226,21 +228,22 @@ exports[`<BaseInput /> should render 1`] = `
           onFocus={[Function]}
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
-          placeholderTextColor="hsla(214, 18%, 69%, 1)"
+          placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
           secureTextEntry={false}
           style={
             [
               {
                 "backgroundColor": "transparent",
-                "color": "hsla(216, 27%, 36%, 1)",
+                "color": "hsla(211, 26%, 34%, 1)",
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "height": 36,
+                "letterSpacing": 0,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -261,7 +264,7 @@ exports[`<BaseInput /> should render 1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                "backgroundColor": "hsla(227, 100%, 59%, 1)",
                 "bottom": 0,
                 "height": 1,
                 "left": 0,
@@ -392,23 +395,24 @@ exports[`<BaseInput /> should render with icons 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subdued.lowContrast"
+              color="surface.text.gray.subtle"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
+              fontWeight="semibold"
+              lineHeight={75}
               numberOfLines={2}
               style={
                 [
                   {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 26%, 34%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
+                    "fontWeight": "600",
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -455,7 +459,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -465,11 +469,12 @@ exports[`<BaseInput /> should render with icons 1`] = `
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -494,8 +499,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
         style={
           [
             {
-              "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-              "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+              "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+              "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
               "borderBottomStyle": "solid",
               "borderBottomWidth": 1,
               "borderTopLeftRadius": 2,
@@ -582,7 +587,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
                 <RNSVGPath
                   clipRule={0}
                   d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z"
-                  fill={4282603381}
+                  fill={4282406509}
                   fillRule={0}
                   propList={
                     [
@@ -594,7 +599,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
                 <RNSVGPath
                   clipRule={0}
                   d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z"
-                  fill={4282603381}
+                  fill={4282406509}
                   fillRule={0}
                   propList={
                     [
@@ -634,21 +639,22 @@ exports[`<BaseInput /> should render with icons 1`] = `
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
           placeholder="First Last"
-          placeholderTextColor="hsla(214, 18%, 69%, 1)"
+          placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
           secureTextEntry={false}
           style={
             [
               {
                 "backgroundColor": "transparent",
-                "color": "hsla(216, 27%, 36%, 1)",
+                "color": "hsla(211, 26%, 34%, 1)",
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "height": 36,
+                "letterSpacing": 0,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -738,7 +744,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
               >
                 <RNSVGPath
                   d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                  fill={4282603381}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -753,7 +759,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                "backgroundColor": "hsla(227, 100%, 59%, 1)",
                 "bottom": 0,
                 "height": 1,
                 "left": 0,
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
index 81acbd1788b..0a357bdd325 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseInput /> should display success validation state 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="name-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kbENFz"><input type="text" id="name-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="name-undefined-successtext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 cdERJc"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" clip-rule="evenodd" fill="hsla(160, 100%, 26%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO gYKBMK" id="name-undefined-successtext-undefined" data-blade-component="base-text">Success</span></span></div></div></div></div></div>"`;
+exports[`<BaseInput /> should display success validation state 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="name-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kEPOL"><input type="text" id="name-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="name-undefined-successtext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 keHBlw"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div id="name-undefined-successtext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" clip-rule="evenodd" fill="hsla(150, 100%, 27%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO eBAxAv" data-blade-component="text">Success</span></span></div></div></div></div></div>"`;
 
 exports[`<BaseInput /> should display success validation state 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -95,14 +95,18 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -113,40 +117,52 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -167,53 +183,69 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -228,14 +260,14 @@ exports[`<BaseInput /> should display success validation state 2`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(155,100%,31%,0.09);
-  border-bottom-color: hsla(160,100%,26%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-bottom-color: hsla(150,100%,32%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -252,8 +284,8 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(155,100%,31%,0.09);
-  border-bottom-color: hsla(160,100%,26%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-bottom-color: hsla(150,100%,32%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -276,8 +308,8 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(155,100%,31%,0.09);
-  border-bottom-color: hsla(160,100%,26%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-bottom-color: hsla(150,100%,32%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -389,6 +421,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
         <div
           class="c12"
           data-blade-component="base-box"
+          id="name-1-successtext-5"
         >
           <span
             class="c13"
@@ -408,7 +441,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
                 clip-rule="evenodd"
                 d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
                 data-blade-component="svg-path"
-                fill="hsla(160, 100%, 26%, 1)"
+                fill="hsla(150, 100%, 27%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
@@ -418,8 +451,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
             />
             <span
               class="c15"
-              data-blade-component="base-text"
-              id="name-1-successtext-5"
+              data-blade-component="text"
             >
               Success
             </span>
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
index 6cff03b79a0..76ab512c06e 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
@@ -71,14 +71,18 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -89,27 +93,35 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -130,53 +142,69 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -191,14 +219,14 @@ exports[`<BaseInput /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -215,8 +243,8 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -239,8 +267,8 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -456,14 +484,18 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -474,27 +506,35 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -515,53 +555,69 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c10.c10.c10.c10.c10::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -576,14 +632,14 @@ exports[`<BaseInput /> should render with icons 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -600,8 +656,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -624,8 +680,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -728,14 +784,14 @@ exports[`<BaseInput /> should render with icons 1`] = `
                 clip-rule="evenodd"
                 d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
                 fill-rule="evenodd"
               />
               <path
                 clip-rule="evenodd"
                 d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
@@ -773,7 +829,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
               <path
                 d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
               />
             </svg>
           </div>
diff --git a/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts b/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts
index 806b2d8bbb1..3e30a0ec640 100644
--- a/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts
+++ b/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts
@@ -46,32 +46,32 @@ export const getInputBackgroundAndBorderStyles = ({
   | 'isDropdownTrigger'
 >): CSSObject => {
   // normal state
-  let backgroundColor = theme.colors.brand.gray.a50.lowContrast;
-  let borderBottomColor = theme.colors.brand.gray.a100.lowContrast;
+  let backgroundColor = theme.colors.interactive.background.gray.default;
+  let borderBottomColor = theme.colors.interactive.background.gray.highlighted;
 
   // hoverState
   if (isHovered) {
-    backgroundColor = theme.colors.brand.gray.a100.lowContrast;
+    backgroundColor = theme.colors.interactive.background.gray.highlighted;
   }
 
   // focused state
   if (isFocused) {
-    backgroundColor = theme.colors.brand.primary[300];
+    backgroundColor = theme.colors.interactive.background.primary.faded;
   }
 
   // disabled state
   if (isDisabled) {
-    backgroundColor = theme.colors.brand.gray.a50.lowContrast;
-    borderBottomColor = theme.colors.brand.gray[300].lowContrast;
+    backgroundColor = theme.colors.interactive.background.gray.disabled;
+    borderBottomColor = 'transparent';
   }
 
   // validation state
   if (validationState === 'error') {
-    backgroundColor = theme.colors.feedback.background.negative.lowContrast;
-    borderBottomColor = theme.colors.feedback.border.negative.highContrast;
+    backgroundColor = theme.colors.interactive.background.negative.faded;
+    borderBottomColor = theme.colors.interactive.background.negative.default;
   } else if (validationState === 'success') {
-    backgroundColor = theme.colors.feedback.background.positive.lowContrast;
-    borderBottomColor = theme.colors.feedback.border.positive.highContrast;
+    backgroundColor = theme.colors.interactive.background.positive.faded;
+    borderBottomColor = theme.colors.interactive.background.positive.default;
   }
 
   return {
@@ -146,9 +146,8 @@ export const getBaseInputStyles = ({
     ...getTextStyles({
       size: 'medium',
       variant: 'body',
-      type: isDisabled ? 'placeholder' : 'subtle',
       weight: 'regular',
-      contrast: 'low',
+      color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',
       theme,
     }),
     // take the full available width of parent container for input field
diff --git a/packages/blade/src/components/Input/BaseInput/types.ts b/packages/blade/src/components/Input/BaseInput/types.ts
index fe906b41470..845bbd5f119 100644
--- a/packages/blade/src/components/Input/BaseInput/types.ts
+++ b/packages/blade/src/components/Input/BaseInput/types.ts
@@ -2,13 +2,13 @@ import type React from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import type { BaseInputProps } from './BaseInput';
 import type { FormInputHandleOnEvent } from '~components/Form';
-import type { ActionStates } from '~tokens/theme/theme';
 import type {
   FormInputHandleOnClickEvent,
   FormInputHandleOnKeyDownEvent,
   FormInputOnClickEvent,
 } from '~components/Form/FormTypes';
 import type { ContainerElementType } from '~utils/types';
+import type { ActionStates } from '~utils/useInteraction';
 
 export type InputWrapperRef = React.MutableRefObject<ContainerElementType | null>;
 
@@ -34,7 +34,7 @@ export type BaseInputWrapperProps = Pick<
 > & {
   isFocused?: boolean;
   isLabelLeftPositioned?: boolean;
-  currentInteraction: keyof ActionStates;
+  currentInteraction: ActionStates;
   isTextArea?: boolean;
   setShowAllTagsWithAnimation?: (showAllTagsWithAnimation: boolean) => void;
   children: React.ReactNode;
@@ -51,8 +51,8 @@ export type StyledBaseInputProps = {
   hasLeadingIcon?: boolean;
   hasTrailingIcon?: boolean;
   accessibilityProps: Record<string, unknown>;
-  currentInteraction: keyof ActionStates;
-  setCurrentInteraction: Dispatch<SetStateAction<keyof ActionStates>>;
+  currentInteraction: ActionStates;
+  setCurrentInteraction: Dispatch<SetStateAction<ActionStates>>;
   isTextArea?: boolean;
   hasTags?: boolean;
 } & Pick<
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx
index 66daa6ee934..1052a96f10d 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx
@@ -200,12 +200,7 @@ export default {
           componentDescription="The AutoComplete component is SelectInput-like component where you can type text and search through the list"
           componentName="AutoComplete"
           note="AutoComplete is meant to be used only inside the Dropdown component. Things will not work as expected if you are using this without Dropdown"
-          figmaURL={{
-            paymentTheme:
-              'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13590-171090',
-            bankingTheme:
-              'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=13344-389834',
-          }}
+          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13590-171090'"
         >
           <Title>Usage</Title>
           <Sandbox showConsole>
@@ -534,9 +529,11 @@ export const InternalWithValidations = (): React.ReactElement => {
   return (
     <Dropdown
       selectionType="single"
-      onDismiss={() => {
-        console.log('dismiss');
-        setIsDismissed(true);
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          console.log('dismiss');
+          setIsDismissed(true);
+        }
       }}
     >
       <AutoComplete
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/Chevron.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/Chevron.tsx
index d0a0a79c4e2..ffb23f5fb49 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/Chevron.tsx
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/Chevron.tsx
@@ -2,9 +2,7 @@ import React from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '~components/Icons';
 
 const Chevron = (props: { isOpen?: boolean; isDisabled?: boolean }): React.ReactElement => {
-  const iconColor = `surface.text.${
-    props.isDisabled ? 'placeholder' : 'normal'
-  }.lowContrast` as const;
+  const iconColor = `surface.icon.gray.${props.isDisabled ? 'disabled' : 'muted'}` as const;
 
   return (
     <>
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx
index 3b5b788629c..f1ea51864a1 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx
@@ -179,12 +179,7 @@ export default {
           componentName="SelectInput"
           apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Dropdown/_decisions/decisions.md"
           note="SelectInput is meant to be used only inside the Dropdown component. Things will not work as expected if you are using this without Dropdown"
-          figmaURL={{
-            paymentTheme:
-              'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13590-171090',
-            bankingTheme:
-              'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=13344-389834',
-          }}
+          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13590-171090'"
         >
           <Title>Usage</Title>
           <Sandbox showConsole>
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap
index 547fd0c6e57..6e8a0e03052 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap
@@ -116,23 +116,24 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.subdued.lowContrast"
+                    color="surface.text.gray.subtle"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={75}
                     fontStyle="normal"
-                    fontWeight="bold"
-                    lineHeight={50}
+                    fontWeight="semibold"
+                    lineHeight={75}
                     numberOfLines={2}
                     style={
                       [
                         {
-                          "color": "hsla(217, 18%, 45%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(211, 26%, 34%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 12,
                           "fontStyle": "normal",
-                          "fontWeight": "700",
-                          "lineHeight": 16,
+                          "fontWeight": "600",
+                          "letterSpacing": 0,
+                          "lineHeight": 18,
                           "marginBottom": 0,
                           "marginLeft": 0,
                           "marginRight": 0,
@@ -179,7 +180,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                   >
                     <Text
                       accessible={true}
-                      color="surface.text.normal.lowContrast"
+                      color="surface.text.gray.normal"
                       data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
@@ -189,11 +190,12 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                       style={
                         [
                           {
-                            "color": "hsla(217, 56%, 17%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(212, 39%, 16%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -219,8 +221,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
               style={
                 [
                   {
-                    "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                    "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+                    "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                    "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
                     "borderBottomStyle": "solid",
                     "borderBottomWidth": 1,
                     "borderTopLeftRadius": 2,
@@ -362,21 +364,22 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         onKeyPress={[Function]}
                         onSubmitEditing={[Function]}
                         placeholder="Select Option"
-                        placeholderTextColor="hsla(214, 18%, 69%, 1)"
+                        placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
                         secureTextEntry={false}
                         style={
                           [
                             {
                               "backgroundColor": "transparent",
-                              "color": "hsla(216, 27%, 36%, 1)",
+                              "color": "hsla(211, 26%, 34%, 1)",
                               "flexBasis": 0,
                               "flexGrow": 1,
                               "flexShrink": 1,
-                              "fontFamily": "Lato",
+                              "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
                               "fontWeight": "400",
                               "height": 36,
+                              "letterSpacing": 0,
                               "marginBottom": 0,
                               "marginLeft": 0,
                               "marginRight": 0,
@@ -552,7 +555,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         <RNSVGPath
                           clipRule={0}
                           d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
-                          fill={4279445060}
+                          fill={4285959847}
                           fillRule={0}
                           propList={
                             [
@@ -610,7 +613,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         <RNSVGPath
                           clipRule={0}
                           d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z"
-                          fill={4279445060}
+                          fill={4285959847}
                           fillRule={0}
                           propList={
                             [
@@ -628,7 +631,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                      "backgroundColor": "hsla(227, 100%, 59%, 1)",
                       "bottom": 0,
                       "height": 1,
                       "left": 0,
@@ -741,19 +744,19 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                   "width": "100%",
                 },
                 {
-                  "elevation": 12,
-                  "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+                  "elevation": 16,
+                  "shadowColor": "hsla(217, 56%, 17%, 0.55)",
                   "shadowOffset": {
-                    "height": 8,
+                    "height": 4,
                     "width": 0,
                   },
-                  "shadowOpacity": 0.1,
-                  "shadowRadius": 4,
+                  "shadowOpacity": 0.17,
+                  "shadowRadius": 6,
                 },
                 [
                   {
                     "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                    "borderColor": "hsla(216, 15%, 54%, 0.18)",
+                    "borderColor": "hsla(211, 20%, 52%, 0.18)",
                     "borderRadius": 4,
                     "borderStyle": "solid",
                     "borderWidth": 1,
@@ -812,7 +815,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                 getItemCount={[Function]}
                 isInBottomSheet={false}
                 keyExtractor={[Function]}
-                marginBottom={0}
+                marginBottom="0px"
                 onContentSizeChange={[Function]}
                 onLayout={[Function]}
                 onMomentumScrollBegin={[Function]}
@@ -826,7 +829,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                 style={
                   [
                     {
-                      "marginBottom": 0,
+                      "marginBottom": "0pxpx",
                       "maxHeight": 300,
                       "paddingBottom": 8,
                       "paddingLeft": 8,
@@ -1030,8 +1033,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                                         [
                                           {
                                             "alignItems": "center",
-                                            "backgroundColor": "transparent",
-                                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                                            "borderColor": "hsla(211, 27%, 76%, 1)",
                                             "borderRadius": 2,
                                             "borderStyle": "solid",
                                             "borderWidth": 1.5,
@@ -1074,7 +1077,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.normal.lowContrast"
+                            color="interactive.text.gray.normal"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
@@ -1085,11 +1088,12 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                             style={
                               [
                                 {
-                                  "color": "hsla(217, 56%, 17%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(212, 39%, 16%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
                                   "fontWeight": "400",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -1317,8 +1321,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                                         [
                                           {
                                             "alignItems": "center",
-                                            "backgroundColor": "transparent",
-                                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                                            "borderColor": "hsla(211, 27%, 76%, 1)",
                                             "borderRadius": 2,
                                             "borderStyle": "solid",
                                             "borderWidth": 1.5,
@@ -1361,7 +1365,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.normal.lowContrast"
+                            color="interactive.text.gray.normal"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
@@ -1372,11 +1376,12 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                             style={
                               [
                                 {
-                                  "color": "hsla(217, 56%, 17%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(212, 39%, 16%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
                                   "fontWeight": "400",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -1604,8 +1609,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                                         [
                                           {
                                             "alignItems": "center",
-                                            "backgroundColor": "transparent",
-                                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                                            "borderColor": "hsla(211, 27%, 76%, 1)",
                                             "borderRadius": 2,
                                             "borderStyle": "solid",
                                             "borderWidth": 1.5,
@@ -1648,7 +1653,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.normal.lowContrast"
+                            color="interactive.text.gray.normal"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
@@ -1659,11 +1664,12 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                             style={
                               [
                                 {
-                                  "color": "hsla(217, 56%, 17%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(212, 39%, 16%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
                                   "fontWeight": "400",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -1722,22 +1728,21 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
               }
             >
               <View
-                borderBottomColor="surface.border.normal.lowContrast"
+                borderBottomColor="surface.border.gray.muted"
                 borderPosition="borderBottom"
-                borderWidth="none"
                 data-blade-component="divider"
                 dividerStyle="solid"
                 isDividerHorizontal={true}
                 style={
                   [
                     {
-                      "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
-                      "borderStyle": "solid",
-                      "borderWidth": 0,
+                      "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
+                      "borderBottomStyle": "solid",
                     },
                     {
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
+                      "borderWidth": 0,
                       "flexGrow": 1,
                     },
                   ]
@@ -1777,24 +1782,22 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                     }
                   }
                   accessible={true}
-                  activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-                  activeBorderColor="hsla(230, 100%, 42%, 1)"
-                  borderRadius="2px"
-                  borderWidth="1px"
+                  borderRadius="4px"
+                  borderWidth="0px"
                   buttonPaddingBottom="0px"
                   buttonPaddingLeft="20px"
                   buttonPaddingRight="20px"
                   buttonPaddingTop="0px"
                   collapsable={false}
                   data-blade-component="button"
-                  defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-                  defaultBorderColor="hsla(218, 89%, 51%, 1)"
-                  focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-                  focusBorderColor="hsla(227, 100%, 45%, 1)"
-                  focusRingColor="hsla(218, 89%, 51%, 0.18)"
+                  defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+                  defaultBorderColor="hsla(227, 100%, 59%, 1)"
+                  focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+                  focusBorderColor="hsla(227, 100%, 59%, 1)"
+                  focusRingColor="hsla(227, 100%, 59%, 0.18)"
                   focusable={true}
-                  hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-                  hoverBorderColor="hsla(223, 95%, 48%, 1)"
+                  hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+                  hoverBorderColor="hsla(227, 100%, 59%, 1)"
                   isFullWidth={false}
                   isLoading={false}
                   minHeight="36px"
@@ -1815,15 +1818,16 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                       {
                         "alignItems": "center",
                         "alignSelf": "center",
-                        "backgroundColor": "hsla(218, 89%, 51%, 1)",
-                        "borderColor": "hsla(218, 89%, 51%, 1)",
-                        "borderRadius": 2,
+                        "backgroundColor": "hsla(227, 100%, 59%, 1)",
+                        "borderColor": "hsla(227, 100%, 59%, 1)",
+                        "borderRadius": 4,
                         "borderStyle": "solid",
-                        "borderWidth": 1,
+                        "borderWidth": 0,
                         "cursor": "pointer",
                         "display": "flex",
                         "justifyContent": "center",
                         "minHeight": 36,
+                        "overflow": "hidden",
                         "paddingBottom": 0,
                         "paddingLeft": 20,
                         "paddingRight": 20,
@@ -1834,8 +1838,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         "width": "auto",
                       },
                       {
-                        "backgroundColor": "hsla(218, 89%, 51%, 1)",
-                        "borderColor": "hsla(218, 89%, 51%, 1)",
+                        "backgroundColor": "hsla(227, 100%, 59%, 1)",
+                        "borderColor": "hsla(227, 100%, 59%, 1)",
                       },
                     ]
                   }
@@ -1858,28 +1862,31 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                           "flexGrow": 1,
                           "flexShrink": 1,
                           "justifyContent": "center",
+                          "zIndex": 1,
                         },
                         {
                           "opacity": 1,
                         },
                       ]
                     }
+                    zIndex={1}
                   >
                     <Text
                       accessible={true}
-                      color="action.text.primary.default"
+                      color="interactive.text.onPrimary.normal"
                       data-blade-component="base-text"
                       fontSize={100}
-                      fontWeight="bold"
+                      fontWeight="medium"
                       lineHeight={100}
                       style={
                         [
                           {
                             "color": "hsla(0, 0%, 100%, 1)",
-                            "fontFamily": "Lato",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
-                            "fontWeight": "700",
+                            "fontWeight": "500",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.ssr.test.tsx.snap b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.ssr.test.tsx.snap
index 823f8df7d8e..f60ce617f7f 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kUMlmJ"><div data-blade-component="base-box" class="BaseBox-bmPWx jjDQyK"><div data-blade-component="autocomplete" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  dJfiGc cgXnWX"><div class="BaseBox-bmPWx eRtEHm tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx drbAuO"><input type="text" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 kCdFCg" value=""/></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><div data-blade-component="base-box" class="BaseBox-bmPWx dxquVw"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 lmEfDF"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 fDSHXQ"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx vaNBM"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 brSCvF jkDUYw"><div data-blade-component="base-box" class="BaseBox-bmPWx cZtflA"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><h6 class="StyledBaseText-dVBfTO iFUkNH" data-blade-component="heading">Recent Searches</h6></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx eVNphd"><svg aria-hidden="true" data-blade-component="icon" height="24px" viewBox="0 0 24 24" width="24px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M16.618 18.032a9 9 0 1 1 1.414-1.414l3.675 3.675a1 1 0 0 1-1.414 1.414l-3.675-3.675ZM4 11a7 7 0 1 1 12.041 4.857 1.009 1.009 0 0 0-.185.184A7 7 0 0 1 4 11Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><p class="StyledBaseText-dVBfTO hYirqm" data-blade-component="text">No Search Result Found</p><p class="StyledBaseText-dVBfTO MHuXb" data-blade-component="text">Try searching for a different value</p></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 fFIlDE kNKFQm"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx dJEYFx"></div></div></div></div></div></div></div>"`;
+exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it visible on click 1`] = `"<div id="root"><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kUMlmJ"><div data-blade-component="base-box" class="BaseBox-bmPWx jjDQyK"><div data-blade-component="autocomplete" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  djRbKc cgXnWX"><div class="BaseBox-bmPWx eRtEHm tags-slot" data-blade-component="base-box"><div data-blade-component="base-box" class="BaseBox-bmPWx drbAuO"><input type="text" autoComplete="off" id="dropdown-undefined-trigger-undefined-input-undefined" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 hsVmtU" value=""/></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><div data-blade-component="base-box" class="BaseBox-bmPWx dxquVw"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 lmEfDF"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 fDSHXQ"><path d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div><div style="position:fixed;left:0;top:0" data-blade-component="base-box" class="BaseBox-bmPWx vaNBM"><div elevation="midRaised" style="transform:translateY(-8px);opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 qogZr hBPEVn"><div data-blade-component="base-box" class="BaseBox-bmPWx cZtflA"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx djABsd"><div data-blade-component="base-box" class="BaseBox-bmPWx hJkrmV"><div data-blade-component="base-box" class="BaseBox-bmPWx hXjMxV"><div data-blade-component="base-box" class="BaseBox-bmPWx jxfNRL"><div data-blade-component="base-box" class="BaseBox-bmPWx kDqSNs"><p class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">Recent Searches</p></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx eVNphd"><svg aria-hidden="true" data-blade-component="icon" height="24px" viewBox="0 0 24 24" width="24px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M16.618 18.032a9 9 0 1 1 1.414-1.414l3.675 3.675a1 1 0 0 1-1.414 1.414l-3.675-3.675ZM4 11a7 7 0 1 1 12.041 4.857 1.009 1.009 0 0 0-.185.184A7 7 0 0 1 4 11Z" clip-rule="evenodd" fill="hsla(211, 22%, 56%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><p class="StyledBaseText-dVBfTO gxxGIR" data-blade-component="text">No Search Result Found</p><p class="StyledBaseText-dVBfTO iuPBIs" data-blade-component="text">Try searching for a different value</p></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx dJEYFx"></div></div></div></div></div></div></div>"`;
 
 exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it visible on click 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -137,7 +137,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 
 .c23.c23.c23.c23.c23 {
   width: 100%;
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c25.c25.c25.c25.c25 {
@@ -207,9 +207,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c32.c32.c32.c32.c32 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c41.c41.c41.c41.c41 {
@@ -243,6 +242,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c11.c11.c11.c11.c11 {
@@ -321,7 +321,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 .c24.c24.c24.c24.c24 {
   background-color: hsla(0,0%,100%,1);
   border-width: 1px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
   border-radius: 4px;
 }
@@ -330,10 +330,10 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -349,6 +349,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -363,25 +364,25 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c42.c42.c42.c42.c42:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c42.c42.c42.c42.c42:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c42.c42.c42.c42.c42:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c42.c42.c42.c42.c42 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -389,14 +390,18 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -407,54 +412,70 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c31.c31.c31.c31.c31 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c45.c45.c45.c45.c45 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c39.c39.c39.c39.c39 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -480,6 +501,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c33.c33.c33.c33.c33 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -489,14 +511,18 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -518,56 +544,72 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c13.c13.c13.c13.c13::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -583,14 +625,14 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c9.c9.c9.c9.c9 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -608,8 +650,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c9.c9.c9.c9.c9:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -633,8 +675,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c9.c9.c9.c9.c9:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -700,11 +742,15 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c35.c35.c35.c35.c35:hover:not([aria-disabled=true]) {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c35.c35.c35.c35.c35[aria-selected=true] {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
+}
+
+.c35.c35.c35.c35.c35[aria-selected=true]:hover {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 @media screen and (min-width:768px) {
@@ -718,31 +764,31 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 
 @media screen and (min-width:320px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -869,7 +915,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
                         clip-rule="evenodd"
                         d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -886,7 +932,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
                         clip-rule="evenodd"
                         d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -949,12 +995,12 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
                         class="c30"
                         data-blade-component="base-box"
                       >
-                        <h6
+                        <p
                           class="c31"
-                          data-blade-component="heading"
+                          data-blade-component="text"
                         >
                           Recent Searches
-                        </h6>
+                        </p>
                       </div>
                     </div>
                   </div>
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap
index 58b0a832549..825a539fad7 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap
@@ -247,9 +247,8 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c40.c40.c40.c40.c40 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c42.c42.c42.c42.c42 {
@@ -350,6 +349,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c43.c43.c43.c43.c43 {
@@ -386,7 +386,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   right: 0px;
   bottom: 0px;
   left: 0px;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
   opacity: 1;
 }
 
@@ -394,10 +394,10 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -413,6 +413,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -427,25 +428,25 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c53.c53.c53.c53.c53:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c53.c53.c53.c53.c53:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c53.c53.c53.c53.c53:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c53.c53.c53.c53.c53 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -453,14 +454,18 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -471,27 +476,35 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -503,14 +516,18 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c49.c49.c49.c49.c49 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -522,13 +539,17 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 
 .c56.c56.c56.c56.c56 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -550,6 +571,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c41.c41.c41.c41.c41 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -576,7 +598,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -586,28 +608,38 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c35.c35.c35.c35.c35:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c35.c35.c35.c35.c35:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c35.c35.c35.c35.c35:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c38.c38.c38.c38.c38 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -629,56 +661,72 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c38.c38.c38.c38.c38::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c38.c38.c38.c38.c38::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c38.c38.c38.c38.c38:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c38.c38.c38.c38.c38::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -689,14 +737,18 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -718,56 +770,72 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c13.c13.c13.c13.c13::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -783,7 +851,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
   -webkit-animation: cAlpMa-450290765 250ms cubic-bezier(0.3,0,0.2,1) forwards;
@@ -796,7 +864,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
   -webkit-animation: iXkvNT-450290765 150ms cubic-bezier(0.3,0,0.2,1) forwards;
@@ -804,8 +872,8 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c9.c9.c9.c9.c9 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -823,8 +891,8 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c9.c9.c9.c9.c9:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -848,8 +916,8 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c9.c9.c9.c9.c9:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -867,8 +935,8 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c36.c36.c36.c36.c36 {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -886,8 +954,8 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c36.c36.c36.c36.c36:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -911,8 +979,8 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c36.c36.c36.c36.c36:focus-within {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -976,11 +1044,15 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 }
 
 .c45.c45.c45.c45.c45:hover:not([aria-disabled=true]) {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c45.c45.c45.c45.c45[aria-selected=true] {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
+}
+
+.c45.c45.c45.c45.c45[aria-selected=true]:hover {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c24.c24.c24.c24.c24 {
@@ -1025,7 +1097,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   content: '';
   width: 56px;
   height: 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.12);
   border-radius: 16px;
 }
 
@@ -1033,7 +1105,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   background: hsla(0,0%,100%,1);
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   box-shadow: 0px -24px 48px -12px hsla(217,56%,17%,0.18);
   opacity: 0;
   pointer-events: none;
@@ -1074,31 +1146,31 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
 
 @media screen and (min-width:320px) {
   .c40.c40.c40.c40.c40 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c40.c40.c40.c40.c40 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c40.c40.c40.c40.c40 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c40.c40.c40.c40.c40 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c40.c40.c40.c40.c40 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -1241,7 +1313,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
                         clip-rule="evenodd"
                         d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -1258,7 +1330,7 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
                         clip-rule="evenodd"
                         d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -1747,7 +1819,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 
 .c23.c23.c23.c23.c23 {
   width: 100%;
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
 }
 
 .c25.c25.c25.c25.c25 {
@@ -1817,9 +1889,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c32.c32.c32.c32.c32 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c41.c41.c41.c41.c41 {
@@ -1853,6 +1924,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c11.c11.c11.c11.c11 {
@@ -1931,7 +2003,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 .c24.c24.c24.c24.c24 {
   background-color: hsla(0,0%,100%,1);
   border-width: 1px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
   border-radius: 4px;
 }
@@ -1940,10 +2012,10 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
   min-height: 36px;
   width: 100%;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1959,6 +2031,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1973,25 +2046,25 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c42.c42.c42.c42.c42:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c42.c42.c42.c42.c42:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c42.c42.c42.c42.c42:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c42.c42.c42.c42.c42 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1999,14 +2072,18 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2017,54 +2094,70 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c31.c31.c31.c31.c31 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c45.c45.c45.c45.c45 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c39.c39.c39.c39.c39 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -2090,6 +2183,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c33.c33.c33.c33.c33 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -2099,14 +2193,18 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -2128,56 +2226,72 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c13.c13.c13.c13.c13::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: left;
   margin: 0;
   padding: 0;
@@ -2193,7 +2307,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
   -webkit-animation: cAlpMa-450290765 250ms cubic-bezier(0.3,0,0.2,1) forwards;
@@ -2201,8 +2315,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c9.c9.c9.c9.c9 {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -2220,8 +2334,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c9.c9.c9.c9.c9:hover {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -2245,8 +2359,8 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c9.c9.c9.c9.c9:focus-within {
-  background-color: hsla(218,89%,51%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -2312,11 +2426,15 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 }
 
 .c35.c35.c35.c35.c35:hover:not([aria-disabled=true]) {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c35.c35.c35.c35.c35[aria-selected=true] {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
+}
+
+.c35.c35.c35.c35.c35[aria-selected=true]:hover {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 @media screen and (min-width:768px) {
@@ -2330,31 +2448,31 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
 
 @media screen and (min-width:320px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c32.c32.c32.c32.c32 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -2479,7 +2597,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
                         clip-rule="evenodd"
                         d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -2496,7 +2614,7 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
                         clip-rule="evenodd"
                         d="M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z"
                         data-blade-component="svg-path"
-                        fill="hsla(217, 56%, 17%, 1)"
+                        fill="hsla(211, 22%, 56%, 1)"
                         fill-rule="evenodd"
                       />
                     </svg>
@@ -2559,12 +2677,12 @@ exports[`<Dropdown /> with <AutoComplete /> should render dropdown and make it v
                         class="c30"
                         data-blade-component="base-box"
                       >
-                        <h6
+                        <p
                           class="c31"
-                          data-blade-component="heading"
+                          data-blade-component="text"
                         >
                           Recent Searches
-                        </h6>
+                        </p>
                       </div>
                     </div>
                   </div>
diff --git a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx
index ce57719d0d1..80bd532831f 100644
--- a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx
+++ b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx
@@ -154,12 +154,7 @@ export default {
           componentName="OTPInput"
           apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/OTPInput/_decisions/_decisions.md"
           componentDescription="A one-time password (OTP), also known as a one-time PIN, one-time authorization code (OTAC) or dynamic password, is a password that is valid for only one login session or a transaction. These are a group of inputs and can be either 4 or 6 characters long."
-          figmaURL={{
-            paymentTheme:
-              'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A191059',
-            bankingTheme:
-              'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=9941%3A193027',
-          }}
+          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A191059'"
         >
           <Title>Usage</Title>
           <Sandbox showConsole>
diff --git a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap
index 6fedbf374c6..995c845f186 100644
--- a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap
@@ -65,23 +65,24 @@ exports[`<OTPInput /> should render 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
-            fontWeight="bold"
-            lineHeight={50}
+            fontWeight="semibold"
+            lineHeight={75}
             numberOfLines={2}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
-                  "lineHeight": 16,
+                  "fontWeight": "600",
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -128,7 +129,7 @@ exports[`<OTPInput /> should render 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -138,11 +139,12 @@ exports[`<OTPInput /> should render 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -217,8 +219,8 @@ exports[`<OTPInput /> should render 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                      "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                      "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
                       "borderTopLeftRadius": 2,
@@ -260,21 +262,22 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
-                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
+                  placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
                   secureTextEntry={false}
                   style={
                     [
                       {
                         "backgroundColor": "transparent",
-                        "color": "hsla(216, 27%, 36%, 1)",
+                        "color": "hsla(211, 26%, 34%, 1)",
                         "flexBasis": 0,
                         "flexGrow": 1,
                         "flexShrink": 1,
-                        "fontFamily": "Lato",
+                        "fontFamily": "Inter",
                         "fontSize": 14,
                         "fontStyle": "normal",
                         "fontWeight": "400",
                         "height": 36,
+                        "letterSpacing": 0,
                         "marginBottom": 0,
                         "marginLeft": 0,
                         "marginRight": 0,
@@ -298,7 +301,7 @@ exports[`<OTPInput /> should render 1`] = `
                   style={
                     [
                       {
-                        "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                        "backgroundColor": "hsla(227, 100%, 59%, 1)",
                         "bottom": 0,
                         "height": 1,
                         "left": 0,
@@ -361,8 +364,8 @@ exports[`<OTPInput /> should render 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                      "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                      "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
                       "borderTopLeftRadius": 2,
@@ -404,21 +407,22 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
-                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
+                  placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
                   secureTextEntry={false}
                   style={
                     [
                       {
                         "backgroundColor": "transparent",
-                        "color": "hsla(216, 27%, 36%, 1)",
+                        "color": "hsla(211, 26%, 34%, 1)",
                         "flexBasis": 0,
                         "flexGrow": 1,
                         "flexShrink": 1,
-                        "fontFamily": "Lato",
+                        "fontFamily": "Inter",
                         "fontSize": 14,
                         "fontStyle": "normal",
                         "fontWeight": "400",
                         "height": 36,
+                        "letterSpacing": 0,
                         "marginBottom": 0,
                         "marginLeft": 0,
                         "marginRight": 0,
@@ -442,7 +446,7 @@ exports[`<OTPInput /> should render 1`] = `
                   style={
                     [
                       {
-                        "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                        "backgroundColor": "hsla(227, 100%, 59%, 1)",
                         "bottom": 0,
                         "height": 1,
                         "left": 0,
@@ -505,8 +509,8 @@ exports[`<OTPInput /> should render 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                      "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                      "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
                       "borderTopLeftRadius": 2,
@@ -548,21 +552,22 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
-                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
+                  placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
                   secureTextEntry={false}
                   style={
                     [
                       {
                         "backgroundColor": "transparent",
-                        "color": "hsla(216, 27%, 36%, 1)",
+                        "color": "hsla(211, 26%, 34%, 1)",
                         "flexBasis": 0,
                         "flexGrow": 1,
                         "flexShrink": 1,
-                        "fontFamily": "Lato",
+                        "fontFamily": "Inter",
                         "fontSize": 14,
                         "fontStyle": "normal",
                         "fontWeight": "400",
                         "height": 36,
+                        "letterSpacing": 0,
                         "marginBottom": 0,
                         "marginLeft": 0,
                         "marginRight": 0,
@@ -586,7 +591,7 @@ exports[`<OTPInput /> should render 1`] = `
                   style={
                     [
                       {
-                        "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                        "backgroundColor": "hsla(227, 100%, 59%, 1)",
                         "bottom": 0,
                         "height": 1,
                         "left": 0,
@@ -649,8 +654,8 @@ exports[`<OTPInput /> should render 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                      "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                      "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
                       "borderTopLeftRadius": 2,
@@ -692,21 +697,22 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
-                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
+                  placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
                   secureTextEntry={false}
                   style={
                     [
                       {
                         "backgroundColor": "transparent",
-                        "color": "hsla(216, 27%, 36%, 1)",
+                        "color": "hsla(211, 26%, 34%, 1)",
                         "flexBasis": 0,
                         "flexGrow": 1,
                         "flexShrink": 1,
-                        "fontFamily": "Lato",
+                        "fontFamily": "Inter",
                         "fontSize": 14,
                         "fontStyle": "normal",
                         "fontWeight": "400",
                         "height": 36,
+                        "letterSpacing": 0,
                         "marginBottom": 0,
                         "marginLeft": 0,
                         "marginRight": 0,
@@ -730,7 +736,7 @@ exports[`<OTPInput /> should render 1`] = `
                   style={
                     [
                       {
-                        "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                        "backgroundColor": "hsla(227, 100%, 59%, 1)",
                         "bottom": 0,
                         "height": 1,
                         "left": 0,
@@ -793,8 +799,8 @@ exports[`<OTPInput /> should render 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                      "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                      "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
                       "borderTopLeftRadius": 2,
@@ -836,21 +842,22 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
-                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
+                  placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
                   secureTextEntry={false}
                   style={
                     [
                       {
                         "backgroundColor": "transparent",
-                        "color": "hsla(216, 27%, 36%, 1)",
+                        "color": "hsla(211, 26%, 34%, 1)",
                         "flexBasis": 0,
                         "flexGrow": 1,
                         "flexShrink": 1,
-                        "fontFamily": "Lato",
+                        "fontFamily": "Inter",
                         "fontSize": 14,
                         "fontStyle": "normal",
                         "fontWeight": "400",
                         "height": 36,
+                        "letterSpacing": 0,
                         "marginBottom": 0,
                         "marginLeft": 0,
                         "marginRight": 0,
@@ -874,7 +881,7 @@ exports[`<OTPInput /> should render 1`] = `
                   style={
                     [
                       {
-                        "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                        "backgroundColor": "hsla(227, 100%, 59%, 1)",
                         "bottom": 0,
                         "height": 1,
                         "left": 0,
@@ -937,8 +944,8 @@ exports[`<OTPInput /> should render 1`] = `
                 style={
                   [
                     {
-                      "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-                      "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+                      "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+                      "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
                       "borderTopLeftRadius": 2,
@@ -980,21 +987,22 @@ exports[`<OTPInput /> should render 1`] = `
                   onKeyPress={[Function]}
                   onSubmitEditing={[Function]}
                   placeholder=""
-                  placeholderTextColor="hsla(214, 18%, 69%, 1)"
+                  placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
                   secureTextEntry={false}
                   style={
                     [
                       {
                         "backgroundColor": "transparent",
-                        "color": "hsla(216, 27%, 36%, 1)",
+                        "color": "hsla(211, 26%, 34%, 1)",
                         "flexBasis": 0,
                         "flexGrow": 1,
                         "flexShrink": 1,
-                        "fontFamily": "Lato",
+                        "fontFamily": "Inter",
                         "fontSize": 14,
                         "fontStyle": "normal",
                         "fontWeight": "400",
                         "height": 36,
+                        "letterSpacing": 0,
                         "marginBottom": 0,
                         "marginLeft": 0,
                         "marginRight": 0,
@@ -1018,7 +1026,7 @@ exports[`<OTPInput /> should render 1`] = `
                   style={
                     [
                       {
-                        "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                        "backgroundColor": "hsla(227, 100%, 59%, 1)",
                         "bottom": 0,
                         "height": 1,
                         "left": 0,
diff --git a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
index 3d3467f19c6..9e530f7b4e4 100644
--- a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<OTPInput /> should have hidden input for form submissions 1`] = `"<div id="root"><div data-blade-component="otp-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx gbruaa"><label for="otp-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Enter OTP</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text"></p></div></div></div></label><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input hidden="" id="otp-undefined-input-undefined" name="otpInput" readonly="" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx kYybk"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-0-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label="Enter OTP character 1" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fgDRwM" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-1-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 2" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fgDRwM" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-2-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 3" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fgDRwM" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-3-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 4" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fgDRwM" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-4-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 5" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fgDRwM" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-5-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 6" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fgDRwM" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"></div></div></div>"`;
+exports[`<OTPInput /> should have hidden input for form submissions 1`] = `"<div id="root"><div data-blade-component="otp-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx gbruaa"><label for="otp-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter OTP</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input hidden="" id="otp-undefined-input-undefined" name="otpInput" readonly="" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx kYybk"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-0-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label="Enter OTP character 1" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-1-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 2" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-2-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 3" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-3-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 4" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-4-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 5" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-5-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 6" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"></div></div></div>"`;
 
 exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -78,14 +78,18 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -96,27 +100,35 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -138,56 +150,72 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c10.c10.c10.c10.c10::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -203,14 +231,14 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c9.c9.c9.c9.c9 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -227,8 +255,8 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c9.c9.c9.c9.c9:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -251,8 +279,8 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
diff --git a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap
index cb019b558d3..2482ce9c5b7 100644
--- a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap
@@ -76,14 +76,18 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -94,27 +98,35 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -136,56 +148,72 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c10.c10.c10.c10.c10::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -201,14 +229,14 @@ exports[`<OTPInput /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c9.c9.c9.c9.c9 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -225,8 +253,8 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c9.c9.c9.c9.c9:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -249,8 +277,8 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
diff --git a/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx b/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
index ebafbc9983b..e7b8447a690 100644
--- a/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
+++ b/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
@@ -17,12 +17,7 @@ const Page = (): ReactElement => {
       componentName="PasswordInput"
       apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/PasswordInput/_decisions/decisions.md"
       componentDescription="PasswordInput is an input field for entering passwords. The input is masked by default. On mobile devices the last typed letter is shown for a brief moment. The masking can be toggled using an optional reveal button."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A110176',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=9995%3A180296',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A110176"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap
index ea6eff139e2..f6aa3b38ec1 100644
--- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap
@@ -84,23 +84,24 @@ exports[`<PasswordInput /> should render 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subdued.lowContrast"
+              color="surface.text.gray.subtle"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
+              fontWeight="semibold"
+              lineHeight={75}
               numberOfLines={2}
               style={
                 [
                   {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 26%, 34%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
+                    "fontWeight": "600",
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -147,7 +148,7 @@ exports[`<PasswordInput /> should render 1`] = `
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -157,11 +158,12 @@ exports[`<PasswordInput /> should render 1`] = `
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -187,8 +189,8 @@ exports[`<PasswordInput /> should render 1`] = `
         style={
           [
             {
-              "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-              "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+              "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+              "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
               "borderBottomStyle": "solid",
               "borderBottomWidth": 1,
               "borderTopLeftRadius": 2,
@@ -237,22 +239,23 @@ exports[`<PasswordInput /> should render 1`] = `
           onFocus={[Function]}
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
-          placeholderTextColor="hsla(214, 18%, 69%, 1)"
+          placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
           returnKeyType="done"
           secureTextEntry={true}
           style={
             [
               {
                 "backgroundColor": "transparent",
-                "color": "hsla(216, 27%, 36%, 1)",
+                "color": "hsla(211, 26%, 34%, 1)",
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "height": 36,
+                "letterSpacing": 0,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -324,7 +327,7 @@ exports[`<PasswordInput /> should render 1`] = `
               }
               accessible={true}
               collapsable={false}
-              contrast="low"
+              emphasis="intense"
               focusable={true}
               onBlur={[Function]}
               onClick={[Function]}
@@ -387,7 +390,7 @@ exports[`<PasswordInput /> should render 1`] = `
                   <RNSVGPath
                     clipRule={0}
                     d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z"
-                    fill={4288851646}
+                    fill={4285959847}
                     fillRule={0}
                     propList={
                       [
@@ -399,7 +402,7 @@ exports[`<PasswordInput /> should render 1`] = `
                   <RNSVGPath
                     clipRule={0}
                     d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z"
-                    fill={4288851646}
+                    fill={4285959847}
                     fillRule={0}
                     propList={
                       [
@@ -417,7 +420,7 @@ exports[`<PasswordInput /> should render 1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                "backgroundColor": "hsla(227, 100%, 59%, 1)",
                 "bottom": 0,
                 "height": 1,
                 "left": 0,
diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
index 4f129260501..9cf7df19d71 100644
--- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PasswordInput /> should display error validation state 1`] = `"<div id="root"><div data-blade-component="password-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="password-field-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Enter password</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  cCQTka"><input type="password" autoCapitalize="none" enterKeyHint="done" id="password-field-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="true" aria-describedby="password-field-undefined-errortext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 MfCfr"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><button type="button" aria-label="Show password" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 dOswfI"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path><path d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(8, 73%, 47%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO cwRPCX" id="password-field-undefined-errortext-undefined" data-blade-component="base-text">Error</span></span></div></div></div></div></div>"`;
+exports[`<PasswordInput /> should display error validation state 1`] = `"<div id="root"><div data-blade-component="password-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="password-field-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter password</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  hiwnfH"><input type="password" autoCapitalize="none" enterKeyHint="done" id="password-field-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="true" aria-describedby="password-field-undefined-errortext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 ePmaXL"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><button type="button" aria-label="Show password" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jCUyST"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path><path d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div id="password-field-undefined-errortext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(4, 74%, 49%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(4, 74%, 49%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO mgsbJ" data-blade-component="text">Error</span></span></div></div></div></div></div>"`;
 
 exports[`<PasswordInput /> should display error validation state 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -127,14 +127,18 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -145,40 +149,52 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c18.c18.c18.c18.c18 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -199,53 +215,69 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -260,14 +292,14 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(9,91%,56%,0.09);
-  border-bottom-color: hsla(8,73%,47%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-bottom-color: hsla(4,74%,49%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -284,8 +316,8 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(9,91%,56%,0.09);
-  border-bottom-color: hsla(8,73%,47%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-bottom-color: hsla(4,74%,49%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -308,8 +340,8 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(9,91%,56%,0.09);
-  border-bottom-color: hsla(8,73%,47%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-bottom-color: hsla(4,74%,49%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -360,7 +392,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -370,17 +402,23 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c11.c11.c11.c11.c11:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 <div
@@ -505,6 +543,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
         <div
           class="c15"
           data-blade-component="base-box"
+          id="password-field-1-errortext-3"
         >
           <span
             class="c16"
@@ -523,18 +562,18 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
               <path
                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                 data-blade-component="svg-path"
-                fill="hsla(8, 73%, 47%, 1)"
+                fill="hsla(4, 74%, 49%, 1)"
               />
               <path
                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                 data-blade-component="svg-path"
-                fill="hsla(8, 73%, 47%, 1)"
+                fill="hsla(4, 74%, 49%, 1)"
               />
               <path
                 clip-rule="evenodd"
                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                 data-blade-component="svg-path"
-                fill="hsla(8, 73%, 47%, 1)"
+                fill="hsla(4, 74%, 49%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
@@ -544,8 +583,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
             />
             <span
               class="c18"
-              data-blade-component="base-text"
-              id="password-field-1-errortext-3"
+              data-blade-component="text"
             >
               Error
             </span>
diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap
index ac7a8c9cc50..d6ab7668cb1 100644
--- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap
@@ -103,14 +103,18 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -121,27 +125,35 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -162,53 +174,69 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -223,14 +251,14 @@ exports[`<PasswordInput /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -247,8 +275,8 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -271,8 +299,8 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -323,7 +351,7 @@ exports[`<PasswordInput /> should render 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -333,17 +361,23 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c11.c11.c11.c11.c11:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 <div>
diff --git a/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx b/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx
index 30ea2daa089..dd7c29f9646 100644
--- a/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx
+++ b/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx
@@ -170,12 +170,7 @@ export default {
           componentDescription="The TextArea component lets you enter long form text which spans over multiple lines."
           componentName="TextArea"
           apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/TextArea/_decisions/decisions.md"
-          figmaURL={{
-            paymentTheme:
-              'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11115%3A166804',
-            bankingTheme:
-              'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=10050%3A180805',
-          }}
+          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11115%3A166804'"
         >
           <Title>Usage</Title>
           <Sandbox>
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap
index 1e7581991f0..96bf78b7e72 100644
--- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap
@@ -86,23 +86,24 @@ exports[`<TextArea /> should render 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subdued.lowContrast"
+              color="surface.text.gray.subtle"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
+              fontWeight="semibold"
+              lineHeight={75}
               numberOfLines={2}
               style={
                 [
                   {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 26%, 34%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
+                    "fontWeight": "600",
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -149,7 +150,7 @@ exports[`<TextArea /> should render 1`] = `
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -159,11 +160,12 @@ exports[`<TextArea /> should render 1`] = `
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -189,8 +191,8 @@ exports[`<TextArea /> should render 1`] = `
           [
             {
               "alignItems": "flex-start",
-              "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-              "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+              "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+              "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
               "borderBottomStyle": "solid",
               "borderBottomWidth": 1,
               "borderTopLeftRadius": 2,
@@ -231,21 +233,22 @@ exports[`<TextArea /> should render 1`] = `
           onFocus={[Function]}
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
-          placeholderTextColor="hsla(214, 18%, 69%, 1)"
+          placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
           secureTextEntry={false}
           style={
             [
               {
                 "backgroundColor": "transparent",
-                "color": "hsla(216, 27%, 36%, 1)",
+                "color": "hsla(211, 26%, 34%, 1)",
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
-                "height": 48,
+                "height": 44,
+                "letterSpacing": 0,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -266,7 +269,7 @@ exports[`<TextArea /> should render 1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                "backgroundColor": "hsla(227, 100%, 59%, 1)",
                 "bottom": 0,
                 "height": 1,
                 "left": 0,
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
index fc818f885dd..b1c15956982 100644
--- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextArea /> should render TextArea on server and have autofocus on client 1`] = `"<div id="root"><div data-blade-component="textarea" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx WiWSl"><label for="textarea-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  bHuzXQ"><textarea type="text" rows="2" id="textarea-undefined-input-undefined" autofocus="" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 gLbpUv"></textarea><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
+exports[`<TextArea /> should render TextArea on server and have autofocus on client 1`] = `"<div id="root"><div data-blade-component="textarea" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx WiWSl"><label for="textarea-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  ePpXbk"><textarea type="text" rows="2" id="textarea-undefined-input-undefined" autofocus="" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 gVFbOH"></textarea><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
 
 exports[`<TextArea /> should render TextArea on server and have autofocus on client 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -76,14 +76,18 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -94,27 +98,35 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -134,53 +146,69 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -195,14 +223,14 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -223,8 +251,8 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -247,8 +275,8 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap
index d687a348afd..b3c481a3ad8 100644
--- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap
@@ -74,14 +74,18 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -92,27 +96,35 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -132,53 +144,69 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -193,14 +221,14 @@ exports[`<TextArea /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -221,8 +249,8 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -245,8 +273,8 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -432,14 +460,18 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -450,27 +482,35 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -490,53 +530,69 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -551,14 +607,14 @@ exports[`<TextArea /> should set number of lines 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -579,8 +635,8 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -603,8 +659,8 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
diff --git a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
index b507b85fe56..3f999f7a67c 100644
--- a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
+++ b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
@@ -223,12 +223,7 @@ export default {
           componentDescription="The TextInput component is a component that can be used to input name, email, telephone, url, search or plain text."
           componentName="TextInput"
           apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/TextInput/_decisions/_decisions.md"
-          figmaURL={{
-            paymentTheme:
-              'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A210737',
-            bankingTheme:
-              'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=9941%3A155140',
-          }}
+          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A210737'"
         >
           <Title>Usage</Title>
           <Sandbox>
diff --git a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap
index d9458864b69..173ffb22e5b 100644
--- a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap
@@ -84,23 +84,24 @@ exports[`<TextInput /> should render 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subdued.lowContrast"
+              color="surface.text.gray.subtle"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
+              fontWeight="semibold"
+              lineHeight={75}
               numberOfLines={2}
               style={
                 [
                   {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 26%, 34%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
+                    "fontWeight": "600",
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -147,7 +148,7 @@ exports[`<TextInput /> should render 1`] = `
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -157,11 +158,12 @@ exports[`<TextInput /> should render 1`] = `
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -186,8 +188,8 @@ exports[`<TextInput /> should render 1`] = `
         style={
           [
             {
-              "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-              "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+              "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+              "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
               "borderBottomStyle": "solid",
               "borderBottomWidth": 1,
               "borderTopLeftRadius": 2,
@@ -228,22 +230,23 @@ exports[`<TextInput /> should render 1`] = `
           onFocus={[Function]}
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
-          placeholderTextColor="hsla(214, 18%, 69%, 1)"
+          placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
           returnKeyType="default"
           secureTextEntry={false}
           style={
             [
               {
                 "backgroundColor": "transparent",
-                "color": "hsla(216, 27%, 36%, 1)",
+                "color": "hsla(211, 26%, 34%, 1)",
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "height": 36,
+                "letterSpacing": 0,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -265,7 +268,7 @@ exports[`<TextInput /> should render 1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                "backgroundColor": "hsla(227, 100%, 59%, 1)",
                 "bottom": 0,
                 "height": 1,
                 "left": 0,
@@ -396,23 +399,24 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subdued.lowContrast"
+              color="surface.text.gray.subtle"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
+              fontWeight="semibold"
+              lineHeight={75}
               numberOfLines={2}
               style={
                 [
                   {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 26%, 34%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
+                    "fontWeight": "600",
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -459,7 +463,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
             >
               <Text
                 accessible={true}
-                color="surface.text.normal.lowContrast"
+                color="surface.text.gray.normal"
                 data-blade-component="text"
                 fontFamily="text"
                 fontSize={100}
@@ -469,11 +473,12 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 14,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 20,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -498,8 +503,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
         style={
           [
             {
-              "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
-              "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+              "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+              "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
               "borderBottomStyle": "solid",
               "borderBottomWidth": 1,
               "borderTopLeftRadius": 2,
@@ -585,7 +590,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               >
                 <RNSVGPath
                   d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                  fill={4282603381}
+                  fill={4282406509}
                   propList={
                     [
                       "fill",
@@ -594,7 +599,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
                 />
                 <RNSVGPath
                   d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                  fill={4282603381}
+                  fill={4282406509}
                   propList={
                     [
                       "fill",
@@ -604,7 +609,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
                 <RNSVGPath
                   clipRule={0}
                   d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                  fill={4282603381}
+                  fill={4282406509}
                   fillRule={0}
                   propList={
                     [
@@ -628,7 +633,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.subtle"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -638,11 +643,12 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 26%, 34%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -691,7 +697,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           onKeyPress={[Function]}
           onSubmitEditing={[Function]}
           placeholder="something"
-          placeholderTextColor="hsla(214, 18%, 69%, 1)"
+          placeholderTextColor="hsla(211, 20%, 52%, 0.32)"
           prefix="https://"
           returnKeyType="go"
           secureTextEntry={false}
@@ -699,15 +705,16 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
             [
               {
                 "backgroundColor": "transparent",
-                "color": "hsla(216, 27%, 36%, 1)",
+                "color": "hsla(211, 26%, 34%, 1)",
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
-                "fontFamily": "Lato",
+                "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "height": 36,
+                "letterSpacing": 0,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -755,7 +762,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.subtle"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -765,11 +772,12 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 26%, 34%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -792,7 +800,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                "backgroundColor": "hsla(227, 100%, 59%, 1)",
                 "bottom": 0,
                 "height": 1,
                 "left": 0,
diff --git a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
index 2d986d729c8..956468c61bc 100644
--- a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextInput /> should render TextInput 1`] = `"<div id="root"><div data-blade-component="textinput" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="textinput-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Enter company website</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx hdqaij"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(216, 27%, 36%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx gqvBWc"><p class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="text">https://</p></div></div><input type="url" inputMode="url" autoCapitalize="none" enterKeyHint="go" autoComplete="off" id="textinput-undefined-input-undefined" placeholder="something" prefix="https://" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 geCSIg"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx SGzvk"><p class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="text">.com</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
+exports[`<TextInput /> should render TextInput 1`] = `"<div id="root"><div data-blade-component="textinput" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="textinput-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter company website</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx hdqaij"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx gqvBWc"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">https://</p></div></div><input type="url" inputMode="url" autoCapitalize="none" enterKeyHint="go" autoComplete="off" id="textinput-undefined-input-undefined" placeholder="something" prefix="https://" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 gpfLQk"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx SGzvk"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">.com</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
 
 exports[`<TextInput /> should render TextInput 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -106,14 +106,18 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -124,40 +128,52 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -178,53 +194,69 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c12.c12.c12.c12.c12::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -239,14 +271,14 @@ exports[`<TextInput /> should render TextInput 2`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -263,8 +295,8 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -287,8 +319,8 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -392,18 +424,18 @@ exports[`<TextInput /> should render TextInput 2`] = `
               <path
                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
               />
               <path
                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
               />
               <path
                 clip-rule="evenodd"
                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
diff --git a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap
index 1040fe675d9..b6cd2e5f960 100644
--- a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap
@@ -71,14 +71,18 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -89,27 +93,35 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -130,53 +142,69 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -191,14 +219,14 @@ exports[`<TextInput /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -215,8 +243,8 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -239,8 +267,8 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -459,14 +487,18 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -477,40 +509,52 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   -webkit-flex: 1;
@@ -531,53 +575,69 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c12.c12.c12.c12.c12::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12::placeholder {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -592,14 +652,14 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -616,8 +676,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -640,8 +700,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -743,18 +803,18 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               <path
                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
               />
               <path
                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
               />
               <path
                 clip-rule="evenodd"
                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
diff --git a/packages/blade/src/components/Link/BaseLink/BaseLink.tsx b/packages/blade/src/components/Link/BaseLink/BaseLink.tsx
index c584202a732..9c67be12828 100644
--- a/packages/blade/src/components/Link/BaseLink/BaseLink.tsx
+++ b/packages/blade/src/components/Link/BaseLink/BaseLink.tsx
@@ -2,13 +2,13 @@
 /* eslint-disable @typescript-eslint/prefer-ts-expect-error */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import type { SyntheticEvent } from 'react';
-import React, { useState } from 'react';
+import React from 'react';
 import type { CSSObject } from 'styled-components';
 import type { GestureResponderEvent } from 'react-native';
 import StyledBaseLink from './StyledBaseLink';
 import getIn from '~utils/lodashButBetter/get';
 import useInteraction from '~utils/useInteraction';
-import type { IconComponent, IconProps } from '~components/Icons';
+import type { IconColors, IconComponent, IconProps } from '~components/Icons';
 import type { Theme } from '~components/BladeProvider';
 import { useTheme } from '~components/BladeProvider';
 import BaseBox from '~components/Box/BaseBox';
@@ -22,9 +22,12 @@ import type {
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import type { Platform } from '~utils';
 import { isReactNative } from '~utils';
-import type { LinkActionStates } from '~tokens/theme/theme';
 import type { DurationString, EasingString, FontSize, Typography } from '~tokens/global';
-import type { BaseTextProps, BaseTextSizes } from '~components/Typography/BaseText/types';
+import type {
+  BaseTextProps,
+  BaseTextSizes,
+  TextColors,
+} from '~components/Typography/BaseText/types';
 import { getStringFromReactText } from '~src/utils/getStringChildren';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { getStyledProps } from '~components/Box/styledProps';
@@ -33,9 +36,10 @@ import { makeAccessible } from '~utils/makeAccessible';
 import type { BladeCommonEvents } from '~components/types';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { throwBladeError } from '~utils/logger';
+import type { ActionStates } from '~utils/useInteraction';
 
 type BaseLinkCommonProps = {
-  color?: 'default' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
+  color?: 'primary' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
   icon?: IconComponent;
   iconPosition?: 'left' | 'right';
   onClick?: (event: SyntheticEvent) => void;
@@ -145,37 +149,39 @@ type BaseLinkStyleProps = {
   lineHeight: BaseTextProps['lineHeight'];
 };
 
+type LinkActionStates = ActionStates;
 const getColorToken = ({
   variant,
   color,
-  element,
   currentInteraction,
   isDisabled,
-  isVisited,
+  element,
 }: {
   variant: BaseLinkProps['variant'];
   color: BaseLinkProps['color'];
   element: 'icon' | 'text';
-  currentInteraction: keyof LinkActionStates;
+  currentInteraction: LinkActionStates;
   isDisabled: boolean;
-  isVisited: boolean;
-}): IconProps['color'] | BaseTextProps['color'] => {
+}): IconColors | TextColors => {
   let state = currentInteraction;
+  const map = {
+    default: 'normal',
+    hover: 'subtle',
+    focus: 'normal',
+    disabled: 'disabled',
+  } as const;
+
   if (isDisabled && variant == 'button') {
     state = 'disabled';
   }
-  if (isVisited && variant == 'anchor') {
-    // visited state is only valid for anchor variant
-    state = 'visited';
-  }
 
-  if (color && color !== 'default' && state !== 'visited') {
+  if (color && color !== 'primary') {
     if (color !== 'white') {
-      return `feedback.${color}.action.${element}.link.${state}.lowContrast`;
+      return `interactive.${element}.${color}.${map[state]}`;
     }
-    return `white.action.${element}.link.${state}`;
+    return `interactive.${element}.staticWhite.${map[state]}`;
   }
-  return `action.${element}.link.${state}`;
+  return `interactive.${element}.primary.${map[state]}`;
 };
 
 const getProps = ({
@@ -185,17 +191,15 @@ const getProps = ({
   children,
   isDisabled,
   color,
-  isVisited,
   target,
   size,
 }: {
   theme: Theme;
   variant: NonNullable<BaseLinkProps['variant']>;
-  currentInteraction: keyof LinkActionStates;
+  currentInteraction: LinkActionStates;
   children?: string;
   isDisabled: boolean;
   color: BaseLinkProps['color'];
-  isVisited: boolean;
   target: BaseLinkProps['target'];
   size: NonNullable<BaseLinkProps['size']>;
 }): BaseLinkStyleProps => {
@@ -211,10 +215,10 @@ const getProps = ({
       large: 200,
     },
     lineHeight: {
-      xsmall: 50,
-      small: 50,
+      xsmall: 25,
+      small: 75,
       medium: 100,
-      large: 300,
+      large: 200,
     },
   };
 
@@ -227,7 +231,6 @@ const getProps = ({
       element: 'icon',
       currentInteraction,
       isDisabled,
-      isVisited,
     }) as IconProps['color'],
     fontSize: textSizes.fontSize[size],
     lineHeight: textSizes.lineHeight[size],
@@ -239,9 +242,8 @@ const getProps = ({
       element: 'text',
       currentInteraction,
       isDisabled,
-      isVisited,
     }) as BaseTextProps['color'],
-    focusRingColor: getIn(theme.colors, 'brand.primary.400'),
+    focusRingColor: getIn(theme.colors, 'interactive.background.primary.faded'),
     motionDuration: 'duration.2xquick',
     motionEasing: 'easing.standard.effective',
     cursor: isButton && isDisabled ? 'not-allowed' : 'pointer',
@@ -266,7 +268,7 @@ const _BaseLink: React.ForwardRefRenderFunction<BladeElementRef, BaseLinkProps>
     href,
     target,
     rel,
-    color = 'default',
+    color = 'primary',
     accessibilityProps,
     // @ts-expect-error avoiding exposing to public
     className,
@@ -288,7 +290,6 @@ const _BaseLink: React.ForwardRefRenderFunction<BladeElementRef, BaseLinkProps>
   },
   ref,
 ) => {
-  const [isVisited, setIsVisited] = useState(false);
   const childrenString = getStringFromReactText(children);
   const { currentInteraction, setCurrentInteraction, ...syntheticEvents } = useInteraction();
   const { theme } = useTheme();
@@ -324,17 +325,11 @@ const _BaseLink: React.ForwardRefRenderFunction<BladeElementRef, BaseLinkProps>
     children: childrenString,
     isDisabled,
     color,
-    isVisited,
     target,
     size,
   });
 
   const handleOnClick = (event: SyntheticEvent): void => {
-    if (!isVisited && variant === 'anchor') {
-      // visited state is only valid for anchor variant
-      setIsVisited(true);
-    }
-
     if (onClick) {
       onClick(event);
     }
@@ -412,7 +407,7 @@ const _BaseLink: React.ForwardRefRenderFunction<BladeElementRef, BaseLinkProps>
           fontSize={fontSize}
           lineHeight={lineHeight}
           textAlign="center"
-          fontWeight="bold"
+          fontWeight="medium"
         >
           {children}
         </BaseText>
diff --git a/packages/blade/src/components/Link/BaseLink/StyledBaseLink.native.tsx b/packages/blade/src/components/Link/BaseLink/StyledBaseLink.native.tsx
index 0af4820d224..a100d768408 100644
--- a/packages/blade/src/components/Link/BaseLink/StyledBaseLink.native.tsx
+++ b/packages/blade/src/components/Link/BaseLink/StyledBaseLink.native.tsx
@@ -80,7 +80,7 @@ const _StyledLink: React.ForwardRefRenderFunction<
       {...accessibilityProps}
       disabled={disabled}
       onPress={handleOnPress}
-      onPressIn={(): void => setCurrentInteraction('active')}
+      onPressIn={(): void => setCurrentInteraction('focus')}
       onPressOut={(): void => setCurrentInteraction('default')}
       onTouchStart={castNativeType(onTouchStart)}
       onTouchEnd={castNativeType(onTouchEnd)}
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/BaseLink.native.test.tsx b/packages/blade/src/components/Link/BaseLink/__tests__/BaseLink.native.test.tsx
index 1f98a2ea5c8..be1c4461a51 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/BaseLink.native.test.tsx
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/BaseLink.native.test.tsx
@@ -14,7 +14,7 @@ beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
 afterAll(() => jest.restoreAllMocks());
 
 const colors: BaseLinkProps['color'][] = [
-  'default',
+  'primary',
   'white',
   'positive',
   'negative',
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/BaseLink.web.test.tsx b/packages/blade/src/components/Link/BaseLink/__tests__/BaseLink.web.test.tsx
index fbd0ffff96c..e6f08c73220 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/BaseLink.web.test.tsx
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/BaseLink.web.test.tsx
@@ -4,13 +4,13 @@ import BaseLink from '../BaseLink';
 import assertAccessible from '~utils/testing/assertAccessible.web';
 import renderWithTheme from '~utils/testing/renderWithTheme.web';
 import { InfoIcon } from '~components/Icons';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 
 beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
 afterAll(() => jest.restoreAllMocks());
 
 const colors: BaseLinkProps['color'][] = [
-  'default',
+  'primary',
   'white',
   'positive',
   'negative',
@@ -229,19 +229,19 @@ describe('<BaseLink />', () => {
     // default state
     const linkButtonText = getByText(textContent);
     expect(linkButtonText).toHaveStyle({
-      color: paymentTheme.colors.onLight.action.text.link.default,
+      color: bladeTheme.colors.onLight.interactive.text.primary.normal,
     });
 
     // click and focus
     fireEvent.focus(linkButtonText);
     expect(linkButtonText).toHaveStyle({
-      color: paymentTheme.colors.onLight.action.text.link.focus,
+      color: bladeTheme.colors.onLight.interactive.text.primary.normal,
     });
 
     // click outside
     fireEvent.focusOut(linkButtonText);
     expect(linkButtonText).toHaveStyle({
-      color: paymentTheme.colors.onLight.action.text.link.default,
+      color: bladeTheme.colors.onLight.interactive.text.primary.normal,
     });
   });
 });
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
index 5e92a131fd0..51264a1441d 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
@@ -77,19 +77,20 @@ exports[`<BaseLink /> should change the link to a visited state after click 1`]
     >
       <Text
         accessible={true}
-        color="action.text.link.visited"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(268, 100%, 79%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -191,19 +192,20 @@ exports[`<BaseLink /> should not change the button to a visited state after clic
     >
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -305,133 +307,20 @@ exports[`<BaseLink /> should render button variant of link 1`] = `
     >
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 20,
-              "marginBottom": 0,
-              "marginLeft": 0,
-              "marginRight": 0,
-              "marginTop": 0,
-              "paddingBottom": 0,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 0,
-              "textAlign": "center",
-              "textDecorationLine": "none",
-            },
-          ]
-        }
-        textAlign="center"
-        textDecorationLine="none"
-      >
-        Learn More
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<BaseLink /> should render default color link 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    accessibilityRole="link"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": false,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      [
-        {
-          "alignSelf": "flex-start",
-          "backgroundColor": "transparent",
-          "borderColor": "black",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "outline": "none",
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationColor": "black",
-          "textDecorationLine": "none",
-          "textDecorationStyle": "solid",
-        },
-      ]
-    }
-  >
-    <View
-      alignItems="center"
-      className="content-container"
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="row"
-      style={
-        [
-          {
-            "alignItems": "center",
-            "display": "flex",
-            "flexDirection": "row",
-          },
-        ]
-      }
-    >
-      <Text
-        accessible={true}
-        color="action.text.link.default"
-        data-blade-component="base-text"
-        fontSize={100}
-        fontWeight="bold"
-        lineHeight={100}
-        style={
-          [
-            {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 14,
-              "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -533,19 +422,20 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
     >
       <Text
         accessible={true}
-        color="action.text.link.disabled"
+        color="interactive.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 19%, 81%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 0.18)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -570,7 +460,7 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
 </View>
 `;
 
-exports[`<BaseLink /> should render disabled default color link 1`] = `
+exports[`<BaseLink /> should render disabled information color link 1`] = `
 <View
   style={
     {
@@ -647,19 +537,20 @@ exports[`<BaseLink /> should render disabled default color link 1`] = `
     >
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.information.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(200, 84%, 37%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -684,7 +575,7 @@ exports[`<BaseLink /> should render disabled default color link 1`] = `
 </View>
 `;
 
-exports[`<BaseLink /> should render disabled information color link 1`] = `
+exports[`<BaseLink /> should render disabled negative color link 1`] = `
 <View
   style={
     {
@@ -761,19 +652,20 @@ exports[`<BaseLink /> should render disabled information color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.information.action.text.link.default.lowContrast"
+        color="interactive.text.negative.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(195, 100%, 31%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(4, 74%, 49%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -798,7 +690,7 @@ exports[`<BaseLink /> should render disabled information color link 1`] = `
 </View>
 `;
 
-exports[`<BaseLink /> should render disabled negative color link 1`] = `
+exports[`<BaseLink /> should render disabled neutral color link 1`] = `
 <View
   style={
     {
@@ -875,19 +767,20 @@ exports[`<BaseLink /> should render disabled negative color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.link.default.lowContrast"
+        color="interactive.text.neutral.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(8, 73%, 47%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(211, 33%, 21%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -912,7 +805,7 @@ exports[`<BaseLink /> should render disabled negative color link 1`] = `
 </View>
 `;
 
-exports[`<BaseLink /> should render disabled neutral color link 1`] = `
+exports[`<BaseLink /> should render disabled notice color link 1`] = `
 <View
   style={
     {
@@ -989,19 +882,20 @@ exports[`<BaseLink /> should render disabled neutral color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.neutral.action.text.link.default.lowContrast"
+        color="interactive.text.notice.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 27%, 36%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(25, 85%, 42%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1026,7 +920,7 @@ exports[`<BaseLink /> should render disabled neutral color link 1`] = `
 </View>
 `;
 
-exports[`<BaseLink /> should render disabled notice color link 1`] = `
+exports[`<BaseLink /> should render disabled positive color link 1`] = `
 <View
   style={
     {
@@ -1103,19 +997,20 @@ exports[`<BaseLink /> should render disabled notice color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.notice.action.text.link.default.lowContrast"
+        color="interactive.text.positive.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(38, 97%, 38%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(150, 100%, 27%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1140,7 +1035,7 @@ exports[`<BaseLink /> should render disabled notice color link 1`] = `
 </View>
 `;
 
-exports[`<BaseLink /> should render disabled positive color link 1`] = `
+exports[`<BaseLink /> should render disabled primary color link 1`] = `
 <View
   style={
     {
@@ -1217,19 +1112,20 @@ exports[`<BaseLink /> should render disabled positive color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.link.default.lowContrast"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(160, 100%, 26%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1331,19 +1227,20 @@ exports[`<BaseLink /> should render disabled white color link 1`] = `
     >
       <Text
         accessible={true}
-        color="white.action.text.link.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1500,7 +1397,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1509,7 +1406,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1519,7 +1416,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4279461105}
+              fill={4280897755}
               fillRule={0}
               propList={
                 [
@@ -1533,19 +1430,20 @@ exports[`<BaseLink /> should render icon only link 1`] = `
       </View>
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1645,19 +1543,20 @@ exports[`<BaseLink /> should render information color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.information.action.text.link.default.lowContrast"
+        color="interactive.text.information.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(195, 100%, 31%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(200, 84%, 37%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1759,19 +1658,20 @@ exports[`<BaseLink /> should render link with default properties 1`] = `
     >
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1928,7 +1828,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1937,7 +1837,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1947,7 +1847,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4279461105}
+              fill={4280897755}
               fillRule={0}
               propList={
                 [
@@ -1961,19 +1861,20 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
       </View>
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2130,7 +2031,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -2139,7 +2040,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -2149,7 +2050,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4279461105}
+              fill={4280897755}
               fillRule={0}
               propList={
                 [
@@ -2163,19 +2064,20 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
       </View>
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2277,19 +2179,20 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
     >
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2366,7 +2269,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -2375,7 +2278,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -2385,7 +2288,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4279461105}
+              fill={4280897755}
               fillRule={0}
               propList={
                 [
@@ -2479,19 +2382,20 @@ exports[`<BaseLink /> should render negative color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.negative.action.text.link.default.lowContrast"
+        color="interactive.text.negative.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(8, 73%, 47%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(4, 74%, 49%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2593,19 +2497,20 @@ exports[`<BaseLink /> should render neutral color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.neutral.action.text.link.default.lowContrast"
+        color="interactive.text.neutral.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 27%, 36%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(211, 33%, 21%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2707,19 +2612,20 @@ exports[`<BaseLink /> should render notice color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.notice.action.text.link.default.lowContrast"
+        color="interactive.text.notice.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(38, 97%, 38%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(25, 85%, 42%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2821,19 +2727,135 @@ exports[`<BaseLink /> should render positive color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.positive.action.text.link.default.lowContrast"
+        color="interactive.text.positive.normal"
+        data-blade-component="base-text"
+        fontSize={100}
+        fontWeight="medium"
+        lineHeight={100}
+        style={
+          [
+            {
+              "color": "hsla(150, 100%, 27%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
+              "fontStyle": "normal",
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 20,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 0,
+              "marginTop": 0,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "textAlign": "center",
+              "textDecorationLine": "none",
+            },
+          ]
+        }
+        textAlign="center"
+        textDecorationLine="none"
+      >
+        Learn More
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`<BaseLink /> should render primary color link 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityRole="link"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "backgroundColor": "transparent",
+          "borderColor": "black",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "outline": "none",
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 0,
+          "textDecorationColor": "black",
+          "textDecorationLine": "none",
+          "textDecorationStyle": "solid",
+        },
+      ]
+    }
+  >
+    <View
+      alignItems="center"
+      className="content-container"
+      data-blade-component="base-box"
+      display="flex"
+      flexDirection="row"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "flexDirection": "row",
+          },
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(160, 100%, 26%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -2935,19 +2957,20 @@ exports[`<BaseLink /> should render white color link 1`] = `
     >
       <Text
         accessible={true}
-        color="white.action.text.link.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap
index f355836a93d..1c08357c64b 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseLink /> should render link with a default rel set when target is _blank 1`] = `"<div id="root"><a data-blade-component="link" href="https://www.google.com/" target="_blank" rel="noreferrer noopener" class="StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 csnivf" role="link" aria-disabled="false"><span class="BaseBox-bmPWx fAEwZa content-container" data-blade-component="base-box"><span class="StyledBaseText-dVBfTO iPAIis" data-blade-component="base-text">Learn More</span></span></a></div>"`;
+exports[`<BaseLink /> should render link with a default rel set when target is _blank 1`] = `"<div id="root"><a data-blade-component="link" href="https://www.google.com/" target="_blank" rel="noreferrer noopener" class="StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 eEDbkf" role="link" aria-disabled="false"><span class="BaseBox-bmPWx fAEwZa content-container" data-blade-component="base-box"><span class="StyledBaseText-dVBfTO jSJOXK" data-blade-component="base-text">Learn More</span></span></a></div>"`;
 
 exports[`<BaseLink /> should render link with a default rel set when target is _blank 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -29,7 +29,7 @@ exports[`<BaseLink /> should render link with a default rel set when target is _
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -56,14 +56,18 @@ exports[`<BaseLink /> should render link with a default rel set when target is _
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap
index 360664a53d8..08f673c25ef 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<BaseLink /> should change the link to a visited state after click 1`]
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -54,14 +54,18 @@ exports[`<BaseLink /> should change the link to a visited state after click 1`]
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(268,100%,79%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -119,7 +123,7 @@ exports[`<BaseLink /> should not change the button to a visited state after clic
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -146,14 +150,18 @@ exports[`<BaseLink /> should not change the button to a visited state after clic
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -209,7 +217,7 @@ exports[`<BaseLink /> should render button variant of link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -236,14 +244,18 @@ exports[`<BaseLink /> should render button variant of link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -272,95 +284,6 @@ exports[`<BaseLink /> should render button variant of link 1`] = `
 </div>
 `;
 
-exports[`<BaseLink /> should render default color link 1`] = `
-.c0.c0.c0.c0.c0 {
-  padding: 0;
-  background-color: transparent;
-  outline: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border: none;
-  cursor: pointer;
-  display: inline-block;
-  border-radius: 2px;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  -webkit-transition-duration: 70ms;
-  transition-duration: 70ms;
-}
-
-.c0.c0.c0.c0.c0 .content-container {
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
-  border-radius: 2px;
-}
-
-.c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-}
-
-.c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
-  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-  -webkit-transition-duration: 70ms;
-  transition-duration: 70ms;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <a
-    aria-disabled="false"
-    class="c0"
-    data-blade-component="link"
-    role="link"
-  >
-    <span
-      class="c1 content-container"
-      data-blade-component="base-box"
-    >
-      <span
-        class="c2"
-        data-blade-component="base-text"
-      >
-        Learn More
-      </span>
-    </span>
-  </a>
-</div>
-`;
-
 exports[`<BaseLink /> should render disabled button variant of link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
@@ -388,7 +311,7 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -415,14 +338,18 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,19%,81%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -452,7 +379,7 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
 </div>
 `;
 
-exports[`<BaseLink /> should render disabled default color link 1`] = `
+exports[`<BaseLink /> should render disabled information color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -479,7 +406,7 @@ exports[`<BaseLink /> should render disabled default color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -506,14 +433,18 @@ exports[`<BaseLink /> should render disabled default color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,37%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -541,7 +472,7 @@ exports[`<BaseLink /> should render disabled default color link 1`] = `
 </div>
 `;
 
-exports[`<BaseLink /> should render disabled information color link 1`] = `
+exports[`<BaseLink /> should render disabled negative color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -568,7 +499,7 @@ exports[`<BaseLink /> should render disabled information color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -595,14 +526,18 @@ exports[`<BaseLink /> should render disabled information color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(195,100%,31%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -630,7 +565,7 @@ exports[`<BaseLink /> should render disabled information color link 1`] = `
 </div>
 `;
 
-exports[`<BaseLink /> should render disabled negative color link 1`] = `
+exports[`<BaseLink /> should render disabled neutral color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -657,7 +592,7 @@ exports[`<BaseLink /> should render disabled negative color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -684,14 +619,18 @@ exports[`<BaseLink /> should render disabled negative color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -719,7 +658,7 @@ exports[`<BaseLink /> should render disabled negative color link 1`] = `
 </div>
 `;
 
-exports[`<BaseLink /> should render disabled neutral color link 1`] = `
+exports[`<BaseLink /> should render disabled notice color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -746,7 +685,7 @@ exports[`<BaseLink /> should render disabled neutral color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -773,14 +712,18 @@ exports[`<BaseLink /> should render disabled neutral color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,85%,42%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -808,7 +751,7 @@ exports[`<BaseLink /> should render disabled neutral color link 1`] = `
 </div>
 `;
 
-exports[`<BaseLink /> should render disabled notice color link 1`] = `
+exports[`<BaseLink /> should render disabled positive color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -835,7 +778,7 @@ exports[`<BaseLink /> should render disabled notice color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -862,14 +805,18 @@ exports[`<BaseLink /> should render disabled notice color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(38,97%,38%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -897,7 +844,7 @@ exports[`<BaseLink /> should render disabled notice color link 1`] = `
 </div>
 `;
 
-exports[`<BaseLink /> should render disabled positive color link 1`] = `
+exports[`<BaseLink /> should render disabled primary color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -924,7 +871,7 @@ exports[`<BaseLink /> should render disabled positive color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -951,14 +898,18 @@ exports[`<BaseLink /> should render disabled positive color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1013,7 +964,7 @@ exports[`<BaseLink /> should render disabled white color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1041,13 +992,17 @@ exports[`<BaseLink /> should render disabled white color link 1`] = `
 
 .c2.c2.c2.c2.c2 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1102,7 +1057,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1141,14 +1096,18 @@ exports[`<BaseLink /> should render icon only link 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1181,18 +1140,18 @@ exports[`<BaseLink /> should render icon only link 1`] = `
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
             fill-rule="evenodd"
           />
         </svg>
@@ -1233,7 +1192,7 @@ exports[`<BaseLink /> should render information color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1260,14 +1219,18 @@ exports[`<BaseLink /> should render information color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(195,100%,31%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,37%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1322,7 +1285,7 @@ exports[`<BaseLink /> should render link with default properties 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1349,14 +1312,18 @@ exports[`<BaseLink /> should render link with default properties 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1411,7 +1378,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1450,14 +1417,18 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1490,18 +1461,18 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
             fill-rule="evenodd"
           />
         </svg>
@@ -1544,7 +1515,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1583,14 +1554,18 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1623,18 +1598,18 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
             fill-rule="evenodd"
           />
         </svg>
@@ -1677,7 +1652,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1716,14 +1691,18 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1762,18 +1741,18 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
             fill-rule="evenodd"
           />
         </svg>
@@ -1810,7 +1789,7 @@ exports[`<BaseLink /> should render negative color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1837,14 +1816,18 @@ exports[`<BaseLink /> should render negative color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(8,73%,47%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1899,7 +1882,7 @@ exports[`<BaseLink /> should render neutral color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1926,14 +1909,18 @@ exports[`<BaseLink /> should render neutral color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1988,7 +1975,7 @@ exports[`<BaseLink /> should render notice color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -2015,14 +2002,18 @@ exports[`<BaseLink /> should render notice color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(38,97%,38%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,85%,42%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2077,7 +2068,100 @@ exports[`<BaseLink /> should render positive color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
+}
+
+.c0.c0.c0.c0.c0 * {
+  -webkit-transition-property: color,fill;
+  transition-property: color,fill;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2.c2.c2.c2.c2 {
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+<div>
+  <a
+    aria-disabled="false"
+    class="c0"
+    data-blade-component="link"
+    role="link"
+  >
+    <span
+      class="c1 content-container"
+      data-blade-component="base-box"
+    >
+      <span
+        class="c2"
+        data-blade-component="base-text"
+      >
+        Learn More
+      </span>
+    </span>
+  </a>
+</div>
+`;
+
+exports[`<BaseLink /> should render primary color link 1`] = `
+.c0.c0.c0.c0.c0 {
+  padding: 0;
+  background-color: transparent;
+  outline: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  border-radius: 2px;
+  -webkit-transition-property: box-shadow;
+  transition-property: box-shadow;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+}
+
+.c0.c0.c0.c0.c0 .content-container {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  border-radius: 2px;
+}
+
+.c0.c0.c0.c0.c0:focus-visible .content-container {
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -2104,14 +2188,18 @@ exports[`<BaseLink /> should render positive color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -2166,7 +2254,7 @@ exports[`<BaseLink /> should render white color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -2194,13 +2282,17 @@ exports[`<BaseLink /> should render white color link 1`] = `
 
 .c2.c2.c2.c2.c2 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
diff --git a/packages/blade/src/components/Link/BaseLink/types.ts b/packages/blade/src/components/Link/BaseLink/types.ts
index 8fdbc5adc4f..8740efe1f5e 100644
--- a/packages/blade/src/components/Link/BaseLink/types.ts
+++ b/packages/blade/src/components/Link/BaseLink/types.ts
@@ -2,10 +2,10 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { CSSObject } from 'styled-components';
 import type { BaseLinkProps } from './BaseLink';
 import type { DurationString, EasingString } from '~tokens/global';
-import type { ActionStates } from '~tokens/theme/theme';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { TestID } from '~utils/types';
 import type { BladeCommonEvents } from '~components/types';
+import type { ActionStates } from '~utils/useInteraction';
 
 export type StyledBaseLinkProps = {
   variant: BaseLinkProps['variant'];
@@ -22,7 +22,7 @@ export type StyledBaseLinkProps = {
   disabled: boolean;
   motionDuration: DurationString;
   motionEasing: EasingString;
-  setCurrentInteraction: Dispatch<SetStateAction<keyof ActionStates>>;
+  setCurrentInteraction: Dispatch<SetStateAction<ActionStates>>;
   accessibilityProps: Record<string, unknown>;
   type?: 'button';
   size?: 'small' | 'medium';
diff --git a/packages/blade/src/components/Link/Link/Link.stories.tsx b/packages/blade/src/components/Link/Link/Link.stories.tsx
index c8eb0cfcdc1..10380857e6e 100644
--- a/packages/blade/src/components/Link/Link/Link.stories.tsx
+++ b/packages/blade/src/components/Link/Link/Link.stories.tsx
@@ -20,12 +20,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentDescription="This is the Link component which can be used for showing external or internal Links to the user. The Link component can also be used as an inline button in certain cases with the `button` variant"
       componentName="Link"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=12699%3A147155',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=10564%3A195587',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=12699%3A147155"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Link/Link/Link.tsx b/packages/blade/src/components/Link/Link/Link.tsx
index 5403e3e9f26..53d1621facd 100644
--- a/packages/blade/src/components/Link/Link/Link.tsx
+++ b/packages/blade/src/components/Link/Link/Link.tsx
@@ -13,7 +13,7 @@ import type { BladeCommonEvents } from '~components/types';
 type LinkCommonProps = {
   variant?: 'anchor' | 'button';
   icon?: IconComponent;
-  color?: 'default' | 'white' | 'neutral';
+  color?: 'primary' | 'white' | 'neutral';
   iconPosition?: 'left' | 'right';
   isDisabled?: boolean;
   onClick?: (event: SyntheticEvent) => void;
@@ -123,7 +123,7 @@ const _Link: React.ForwardRefRenderFunction<BladeElementRef, LinkProps> = (
     isDisabled = false,
     onClick,
     variant = 'anchor',
-    color = 'default',
+    color = 'primary',
     href,
     target,
     rel,
diff --git a/packages/blade/src/components/Link/Link/__tests__/Link.native.test.tsx b/packages/blade/src/components/Link/Link/__tests__/Link.native.test.tsx
index 1e8bfa8b88c..89e0cd6c837 100644
--- a/packages/blade/src/components/Link/Link/__tests__/Link.native.test.tsx
+++ b/packages/blade/src/components/Link/Link/__tests__/Link.native.test.tsx
@@ -13,7 +13,7 @@ jest.mock('react-native/Libraries/Linking/Linking', () => ({
 beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
 afterAll(() => jest.restoreAllMocks());
 
-const colors: LinkProps['color'][] = ['default', 'white', 'neutral'];
+const colors: LinkProps['color'][] = ['primary', 'white', 'neutral'];
 
 describe('<Link />', () => {
   it('should render link with default properties', () => {
diff --git a/packages/blade/src/components/Link/Link/__tests__/Link.web.test.tsx b/packages/blade/src/components/Link/Link/__tests__/Link.web.test.tsx
index f179c57e186..314f8905ee7 100644
--- a/packages/blade/src/components/Link/Link/__tests__/Link.web.test.tsx
+++ b/packages/blade/src/components/Link/Link/__tests__/Link.web.test.tsx
@@ -8,7 +8,7 @@ import { InfoIcon } from '~components/Icons';
 beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
 afterAll(() => jest.restoreAllMocks());
 
-const colors: LinkProps['color'][] = ['default', 'white', 'neutral'];
+const colors: LinkProps['color'][] = ['primary', 'white', 'neutral'];
 
 describe('<Link />', () => {
   it('should render link with default properties', () => {
diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
index 2ba42424663..19ea803bb75 100644
--- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
+++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
@@ -77,133 +77,20 @@ exports[`<Link /> should render button variant of link 1`] = `
     >
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 20,
-              "marginBottom": 0,
-              "marginLeft": 0,
-              "marginRight": 0,
-              "marginTop": 0,
-              "paddingBottom": 0,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 0,
-              "textAlign": "center",
-              "textDecorationLine": "none",
-            },
-          ]
-        }
-        textAlign="center"
-        textDecorationLine="none"
-      >
-        Learn More
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<Link /> should render default color link 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    accessibilityRole="link"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": false,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      [
-        {
-          "alignSelf": "flex-start",
-          "backgroundColor": "transparent",
-          "borderColor": "black",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "outline": "none",
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationColor": "black",
-          "textDecorationLine": "none",
-          "textDecorationStyle": "solid",
-        },
-      ]
-    }
-  >
-    <View
-      alignItems="center"
-      className="content-container"
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="row"
-      style={
-        [
-          {
-            "alignItems": "center",
-            "display": "flex",
-            "flexDirection": "row",
-          },
-        ]
-      }
-    >
-      <Text
-        accessible={true}
-        color="action.text.link.default"
-        data-blade-component="base-text"
-        fontSize={100}
-        fontWeight="bold"
-        lineHeight={100}
-        style={
-          [
-            {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
-              "fontSize": 14,
-              "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -305,19 +192,20 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
     >
       <Text
         accessible={true}
-        color="action.text.link.disabled"
+        color="interactive.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 19%, 81%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 100%, 59%, 0.18)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -342,7 +230,7 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
 </View>
 `;
 
-exports[`<Link /> should render disabled default color link 1`] = `
+exports[`<Link /> should render disabled neutral color link 1`] = `
 <View
   style={
     {
@@ -419,19 +307,20 @@ exports[`<Link /> should render disabled default color link 1`] = `
     >
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.neutral.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(211, 33%, 21%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -456,7 +345,7 @@ exports[`<Link /> should render disabled default color link 1`] = `
 </View>
 `;
 
-exports[`<Link /> should render disabled neutral color link 1`] = `
+exports[`<Link /> should render disabled primary color link 1`] = `
 <View
   style={
     {
@@ -533,19 +422,20 @@ exports[`<Link /> should render disabled neutral color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.neutral.action.text.link.default.lowContrast"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 27%, 36%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -647,19 +537,20 @@ exports[`<Link /> should render disabled white color link 1`] = `
     >
       <Text
         accessible={true}
-        color="white.action.text.link.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -761,19 +652,20 @@ exports[`<Link /> should render link with default properties 1`] = `
     >
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -930,7 +822,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -939,7 +831,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -949,7 +841,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4279461105}
+              fill={4280897755}
               fillRule={0}
               propList={
                 [
@@ -963,19 +855,20 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
       </View>
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1132,7 +1025,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1141,7 +1034,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1151,7 +1044,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4279461105}
+              fill={4280897755}
               fillRule={0}
               propList={
                 [
@@ -1165,19 +1058,20 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
       </View>
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1279,19 +1173,20 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
     >
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1368,7 +1263,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1377,7 +1272,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1387,7 +1282,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4279461105}
+              fill={4280897755}
               fillRule={0}
               propList={
                 [
@@ -1536,7 +1431,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1545,7 +1440,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1555,7 +1450,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4279461105}
+              fill={4280897755}
               fillRule={0}
               propList={
                 [
@@ -1569,19 +1464,20 @@ exports[`<Link /> should render link with icon without text 1`] = `
       </View>
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1681,19 +1577,135 @@ exports[`<Link /> should render neutral color link 1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.neutral.action.text.link.default.lowContrast"
+        color="interactive.text.neutral.normal"
+        data-blade-component="base-text"
+        fontSize={100}
+        fontWeight="medium"
+        lineHeight={100}
+        style={
+          [
+            {
+              "color": "hsla(211, 33%, 21%, 1)",
+              "fontFamily": "Inter",
+              "fontSize": 14,
+              "fontStyle": "normal",
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 20,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 0,
+              "marginTop": 0,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "textAlign": "center",
+              "textDecorationLine": "none",
+            },
+          ]
+        }
+        textAlign="center"
+        textDecorationLine="none"
+      >
+        Learn More
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`<Link /> should render primary color link 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityRole="link"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignSelf": "flex-start",
+          "backgroundColor": "transparent",
+          "borderColor": "black",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "outline": "none",
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 0,
+          "textDecorationColor": "black",
+          "textDecorationLine": "none",
+          "textDecorationStyle": "solid",
+        },
+      ]
+    }
+  >
+    <View
+      alignItems="center"
+      className="content-container"
+      data-blade-component="base-box"
+      display="flex"
+      flexDirection="row"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "flexDirection": "row",
+          },
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(216, 27%, 36%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1795,19 +1807,20 @@ exports[`<Link /> should render white color link 1`] = `
     >
       <Text
         accessible={true}
-        color="white.action.text.link.default"
+        color="interactive.text.staticWhite.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1964,7 +1977,7 @@ exports[`<Link /> should render with small size 1`] = `
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1973,7 +1986,7 @@ exports[`<Link /> should render with small size 1`] = `
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4279461105}
+              fill={4280897755}
               propList={
                 [
                   "fill",
@@ -1983,7 +1996,7 @@ exports[`<Link /> should render with small size 1`] = `
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4279461105}
+              fill={4280897755}
               fillRule={0}
               propList={
                 [
@@ -1997,20 +2010,21 @@ exports[`<Link /> should render with small size 1`] = `
       </View>
       <Text
         accessible={true}
-        color="action.text.link.default"
+        color="interactive.text.primary.normal"
         data-blade-component="base-text"
         fontSize={75}
-        fontWeight="bold"
-        lineHeight={50}
+        fontWeight="medium"
+        lineHeight={75}
         style={
           [
             {
-              "color": "hsla(218, 89%, 51%, 1)",
-              "fontFamily": "Lato",
+              "color": "hsla(227, 71%, 51%, 1)",
+              "fontFamily": "Inter",
               "fontSize": 12,
               "fontStyle": "normal",
-              "fontWeight": "700",
-              "lineHeight": 16,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 18,
               "marginBottom": 0,
               "marginLeft": 0,
               "marginRight": 0,
diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap
index 441fe2d05fd..4fcaaa26b96 100644
--- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Link /> should render link with a default rel set when target is _blank 1`] = `"<div id="root"><a data-blade-component="link" href="https://www.google.com/" target="_blank" rel="noreferrer noopener" class="StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 csnivf" role="link" aria-disabled="false"><span class="BaseBox-bmPWx fAEwZa content-container" data-blade-component="base-box"><span class="StyledBaseText-dVBfTO iPAIis" data-blade-component="base-text">Learn More</span></span></a></div>"`;
+exports[`<Link /> should render link with a default rel set when target is _blank 1`] = `"<div id="root"><a data-blade-component="link" href="https://www.google.com/" target="_blank" rel="noreferrer noopener" class="StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 eEDbkf" role="link" aria-disabled="false"><span class="BaseBox-bmPWx fAEwZa content-container" data-blade-component="base-box"><span class="StyledBaseText-dVBfTO jSJOXK" data-blade-component="base-text">Learn More</span></span></a></div>"`;
 
 exports[`<Link /> should render link with a default rel set when target is _blank 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -29,7 +29,7 @@ exports[`<Link /> should render link with a default rel set when target is _blan
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -56,14 +56,18 @@ exports[`<Link /> should render link with a default rel set when target is _blan
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap
index a1f174aac6c..70dfb56e971 100644
--- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap
+++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<Link /> should render button variant of link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -54,14 +54,18 @@ exports[`<Link /> should render button variant of link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -90,7 +94,7 @@ exports[`<Link /> should render button variant of link 1`] = `
 </div>
 `;
 
-exports[`<Link /> should render default color link 1`] = `
+exports[`<Link /> should render disabled button variant of link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -98,7 +102,7 @@ exports[`<Link /> should render default color link 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border: none;
-  cursor: pointer;
+  cursor: not-allowed;
   display: inline-block;
   border-radius: 2px;
   -webkit-transition-property: box-shadow;
@@ -117,7 +121,7 @@ exports[`<Link /> should render default color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -144,25 +148,31 @@ exports[`<Link /> should render default color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 <div>
-  <a
-    aria-disabled="false"
+  <button
+    aria-disabled="true"
     class="c0"
     data-blade-component="link"
-    role="link"
+    disabled=""
+    role="button"
+    type="button"
   >
     <span
       class="c1 content-container"
@@ -175,11 +185,11 @@ exports[`<Link /> should render default color link 1`] = `
         Learn More
       </span>
     </span>
-  </a>
+  </button>
 </div>
 `;
 
-exports[`<Link /> should render disabled button variant of link 1`] = `
+exports[`<Link /> should render disabled neutral color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -187,7 +197,7 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border: none;
-  cursor: not-allowed;
+  cursor: pointer;
   display: inline-block;
   border-radius: 2px;
   -webkit-transition-property: box-shadow;
@@ -206,7 +216,7 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -233,27 +243,29 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,19%,81%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 <div>
-  <button
-    aria-disabled="true"
+  <a
+    aria-disabled="false"
     class="c0"
     data-blade-component="link"
-    disabled=""
-    role="button"
-    type="button"
+    role="link"
   >
     <span
       class="c1 content-container"
@@ -266,11 +278,11 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
         Learn More
       </span>
     </span>
-  </button>
+  </a>
 </div>
 `;
 
-exports[`<Link /> should render disabled default color link 1`] = `
+exports[`<Link /> should render disabled primary color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -297,7 +309,7 @@ exports[`<Link /> should render disabled default color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -324,14 +336,18 @@ exports[`<Link /> should render disabled default color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -359,7 +375,7 @@ exports[`<Link /> should render disabled default color link 1`] = `
 </div>
 `;
 
-exports[`<Link /> should render disabled neutral color link 1`] = `
+exports[`<Link /> should render disabled white color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -386,7 +402,7 @@ exports[`<Link /> should render disabled neutral color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -413,14 +429,18 @@ exports[`<Link /> should render disabled neutral color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -448,7 +468,7 @@ exports[`<Link /> should render disabled neutral color link 1`] = `
 </div>
 `;
 
-exports[`<Link /> should render disabled white color link 1`] = `
+exports[`<Link /> should render link with default properties 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -475,7 +495,7 @@ exports[`<Link /> should render disabled white color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -502,14 +522,18 @@ exports[`<Link /> should render disabled white color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -537,7 +561,7 @@ exports[`<Link /> should render disabled white color link 1`] = `
 </div>
 `;
 
-exports[`<Link /> should render link with default properties 1`] = `
+exports[`<Link /> should render link with icon with default iconPosition 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -564,7 +588,7 @@ exports[`<Link /> should render link with default properties 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -591,14 +615,30 @@ exports[`<Link /> should render link with default properties 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-right: 4px;
+}
+
+.c3.c3.c3.c3.c3 {
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -617,6 +657,38 @@ exports[`<Link /> should render link with default properties 1`] = `
     >
       <span
         class="c2"
+        data-blade-component="base-box"
+      >
+        <svg
+          aria-hidden="true"
+          class="Svgweb__StyledSvg-vcmjs8-0"
+          data-blade-component="icon"
+          fill="none"
+          height="16px"
+          viewBox="0 0 24 24"
+          width="16px"
+        >
+          <path
+            d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
+            data-blade-component="svg-path"
+            fill="hsla(227, 71%, 51%, 1)"
+          />
+          <path
+            d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
+            data-blade-component="svg-path"
+            fill="hsla(227, 71%, 51%, 1)"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
+            data-blade-component="svg-path"
+            fill="hsla(227, 71%, 51%, 1)"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+      <span
+        class="c3"
         data-blade-component="base-text"
       >
         Learn More
@@ -626,7 +698,7 @@ exports[`<Link /> should render link with default properties 1`] = `
 </div>
 `;
 
-exports[`<Link /> should render link with icon with default iconPosition 1`] = `
+exports[`<Link /> should render link with icon with left iconPosition 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -653,7 +725,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -692,14 +764,18 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -732,18 +808,18 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
             fill-rule="evenodd"
           />
         </svg>
@@ -759,7 +835,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
 </div>
 `;
 
-exports[`<Link /> should render link with icon with left iconPosition 1`] = `
+exports[`<Link /> should render link with icon with right iconPosition 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -786,7 +862,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -812,7 +888,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
   align-items: center;
 }
 
-.c2.c2.c2.c2.c2 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -821,18 +897,22 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding-right: 4px;
+  padding-left: 4px;
 }
 
-.c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c2.c2.c2.c2.c2 {
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -851,6 +931,12 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
     >
       <span
         class="c2"
+        data-blade-component="base-text"
+      >
+        Learn More
+      </span>
+      <span
+        class="c3"
         data-blade-component="base-box"
       >
         <svg
@@ -865,34 +951,28 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
             fill-rule="evenodd"
           />
         </svg>
       </span>
-      <span
-        class="c3"
-        data-blade-component="base-text"
-      >
-        Learn More
-      </span>
     </span>
   </a>
 </div>
 `;
 
-exports[`<Link /> should render link with icon with right iconPosition 1`] = `
+exports[`<Link /> should render link with icon without text 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -919,7 +999,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -945,7 +1025,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
   align-items: center;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -954,18 +1034,22 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding-left: 4px;
+  padding-right: 0px;
 }
 
-.c2.c2.c2.c2.c2 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c3.c3.c3.c3.c3 {
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -984,12 +1068,6 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
     >
       <span
         class="c2"
-        data-blade-component="base-text"
-      >
-        Learn More
-      </span>
-      <span
-        class="c3"
         data-blade-component="base-box"
       >
         <svg
@@ -1004,28 +1082,32 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
             fill-rule="evenodd"
           />
         </svg>
       </span>
+      <span
+        class="c3"
+        data-blade-component="base-text"
+      />
     </span>
   </a>
 </div>
 `;
 
-exports[`<Link /> should render link with icon without text 1`] = `
+exports[`<Link /> should render neutral color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -1052,7 +1134,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1079,26 +1161,18 @@ exports[`<Link /> should render link with icon without text 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-right: 0px;
-}
-
-.c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,33%,21%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1117,46 +1191,16 @@ exports[`<Link /> should render link with icon without text 1`] = `
     >
       <span
         class="c2"
-        data-blade-component="base-box"
+        data-blade-component="base-text"
       >
-        <svg
-          aria-hidden="true"
-          class="Svgweb__StyledSvg-vcmjs8-0"
-          data-blade-component="icon"
-          fill="none"
-          height="16px"
-          viewBox="0 0 24 24"
-          width="16px"
-        >
-          <path
-            d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-            data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
-          />
-          <path
-            d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-            data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
-          />
-          <path
-            clip-rule="evenodd"
-            d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-            data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
-            fill-rule="evenodd"
-          />
-        </svg>
+        Learn More
       </span>
-      <span
-        class="c3"
-        data-blade-component="base-text"
-      />
     </span>
   </a>
 </div>
 `;
 
-exports[`<Link /> should render neutral color link 1`] = `
+exports[`<Link /> should render primary color link 1`] = `
 .c0.c0.c0.c0.c0 {
   padding: 0;
   background-color: transparent;
@@ -1183,7 +1227,7 @@ exports[`<Link /> should render neutral color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1210,14 +1254,18 @@ exports[`<Link /> should render neutral color link 1`] = `
 }
 
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1272,7 +1320,7 @@ exports[`<Link /> should render white color link 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1300,13 +1348,17 @@ exports[`<Link /> should render white color link 1`] = `
 
 .c2.c2.c2.c2.c2 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1361,7 +1413,7 @@ exports[`<Link /> should render with small size 1`] = `
 }
 
 .c0.c0.c0.c0.c0:focus-visible .content-container {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
 }
 
 .c0.c0.c0.c0.c0 * {
@@ -1400,14 +1452,18 @@ exports[`<Link /> should render with small size 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -1440,18 +1496,18 @@ exports[`<Link /> should render with small size 1`] = `
           <path
             d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
           />
           <path
             clip-rule="evenodd"
             d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
             data-blade-component="svg-path"
-            fill="hsla(218, 89%, 51%, 1)"
+            fill="hsla(227, 71%, 51%, 1)"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/blade/src/components/List/List.stories.tsx b/packages/blade/src/components/List/List.stories.tsx
index 976149474ba..55b611f1aca 100644
--- a/packages/blade/src/components/List/List.stories.tsx
+++ b/packages/blade/src/components/List/List.stories.tsx
@@ -23,12 +23,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentDescription="List displays a set of related items that are composed of text/links."
       componentName="List"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=23205%3A446859&t=itEw2V8u5Q0PPGJq-4',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=13864%3A436458&t=nNhw3mY86j85bYfl-4',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=23205%3A446859&t=itEw2V8u5Q0PPGJq-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/List/List.tsx b/packages/blade/src/components/List/List.tsx
index 49cf5c43c15..ef85eb157ed 100644
--- a/packages/blade/src/components/List/List.tsx
+++ b/packages/blade/src/components/List/List.tsx
@@ -118,7 +118,6 @@ const _List = ({
     <ListProvider value={listContextValue}>
       <BaseBox {...getStyledProps(styledProps)}>
         <ListElement
-          marginTop={level ? undefined : 'spacing.3'}
           {...metaAttribute({ name: MetaConstants.List, testID })}
           {...makeAccessible({ role: 'list' })} // Role needed for react-native
         >
diff --git a/packages/blade/src/components/List/ListItem.tsx b/packages/blade/src/components/List/ListItem.tsx
index 5f85cf2098d..214760c6630 100644
--- a/packages/blade/src/components/List/ListItem.tsx
+++ b/packages/blade/src/components/List/ListItem.tsx
@@ -158,7 +158,7 @@ const _ListItem = ({
             alignSelf="flex-start"
           >
             {ItemIcon ? (
-              <ItemIcon size={size} color="surface.text.subdued.lowContrast" />
+              <ItemIcon size={size} color="surface.icon.gray.muted" />
             ) : (
               <UnorderedItemIcon level={level} />
             )}
@@ -177,11 +177,15 @@ const _ListItem = ({
             borderRadius={variant === 'ordered-filled' ? 'max' : undefined}
             backgroundColor={
               variant === 'ordered-filled'
-                ? getIn(theme, 'colors.brand.gray.a100.lowContrast')
+                ? getIn(theme.colors, 'feedback.background.neutral.subtle')
                 : undefined
             }
           >
-            <Text variant="body" type="subtle" size={variant === 'ordered' ? size : 'xsmall'}>
+            <Text
+              variant="body"
+              color="surface.text.gray.muted"
+              size={variant === 'ordered' ? size : 'xsmall'}
+            >
               {`${getOrderedListItemBullet({
                 itemNumber: _itemNumber ?? 1,
                 level: level ?? 1,
diff --git a/packages/blade/src/components/List/ListItemIcons.tsx b/packages/blade/src/components/List/ListItemIcons.tsx
index f56f7409125..5a733c2baa6 100644
--- a/packages/blade/src/components/List/ListItemIcons.tsx
+++ b/packages/blade/src/components/List/ListItemIcons.tsx
@@ -3,6 +3,7 @@ import { listItemUnorderedBulletSize } from './listTokens';
 import { useListContext } from './ListContext';
 import { useTheme } from '~components/BladeProvider';
 import { Svg, Circle, Rect } from '~components/Icons/_Svg';
+import { opacity } from '~tokens/global';
 
 type UnorderedIconProps = {
   iconDimensions: string;
@@ -12,7 +13,7 @@ type UnorderedIconProps = {
 const UnorderedLevel1Icon = ({ iconDimensions, color }: UnorderedIconProps): React.ReactElement => {
   return (
     <Svg width={iconDimensions} height={iconDimensions} viewBox="0 0 6 6" fill="none">
-      <Circle cx="3px" cy="3px" r="3px" fill={color} />
+      <Circle cx="3px" cy="3px" r="3px" fill={color} fillOpacity={opacity[6]} />
     </Svg>
   );
 };
@@ -28,7 +29,13 @@ const UnorderedLevel2Icon = ({ iconDimensions, color }: UnorderedIconProps): Rea
 const UnorderedLevel3Icon = ({ iconDimensions, color }: UnorderedIconProps): React.ReactElement => {
   return (
     <Svg width={iconDimensions} height={iconDimensions} viewBox="0 0 6 6" fill="none">
-      <Rect width={iconDimensions} height={iconDimensions} rx="1px" fill={color} />
+      <Rect
+        width={iconDimensions}
+        height={iconDimensions}
+        rx="1px"
+        fill={color}
+        fillOpacity={opacity[6]}
+      />
     </Svg>
   );
 };
@@ -37,17 +44,17 @@ const UnorderedItemIcon = ({ level }: { level?: number }): React.ReactElement =>
   const { theme, platform } = useTheme();
   const { size } = useListContext();
   const iconDimensions = listItemUnorderedBulletSize[platform][size];
-  const color = theme.colors.surface.text.placeholder.lowContrast;
+  const backgroundToken = theme.colors.surface.text.gray.muted;
 
   switch (level) {
     case 1:
-      return <UnorderedLevel1Icon iconDimensions={iconDimensions} color={color} />;
+      return <UnorderedLevel1Icon iconDimensions={iconDimensions} color={backgroundToken} />;
     case 2:
-      return <UnorderedLevel2Icon iconDimensions={iconDimensions} color={color} />;
+      return <UnorderedLevel2Icon iconDimensions={iconDimensions} color={backgroundToken} />;
     case 3:
-      return <UnorderedLevel3Icon iconDimensions={iconDimensions} color={color} />;
+      return <UnorderedLevel3Icon iconDimensions={iconDimensions} color={backgroundToken} />;
     default:
-      return <UnorderedLevel3Icon iconDimensions={iconDimensions} color={color} />;
+      return <UnorderedLevel3Icon iconDimensions={iconDimensions} color={backgroundToken} />;
   }
 };
 
diff --git a/packages/blade/src/components/List/__tests__/List.native.test.tsx b/packages/blade/src/components/List/__tests__/List.native.test.tsx
index 2da73d54281..f4f390ba1ff 100644
--- a/packages/blade/src/components/List/__tests__/List.native.test.tsx
+++ b/packages/blade/src/components/List/__tests__/List.native.test.tsx
@@ -52,7 +52,7 @@ describe('<List />', () => {
     const { toJSON } = renderWithTheme(
       <List>
         <ListItem>
-          <ListItemText weight="bold" color="action.text.secondary.default">
+          <ListItemText weight="semibold" color="interactive.text.primary.normal">
             Level 1
           </ListItemText>
         </ListItem>
diff --git a/packages/blade/src/components/List/__tests__/List.web.test.tsx b/packages/blade/src/components/List/__tests__/List.web.test.tsx
index d7a53b071dd..ad94baaf71e 100644
--- a/packages/blade/src/components/List/__tests__/List.web.test.tsx
+++ b/packages/blade/src/components/List/__tests__/List.web.test.tsx
@@ -56,7 +56,7 @@ describe('<List />', () => {
     const { container } = renderWithTheme(
       <List>
         <ListItem>
-          <ListItemText weight="bold" color="action.text.secondary.default">
+          <ListItemText weight="semibold" color="interactive.text.primary.normal">
             Level 1
           </ListItemText>
         </ListItem>
diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap
index 8094b571fa0..fb982abdf0c 100644
--- a/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap
+++ b/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap
@@ -20,12 +20,9 @@ exports[`<List /> should render List with default properties 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -117,7 +114,7 @@ exports[`<List /> should render List with default properties 1`] = `
                 <RNSVGCircle
                   cx="3px"
                   cy="3px"
-                  fill={4288851646}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -145,7 +142,7 @@ exports[`<List /> should render List with default properties 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -155,11 +152,12 @@ exports[`<List /> should render List with default properties 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -290,7 +288,7 @@ exports[`<List /> should render List with default properties 1`] = `
                           ]
                         }
                         r="2.5px"
-                        stroke={4288851646}
+                        stroke={4285959847}
                       />
                     </RNSVGGroup>
                   </RNSVGSvgView>
@@ -312,7 +310,7 @@ exports[`<List /> should render List with default properties 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
+                    color="surface.text.gray.normal"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={100}
@@ -322,11 +320,12 @@ exports[`<List /> should render List with default properties 1`] = `
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 14,
                           "fontStyle": "normal",
                           "fontWeight": "400",
+                          "letterSpacing": 0,
                           "lineHeight": 20,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -449,7 +448,7 @@ exports[`<List /> should render List with default properties 1`] = `
                             }
                           >
                             <RNSVGRect
-                              fill={4288851646}
+                              fill={4285959847}
                               height="6px"
                               propList={
                                 [
@@ -481,7 +480,7 @@ exports[`<List /> should render List with default properties 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -491,11 +490,12 @@ exports[`<List /> should render List with default properties 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -546,12 +546,9 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -643,7 +640,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
                 <RNSVGCircle
                   cx="3px"
                   cy="3px"
-                  fill={4288851646}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -671,7 +668,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -681,11 +678,12 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -711,7 +709,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
                   {},
                   {
                     "alignSelf": "center",
-                    "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                    "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                     "borderRadius": 4,
                     "display": "flex",
                     "lineHeight": 0,
@@ -726,7 +724,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
             >
               <Text
                 accessible={true}
-                color="surface.text.subtle.lowContrast"
+                color="surface.text.gray.subtle"
                 data-blade-component="base-text"
                 fontFamily="code"
                 fontSize={25}
@@ -735,11 +733,12 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
                 style={
                   [
                     {
-                      "color": "hsla(216, 27%, 36%, 1)",
-                      "fontFamily": "Courier",
+                      "color": "hsla(211, 26%, 34%, 1)",
+                      "fontFamily": "Menlo",
                       "fontSize": 10,
                       "fontStyle": "normal",
                       "fontWeight": "400",
+                      "letterSpacing": 0,
                       "lineHeight": 14,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -848,7 +847,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
                 <RNSVGCircle
                   cx="3px"
                   cy="3px"
-                  fill={4288851646}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -876,7 +875,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -886,11 +885,12 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -935,12 +935,9 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -1032,7 +1029,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
                 <RNSVGCircle
                   cx="3px"
                   cy="3px"
-                  fill={4288851646}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -1060,7 +1057,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -1070,11 +1067,12 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -1160,19 +1158,20 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               >
                 <Text
                   accessible={true}
-                  color="action.text.link.default"
+                  color="interactive.text.primary.normal"
                   data-blade-component="base-text"
                   fontSize={100}
-                  fontWeight="bold"
+                  fontWeight="medium"
                   lineHeight={100}
                   style={
                     [
                       {
-                        "color": "hsla(218, 89%, 51%, 1)",
-                        "fontFamily": "Lato",
+                        "color": "hsla(227, 71%, 51%, 1)",
+                        "fontFamily": "Inter",
                         "fontSize": 14,
                         "fontStyle": "normal",
-                        "fontWeight": "700",
+                        "fontWeight": "500",
+                        "letterSpacing": 0,
                         "lineHeight": 20,
                         "marginBottom": 0,
                         "marginLeft": 0,
@@ -1285,7 +1284,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
                 <RNSVGCircle
                   cx="3px"
                   cy="3px"
-                  fill={4288851646}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -1313,7 +1312,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -1323,11 +1322,12 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -1372,12 +1372,9 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -1469,7 +1466,7 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
                 <RNSVGCircle
                   cx="3px"
                   cy="3px"
-                  fill={4288851646}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -1497,21 +1494,22 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
           >
             <Text
               accessible={true}
-              color="action.text.secondary.default"
+              color="interactive.text.primary.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
               fontStyle="normal"
-              fontWeight="bold"
+              fontWeight="semibold"
               lineHeight={100}
               style={
                 [
                   {
-                    "color": "hsla(218, 89%, 51%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(227, 71%, 51%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
+                    "fontWeight": "600",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -1556,12 +1554,9 @@ exports[`<List /> should render large ordered List 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -1621,21 +1616,22 @@ exports[`<List /> should render large ordered List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={200}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={300}
+              lineHeight={200}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 24,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -1670,21 +1666,22 @@ exports[`<List /> should render large ordered List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={200}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={300}
+              lineHeight={200}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 24,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -1815,7 +1812,7 @@ exports[`<List /> should render large ordered List 1`] = `
                           ]
                         }
                         r="2.5px"
-                        stroke={4288851646}
+                        stroke={4285959847}
                       />
                     </RNSVGGroup>
                   </RNSVGSvgView>
@@ -1837,21 +1834,22 @@ exports[`<List /> should render large ordered List 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
+                    color="surface.text.gray.normal"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={200}
                     fontStyle="normal"
                     fontWeight="regular"
-                    lineHeight={300}
+                    lineHeight={200}
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 16,
                           "fontStyle": "normal",
                           "fontWeight": "400",
+                          "letterSpacing": 0,
                           "lineHeight": 24,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -1974,7 +1972,7 @@ exports[`<List /> should render large ordered List 1`] = `
                             }
                           >
                             <RNSVGRect
-                              fill={4288851646}
+                              fill={4285959847}
                               height="6px"
                               propList={
                                 [
@@ -2006,21 +2004,22 @@ exports[`<List /> should render large ordered List 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={200}
                           fontStyle="normal"
                           fontWeight="regular"
-                          lineHeight={300}
+                          lineHeight={200}
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 16,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 24,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -2071,12 +2070,9 @@ exports[`<List /> should render large ordered-filled List 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -2112,7 +2108,7 @@ exports[`<List /> should render large ordered-filled List 1`] = `
           <View
             alignItems="center"
             alignSelf="flex-start"
-            backgroundColor="hsla(216, 15%, 54%, 0.18)"
+            backgroundColor="hsla(211, 20%, 52%, 0.09)"
             borderRadius="max"
             data-blade-component="base-box"
             display="flex"
@@ -2124,7 +2120,7 @@ exports[`<List /> should render large ordered-filled List 1`] = `
                 {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
-                  "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -2140,22 +2136,23 @@ exports[`<List /> should render large ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={25}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={25}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 10,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -2189,21 +2186,22 @@ exports[`<List /> should render large ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={200}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={300}
+              lineHeight={200}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 24,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -2255,7 +2253,7 @@ exports[`<List /> should render large ordered-filled List 1`] = `
           <View
             alignItems="center"
             alignSelf="flex-start"
-            backgroundColor="hsla(216, 15%, 54%, 0.18)"
+            backgroundColor="hsla(211, 20%, 52%, 0.09)"
             borderRadius="max"
             data-blade-component="base-box"
             display="flex"
@@ -2267,7 +2265,7 @@ exports[`<List /> should render large ordered-filled List 1`] = `
                 {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
-                  "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -2283,22 +2281,23 @@ exports[`<List /> should render large ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={25}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={25}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 10,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -2332,21 +2331,22 @@ exports[`<List /> should render large ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={200}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={300}
+              lineHeight={200}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 24,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -2398,7 +2398,7 @@ exports[`<List /> should render large ordered-filled List 1`] = `
           <View
             alignItems="center"
             alignSelf="flex-start"
-            backgroundColor="hsla(216, 15%, 54%, 0.18)"
+            backgroundColor="hsla(211, 20%, 52%, 0.09)"
             borderRadius="max"
             data-blade-component="base-box"
             display="flex"
@@ -2410,7 +2410,7 @@ exports[`<List /> should render large ordered-filled List 1`] = `
                 {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
-                  "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -2426,22 +2426,23 @@ exports[`<List /> should render large ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={25}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={25}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 10,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -2475,21 +2476,22 @@ exports[`<List /> should render large ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={200}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={300}
+              lineHeight={200}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 24,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -2534,12 +2536,9 @@ exports[`<List /> should render large unordered List with icon 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -2630,7 +2629,7 @@ exports[`<List /> should render large unordered List with icon 1`] = `
               >
                 <RNSVGPath
                   d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
-                  fill={4284378759}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -2657,21 +2656,22 @@ exports[`<List /> should render large unordered List with icon 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={200}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={300}
+              lineHeight={200}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 24,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -2795,7 +2795,7 @@ exports[`<List /> should render large unordered List with icon 1`] = `
                     >
                       <RNSVGPath
                         d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
-                        fill={4284378759}
+                        fill={4285959847}
                         propList={
                           [
                             "fill",
@@ -2822,21 +2822,22 @@ exports[`<List /> should render large unordered List with icon 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
+                    color="surface.text.gray.normal"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={200}
                     fontStyle="normal"
                     fontWeight="regular"
-                    lineHeight={300}
+                    lineHeight={200}
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 16,
                           "fontStyle": "normal",
                           "fontWeight": "400",
+                          "letterSpacing": 0,
                           "lineHeight": 24,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -2959,7 +2960,7 @@ exports[`<List /> should render large unordered List with icon 1`] = `
                             }
                           >
                             <RNSVGRect
-                              fill={4288851646}
+                              fill={4285959847}
                               height="6px"
                               propList={
                                 [
@@ -2991,21 +2992,22 @@ exports[`<List /> should render large unordered List with icon 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={200}
                           fontStyle="normal"
                           fontWeight="regular"
-                          lineHeight={300}
+                          lineHeight={200}
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 16,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 24,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -3056,12 +3058,9 @@ exports[`<List /> should render medium ordered List 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -3121,7 +3120,7 @@ exports[`<List /> should render medium ordered List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -3131,11 +3130,12 @@ exports[`<List /> should render medium ordered List 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -3170,7 +3170,7 @@ exports[`<List /> should render medium ordered List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -3180,11 +3180,12 @@ exports[`<List /> should render medium ordered List 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -3315,7 +3316,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                           ]
                         }
                         r="2.5px"
-                        stroke={4288851646}
+                        stroke={4285959847}
                       />
                     </RNSVGGroup>
                   </RNSVGSvgView>
@@ -3337,7 +3338,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
+                    color="surface.text.gray.normal"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={100}
@@ -3347,11 +3348,12 @@ exports[`<List /> should render medium ordered List 1`] = `
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 14,
                           "fontStyle": "normal",
                           "fontWeight": "400",
+                          "letterSpacing": 0,
                           "lineHeight": 20,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -3474,7 +3476,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                             }
                           >
                             <RNSVGRect
-                              fill={4288851646}
+                              fill={4285959847}
                               height="6px"
                               propList={
                                 [
@@ -3506,7 +3508,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -3516,11 +3518,12 @@ exports[`<List /> should render medium ordered List 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -3571,12 +3574,9 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -3612,7 +3612,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           <View
             alignItems="center"
             alignSelf="flex-start"
-            backgroundColor="hsla(216, 15%, 54%, 0.18)"
+            backgroundColor="hsla(211, 20%, 52%, 0.09)"
             borderRadius="max"
             data-blade-component="base-box"
             display="flex"
@@ -3624,7 +3624,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
                 {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
-                  "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -3640,22 +3640,23 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={25}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={25}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 10,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -3689,7 +3690,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -3699,11 +3700,12 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -3755,7 +3757,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           <View
             alignItems="center"
             alignSelf="flex-start"
-            backgroundColor="hsla(216, 15%, 54%, 0.18)"
+            backgroundColor="hsla(211, 20%, 52%, 0.09)"
             borderRadius="max"
             data-blade-component="base-box"
             display="flex"
@@ -3767,7 +3769,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
                 {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
-                  "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -3783,22 +3785,23 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={25}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={25}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 10,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -3832,7 +3835,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -3842,11 +3845,12 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -3898,7 +3902,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           <View
             alignItems="center"
             alignSelf="flex-start"
-            backgroundColor="hsla(216, 15%, 54%, 0.18)"
+            backgroundColor="hsla(211, 20%, 52%, 0.09)"
             borderRadius="max"
             data-blade-component="base-box"
             display="flex"
@@ -3910,7 +3914,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
                 {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
-                  "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -3926,22 +3930,23 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={25}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={25}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 10,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -3975,7 +3980,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -3985,11 +3990,12 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -4034,12 +4040,9 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -4130,7 +4133,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
               >
                 <RNSVGPath
                   d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
-                  fill={4284378759}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -4157,7 +4160,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -4167,11 +4170,12 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -4295,7 +4299,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                     >
                       <RNSVGPath
                         d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
-                        fill={4284378759}
+                        fill={4285959847}
                         propList={
                           [
                             "fill",
@@ -4322,7 +4326,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
+                    color="surface.text.gray.normal"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={100}
@@ -4332,11 +4336,12 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 14,
                           "fontStyle": "normal",
                           "fontWeight": "400",
+                          "letterSpacing": 0,
                           "lineHeight": 20,
                           "marginBottom": 0,
                           "marginLeft": 0,
@@ -4459,7 +4464,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                             }
                           >
                             <RNSVGRect
-                              fill={4288851646}
+                              fill={4285959847}
                               height="6px"
                               propList={
                                 [
@@ -4491,7 +4496,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={100}
@@ -4501,11 +4506,12 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 14,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
+                                "letterSpacing": 0,
                                 "lineHeight": 20,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
@@ -4556,12 +4562,9 @@ exports[`<List /> should render small ordered List 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -4621,22 +4624,23 @@ exports[`<List /> should render small ordered List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={75}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -4670,22 +4674,23 @@ exports[`<List /> should render small ordered List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={75}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -4815,7 +4820,7 @@ exports[`<List /> should render small ordered List 1`] = `
                           ]
                         }
                         r="2.5px"
-                        stroke={4288851646}
+                        stroke={4285959847}
                       />
                     </RNSVGGroup>
                   </RNSVGSvgView>
@@ -4837,22 +4842,23 @@ exports[`<List /> should render small ordered List 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
+                    color="surface.text.gray.normal"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={75}
                     fontStyle="normal"
                     fontWeight="regular"
-                    lineHeight={50}
+                    lineHeight={75}
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 12,
                           "fontStyle": "normal",
                           "fontWeight": "400",
-                          "lineHeight": 16,
+                          "letterSpacing": 0,
+                          "lineHeight": 18,
                           "marginBottom": 0,
                           "marginLeft": 0,
                           "marginRight": 0,
@@ -4974,7 +4980,7 @@ exports[`<List /> should render small ordered List 1`] = `
                             }
                           >
                             <RNSVGRect
-                              fill={4288851646}
+                              fill={4285959847}
                               height="5px"
                               propList={
                                 [
@@ -5006,22 +5012,23 @@ exports[`<List /> should render small ordered List 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={75}
                           fontStyle="normal"
                           fontWeight="regular"
-                          lineHeight={50}
+                          lineHeight={75}
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 12,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
-                                "lineHeight": 16,
+                                "letterSpacing": 0,
+                                "lineHeight": 18,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
                                 "marginRight": 0,
@@ -5071,12 +5078,9 @@ exports[`<List /> should render small ordered-filled List 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -5112,7 +5116,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           <View
             alignItems="center"
             alignSelf="flex-start"
-            backgroundColor="hsla(216, 15%, 54%, 0.18)"
+            backgroundColor="hsla(211, 20%, 52%, 0.09)"
             borderRadius="max"
             data-blade-component="base-box"
             display="flex"
@@ -5124,7 +5128,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
                 {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
-                  "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -5140,22 +5144,23 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={25}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={25}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 10,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -5189,22 +5194,23 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={75}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -5255,7 +5261,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           <View
             alignItems="center"
             alignSelf="flex-start"
-            backgroundColor="hsla(216, 15%, 54%, 0.18)"
+            backgroundColor="hsla(211, 20%, 52%, 0.09)"
             borderRadius="max"
             data-blade-component="base-box"
             display="flex"
@@ -5267,7 +5273,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
                 {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
-                  "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -5283,22 +5289,23 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={25}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={25}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 10,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -5332,22 +5339,23 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={75}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -5398,7 +5406,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           <View
             alignItems="center"
             alignSelf="flex-start"
-            backgroundColor="hsla(216, 15%, 54%, 0.18)"
+            backgroundColor="hsla(211, 20%, 52%, 0.09)"
             borderRadius="max"
             data-blade-component="base-box"
             display="flex"
@@ -5410,7 +5418,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
                 {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
-                  "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -5426,22 +5434,23 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.subtle.lowContrast"
+              color="surface.text.gray.muted"
               data-blade-component="text"
               fontFamily="text"
               fontSize={25}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={25}
               style={
                 [
                   {
-                    "color": "hsla(216, 27%, 36%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 10,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -5475,22 +5484,23 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={75}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -5534,12 +5544,9 @@ exports[`<List /> should render small unordered List with icon 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -5630,7 +5637,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
               >
                 <RNSVGPath
                   d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
-                  fill={4284378759}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -5657,22 +5664,23 @@ exports[`<List /> should render small unordered List with icon 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={75}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -5795,7 +5803,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                     >
                       <RNSVGPath
                         d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
-                        fill={4284378759}
+                        fill={4285959847}
                         propList={
                           [
                             "fill",
@@ -5822,22 +5830,23 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
+                    color="surface.text.gray.normal"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={75}
                     fontStyle="normal"
                     fontWeight="regular"
-                    lineHeight={50}
+                    lineHeight={75}
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 12,
                           "fontStyle": "normal",
                           "fontWeight": "400",
-                          "lineHeight": 16,
+                          "letterSpacing": 0,
+                          "lineHeight": 18,
                           "marginBottom": 0,
                           "marginLeft": 0,
                           "marginRight": 0,
@@ -5959,7 +5968,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                             }
                           >
                             <RNSVGRect
-                              fill={4288851646}
+                              fill={4285959847}
                               height="5px"
                               propList={
                                 [
@@ -5991,22 +6000,23 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={75}
                           fontStyle="normal"
                           fontWeight="regular"
-                          lineHeight={50}
+                          lineHeight={75}
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 12,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
-                                "lineHeight": 16,
+                                "letterSpacing": 0,
+                                "lineHeight": 18,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
                                 "marginRight": 0,
@@ -6056,12 +6066,9 @@ exports[`<List /> should render unordered List of small size 1`] = `
       accessibilityRole="list"
       accessible={true}
       data-blade-component="list"
-      marginTop="spacing.3"
       style={
         [
-          {
-            "marginTop": 8,
-          },
+          {},
         ]
       }
     >
@@ -6153,7 +6160,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                 <RNSVGCircle
                   cx="3px"
                   cy="3px"
-                  fill={4288851646}
+                  fill={4285959847}
                   propList={
                     [
                       "fill",
@@ -6181,22 +6188,23 @@ exports[`<List /> should render unordered List of small size 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={75}
               fontStyle="normal"
               fontWeight="regular"
-              lineHeight={50}
+              lineHeight={75}
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 12,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                    "lineHeight": 16,
+                    "letterSpacing": 0,
+                    "lineHeight": 18,
                     "marginBottom": 0,
                     "marginLeft": 0,
                     "marginRight": 0,
@@ -6326,7 +6334,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                           ]
                         }
                         r="2.5px"
-                        stroke={4288851646}
+                        stroke={4285959847}
                       />
                     </RNSVGGroup>
                   </RNSVGSvgView>
@@ -6348,22 +6356,23 @@ exports[`<List /> should render unordered List of small size 1`] = `
                 >
                   <Text
                     accessible={true}
-                    color="surface.text.normal.lowContrast"
+                    color="surface.text.gray.normal"
                     data-blade-component="text"
                     fontFamily="text"
                     fontSize={75}
                     fontStyle="normal"
                     fontWeight="regular"
-                    lineHeight={50}
+                    lineHeight={75}
                     style={
                       [
                         {
-                          "color": "hsla(217, 56%, 17%, 1)",
-                          "fontFamily": "Lato",
+                          "color": "hsla(212, 39%, 16%, 1)",
+                          "fontFamily": "Inter",
                           "fontSize": 12,
                           "fontStyle": "normal",
                           "fontWeight": "400",
-                          "lineHeight": 16,
+                          "letterSpacing": 0,
+                          "lineHeight": 18,
                           "marginBottom": 0,
                           "marginLeft": 0,
                           "marginRight": 0,
@@ -6485,7 +6494,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                             }
                           >
                             <RNSVGRect
-                              fill={4288851646}
+                              fill={4285959847}
                               height="5px"
                               propList={
                                 [
@@ -6517,22 +6526,23 @@ exports[`<List /> should render unordered List of small size 1`] = `
                       >
                         <Text
                           accessible={true}
-                          color="surface.text.normal.lowContrast"
+                          color="surface.text.gray.normal"
                           data-blade-component="text"
                           fontFamily="text"
                           fontSize={75}
                           fontStyle="normal"
                           fontWeight="regular"
-                          lineHeight={50}
+                          lineHeight={75}
                           style={
                             [
                               {
-                                "color": "hsla(217, 56%, 17%, 1)",
-                                "fontFamily": "Lato",
+                                "color": "hsla(212, 39%, 16%, 1)",
+                                "fontFamily": "Inter",
                                 "fontSize": 12,
                                 "fontStyle": "normal",
                                 "fontWeight": "400",
-                                "lineHeight": 16,
+                                "letterSpacing": 0,
+                                "lineHeight": 18,
                                 "marginBottom": 0,
                                 "marginLeft": 0,
                                 "marginRight": 0,
diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.ssr.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.ssr.test.tsx.snap
index b5a25ea6d3b..971f682e1bd 100644
--- a/packages/blade/src/components/List/__tests__/__snapshots__/List.ssr.test.tsx.snap
+++ b/packages/blade/src/components/List/__tests__/__snapshots__/List.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<List /> should render List with default properties 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><ul data-blade-component="list" role="list" class="UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 hGsnBR kwyIsK"><li data-blade-component="list-item" class="ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  hAjyyX"><div data-blade-component="base-box" class="BaseBox-bmPWx iJzciX"><div data-blade-component="base-box" class="BaseBox-bmPWx bRicqN"><svg aria-hidden="true" data-blade-component="icon" height="6px" viewBox="0 0 6 6" width="6px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><circle cx="3px" cy="3px" r="3px" fill="hsla(214, 18%, 69%, 1)" data-blade-component="svg-circle"></circle></svg></div><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Level 1</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><ul data-blade-component="list" role="list" class="UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 hGsnBR"><li data-blade-component="list-item" class="ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  ddekhw"><div data-blade-component="base-box" class="BaseBox-bmPWx iJzciX"><div data-blade-component="base-box" class="BaseBox-bmPWx bRicqN"><svg aria-hidden="true" data-blade-component="icon" height="6px" viewBox="0 0 6 6" width="6px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><circle cx="3px" cy="3px" r="2.5px" stroke="hsla(214, 18%, 69%, 1)" data-blade-component="svg-circle"></circle></svg></div><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Level 2</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><ul data-blade-component="list" role="list" class="UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 hGsnBR"><li data-blade-component="list-item" class="ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  ddekhw"><div data-blade-component="base-box" class="BaseBox-bmPWx iJzciX"><div data-blade-component="base-box" class="BaseBox-bmPWx bRicqN"><svg aria-hidden="true" data-blade-component="icon" height="6px" viewBox="0 0 6 6" width="6px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><rect data-blade-component="svg-rect" height="6px" width="6px" rx="1px" fill="hsla(214, 18%, 69%, 1)"></rect></svg></div><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Level 3</p></div></li></ul></div></li></ul></div></li></ul></div></div>"`;
+exports[`<List /> should render List with default properties 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><ul data-blade-component="list" role="list" class="UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 hGsnBR"><li data-blade-component="list-item" class="ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  hAjyyX"><div data-blade-component="base-box" class="BaseBox-bmPWx iJzciX"><div data-blade-component="base-box" class="BaseBox-bmPWx bRicqN"><svg aria-hidden="true" data-blade-component="icon" height="6px" viewBox="0 0 6 6" width="6px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><circle cx="3px" cy="3px" r="3px" fill="hsla(211, 22%, 56%, 1)" fill-opacity="0.48" data-blade-component="svg-circle"></circle></svg></div><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Level 1</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><ul data-blade-component="list" role="list" class="UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 hGsnBR"><li data-blade-component="list-item" class="ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  ddekhw"><div data-blade-component="base-box" class="BaseBox-bmPWx iJzciX"><div data-blade-component="base-box" class="BaseBox-bmPWx bRicqN"><svg aria-hidden="true" data-blade-component="icon" height="6px" viewBox="0 0 6 6" width="6px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><circle cx="3px" cy="3px" r="2.5px" stroke="hsla(211, 22%, 56%, 1)" data-blade-component="svg-circle"></circle></svg></div><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Level 2</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><ul data-blade-component="list" role="list" class="UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 hGsnBR"><li data-blade-component="list-item" class="ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  ddekhw"><div data-blade-component="base-box" class="BaseBox-bmPWx iJzciX"><div data-blade-component="base-box" class="BaseBox-bmPWx bRicqN"><svg aria-hidden="true" data-blade-component="icon" height="6px" viewBox="0 0 6 6" width="6px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><rect data-blade-component="svg-rect" height="6px" width="6px" rx="1px" fill="hsla(211, 22%, 56%, 1)" fill-opacity="0.48"></rect></svg></div><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Level 3</p></div></li></ul></div></li></ul></div></li></ul></div></div>"`;
 
 exports[`<List /> should render List with default properties 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -9,7 +9,7 @@ exports[`<List /> should render List with default properties 2`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24,7 +24,7 @@ exports[`<List /> should render List with default properties 2`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -36,28 +36,28 @@ exports[`<List /> should render List with default properties 2`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 4px;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   margin-left: 16px;
 }
 
@@ -69,20 +69,20 @@ exports[`<List /> should render List with default properties 2`] = `
     data-blade-component="base-box"
   >
     <ul
-      class="c0 c1"
+      class="List__StyledUnorderedList-bqf6r7-1 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <svg
@@ -98,13 +98,14 @@ exports[`<List /> should render List with default properties 2`] = `
                 cx="3px"
                 cy="3px"
                 data-blade-component="svg-circle"
-                fill="hsla(214, 18%, 69%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
+                fill-opacity="0.48"
                 r="3px"
               />
             </svg>
           </div>
           <p
-            class="c5"
+            class="c4"
             data-blade-component="text"
           >
             Level 1
@@ -115,20 +116,20 @@ exports[`<List /> should render List with default properties 2`] = `
           data-blade-component="base-box"
         >
           <ul
-            class="c0"
+            class="List__StyledUnorderedList-bqf6r7-1 c0"
             data-blade-component="list"
             role="list"
           >
             <li
-              class=" c6"
+              class=" c5"
               data-blade-component="list-item"
             >
               <div
-                class="c3"
+                class="c2"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c4"
+                  class="c3"
                   data-blade-component="base-box"
                 >
                   <svg
@@ -145,12 +146,12 @@ exports[`<List /> should render List with default properties 2`] = `
                       cy="3px"
                       data-blade-component="svg-circle"
                       r="2.5px"
-                      stroke="hsla(214, 18%, 69%, 1)"
+                      stroke="hsla(211, 22%, 56%, 1)"
                     />
                   </svg>
                 </div>
                 <p
-                  class="c5"
+                  class="c4"
                   data-blade-component="text"
                 >
                   Level 2
@@ -161,20 +162,20 @@ exports[`<List /> should render List with default properties 2`] = `
                 data-blade-component="base-box"
               >
                 <ul
-                  class="c0"
+                  class="List__StyledUnorderedList-bqf6r7-1 c0"
                   data-blade-component="list"
                   role="list"
                 >
                   <li
-                    class=" c6"
+                    class=" c5"
                     data-blade-component="list-item"
                   >
                     <div
-                      class="c3"
+                      class="c2"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c4"
+                        class="c3"
                         data-blade-component="base-box"
                       >
                         <svg
@@ -188,7 +189,8 @@ exports[`<List /> should render List with default properties 2`] = `
                         >
                           <rect
                             data-blade-component="svg-rect"
-                            fill="hsla(214, 18%, 69%, 1)"
+                            fill="hsla(211, 22%, 56%, 1)"
+                            fill-opacity="0.48"
                             height="6px"
                             rx="1px"
                             width="6px"
@@ -196,7 +198,7 @@ exports[`<List /> should render List with default properties 2`] = `
                         </svg>
                       </div>
                       <p
-                        class="c5"
+                        class="c4"
                         data-blade-component="text"
                       >
                         Level 3
diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap
index 416919dc6a1..a8ca1f21ebd 100644
--- a/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap
+++ b/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<List /> should render List with default properties 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -22,7 +22,7 @@ exports[`<List /> should render List with default properties 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -34,28 +34,28 @@ exports[`<List /> should render List with default properties 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 4px;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   margin-left: 16px;
 }
 
@@ -65,20 +65,20 @@ exports[`<List /> should render List with default properties 1`] = `
     data-blade-component="base-box"
   >
     <ul
-      class="c0 c1"
+      class="List__StyledUnorderedList-bqf6r7-1 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <svg
@@ -94,13 +94,14 @@ exports[`<List /> should render List with default properties 1`] = `
                 cx="3px"
                 cy="3px"
                 data-blade-component="svg-circle"
-                fill="hsla(214, 18%, 69%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
+                fill-opacity="0.48"
                 r="3px"
               />
             </svg>
           </div>
           <p
-            class="c5"
+            class="c4"
             data-blade-component="text"
           >
             Level 1
@@ -111,20 +112,20 @@ exports[`<List /> should render List with default properties 1`] = `
           data-blade-component="base-box"
         >
           <ul
-            class="c0"
+            class="List__StyledUnorderedList-bqf6r7-1 c0"
             data-blade-component="list"
             role="list"
           >
             <li
-              class=" c6"
+              class=" c5"
               data-blade-component="list-item"
             >
               <div
-                class="c3"
+                class="c2"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c4"
+                  class="c3"
                   data-blade-component="base-box"
                 >
                   <svg
@@ -141,12 +142,12 @@ exports[`<List /> should render List with default properties 1`] = `
                       cy="3px"
                       data-blade-component="svg-circle"
                       r="2.5px"
-                      stroke="hsla(214, 18%, 69%, 1)"
+                      stroke="hsla(211, 22%, 56%, 1)"
                     />
                   </svg>
                 </div>
                 <p
-                  class="c5"
+                  class="c4"
                   data-blade-component="text"
                 >
                   Level 2
@@ -157,20 +158,20 @@ exports[`<List /> should render List with default properties 1`] = `
                 data-blade-component="base-box"
               >
                 <ul
-                  class="c0"
+                  class="List__StyledUnorderedList-bqf6r7-1 c0"
                   data-blade-component="list"
                   role="list"
                 >
                   <li
-                    class=" c6"
+                    class=" c5"
                     data-blade-component="list-item"
                   >
                     <div
-                      class="c3"
+                      class="c2"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c4"
+                        class="c3"
                         data-blade-component="base-box"
                       >
                         <svg
@@ -184,7 +185,8 @@ exports[`<List /> should render List with default properties 1`] = `
                         >
                           <rect
                             data-blade-component="svg-rect"
-                            fill="hsla(214, 18%, 69%, 1)"
+                            fill="hsla(211, 22%, 56%, 1)"
+                            fill-opacity="0.48"
                             height="6px"
                             rx="1px"
                             width="6px"
@@ -192,7 +194,7 @@ exports[`<List /> should render List with default properties 1`] = `
                         </svg>
                       </div>
                       <p
-                        class="c5"
+                        class="c4"
                         data-blade-component="text"
                       >
                         Level 3
@@ -217,7 +219,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -232,7 +234,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -244,46 +246,50 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c7.c7.c7.c7.c7 {
-  color: hsla(216,27%,36%,1);
-  font-family: monospace;
+.c6.c6.c6.c6.c6 {
+  color: hsla(211,26%,34%,1);
+  font-family: "Menlo",San Francisco Mono,Courier New,Roboto Mono,monospace;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   padding: 0px 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 4px;
   display: inline-block;
   vertical-align: middle;
   line-height: 0rem;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 4px;
 }
 
@@ -293,20 +299,20 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
     data-blade-component="base-box"
   >
     <ul
-      class="c0 c1"
+      class="List__StyledUnorderedList-bqf6r7-1 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <svg
@@ -322,22 +328,23 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
                 cx="3px"
                 cy="3px"
                 data-blade-component="svg-circle"
-                fill="hsla(214, 18%, 69%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
+                fill-opacity="0.48"
                 r="3px"
               />
             </svg>
           </div>
           <p
-            class="c5"
+            class="c4"
             data-blade-component="text"
           >
             Level 1 
             <span
-              class=" c6"
+              class=" c5"
               data-blade-component="code"
             >
               <code
-                class="c7"
+                class="c6"
                 data-blade-component="base-text"
               >
                 Google
@@ -347,15 +354,15 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
         </div>
       </li>
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <svg
@@ -371,13 +378,14 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
                 cx="3px"
                 cy="3px"
                 data-blade-component="svg-circle"
-                fill="hsla(214, 18%, 69%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
+                fill-opacity="0.48"
                 r="3px"
               />
             </svg>
           </div>
           <p
-            class="c5"
+            class="c4"
             data-blade-component="text"
           >
             Level 2
@@ -396,7 +404,7 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -411,7 +419,7 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -423,37 +431,41 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c6.c6.c6.c6.c6 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c5.c5.c5.c5.c5 {
+  color: hsla(227,71%,51%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 4px;
 }
 
@@ -463,20 +475,20 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
     data-blade-component="base-box"
   >
     <ul
-      class="c0 c1"
+      class="List__StyledUnorderedList-bqf6r7-1 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <svg
@@ -492,17 +504,18 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
                 cx="3px"
                 cy="3px"
                 data-blade-component="svg-circle"
-                fill="hsla(214, 18%, 69%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
+                fill-opacity="0.48"
                 r="3px"
               />
             </svg>
           </div>
           <p
-            class="c5"
+            class="c4"
             data-blade-component="text"
           >
             <span
-              class="c6"
+              class="c5"
               data-blade-component="text"
             >
               Level 1
@@ -516,7 +529,7 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
 `;
 
 exports[`<List /> should render large ordered List 1`] = `
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
@@ -528,7 +541,7 @@ exports[`<List /> should render large ordered List 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -543,7 +556,7 @@ exports[`<List /> should render large ordered List 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -568,7 +581,7 @@ exports[`<List /> should render large ordered List 1`] = `
   width: 24px;
 }
 
-.c9.c9.c9.c9.c9 {
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -580,41 +593,45 @@ exports[`<List /> should render large ordered List 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c5.c5.c5.c5.c5 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 0;
 }
 
-.c8.c8.c8.c8.c8 {
+.c7.c7.c7.c7.c7 {
   margin-left: 16px;
 }
 
@@ -624,31 +641,31 @@ exports[`<List /> should render large ordered List 1`] = `
     data-blade-component="base-box"
   >
     <ol
-      class="c0 c1"
+      class="List__StyledOrderedList-bqf6r7-0 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               1.
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 1
@@ -659,20 +676,20 @@ exports[`<List /> should render large ordered List 1`] = `
           data-blade-component="base-box"
         >
           <ul
-            class="List__StyledUnorderedList-bqf6r7-1 c7"
+            class="List__StyledUnorderedList-bqf6r7-1 c6"
             data-blade-component="list"
             role="list"
           >
             <li
-              class=" c8"
+              class=" c7"
               data-blade-component="list-item"
             >
               <div
-                class="c3"
+                class="c2"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9"
+                  class="c8"
                   data-blade-component="base-box"
                 >
                   <svg
@@ -689,12 +706,12 @@ exports[`<List /> should render large ordered List 1`] = `
                       cy="3px"
                       data-blade-component="svg-circle"
                       r="2.5px"
-                      stroke="hsla(214, 18%, 69%, 1)"
+                      stroke="hsla(211, 22%, 56%, 1)"
                     />
                   </svg>
                 </div>
                 <p
-                  class="c6"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Level 2
@@ -705,20 +722,20 @@ exports[`<List /> should render large ordered List 1`] = `
                 data-blade-component="base-box"
               >
                 <ul
-                  class="List__StyledUnorderedList-bqf6r7-1 c7"
+                  class="List__StyledUnorderedList-bqf6r7-1 c6"
                   data-blade-component="list"
                   role="list"
                 >
                   <li
-                    class=" c8"
+                    class=" c7"
                     data-blade-component="list-item"
                   >
                     <div
-                      class="c3"
+                      class="c2"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c9"
+                        class="c8"
                         data-blade-component="base-box"
                       >
                         <svg
@@ -732,7 +749,8 @@ exports[`<List /> should render large ordered List 1`] = `
                         >
                           <rect
                             data-blade-component="svg-rect"
-                            fill="hsla(214, 18%, 69%, 1)"
+                            fill="hsla(211, 22%, 56%, 1)"
+                            fill-opacity="0.48"
                             height="6px"
                             rx="1px"
                             width="6px"
@@ -740,7 +758,7 @@ exports[`<List /> should render large ordered List 1`] = `
                         </svg>
                       </div>
                       <p
-                        class="c6"
+                        class="c5"
                         data-blade-component="text"
                       >
                         Level 3
@@ -765,7 +783,7 @@ exports[`<List /> should render large ordered-filled List 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -780,7 +798,7 @@ exports[`<List /> should render large ordered-filled List 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -803,41 +821,45 @@ exports[`<List /> should render large ordered-filled List 1`] = `
   margin-right: 8px;
   height: 24px;
   width: 24px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c5.c5.c5.c5.c5 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 0;
 }
 
@@ -847,31 +869,31 @@ exports[`<List /> should render large ordered-filled List 1`] = `
     data-blade-component="base-box"
   >
     <ol
-      class="c0 c1"
+      class="List__StyledOrderedList-bqf6r7-0 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               1
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 1
@@ -879,26 +901,26 @@ exports[`<List /> should render large ordered-filled List 1`] = `
         </div>
       </li>
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               2
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 2
@@ -906,26 +928,26 @@ exports[`<List /> should render large ordered-filled List 1`] = `
         </div>
       </li>
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               3
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 3
@@ -944,7 +966,7 @@ exports[`<List /> should render large unordered List with icon 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -959,7 +981,7 @@ exports[`<List /> should render large unordered List with icon 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -971,7 +993,7 @@ exports[`<List /> should render large unordered List with icon 1`] = `
   margin-right: 8px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -983,28 +1005,28 @@ exports[`<List /> should render large unordered List with icon 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 0;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   margin-left: 16px;
 }
 
@@ -1014,20 +1036,20 @@ exports[`<List /> should render large unordered List with icon 1`] = `
     data-blade-component="base-box"
   >
     <ul
-      class="c0 c1"
+      class="List__StyledUnorderedList-bqf6r7-1 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <svg
@@ -1042,12 +1064,12 @@ exports[`<List /> should render large unordered List with icon 1`] = `
               <path
                 d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
                 data-blade-component="svg-path"
-                fill="hsla(217, 18%, 45%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
               />
             </svg>
           </div>
           <p
-            class="c5"
+            class="c4"
             data-blade-component="text"
           >
             Level 1
@@ -1058,20 +1080,20 @@ exports[`<List /> should render large unordered List with icon 1`] = `
           data-blade-component="base-box"
         >
           <ul
-            class="c0"
+            class="List__StyledUnorderedList-bqf6r7-1 c0"
             data-blade-component="list"
             role="list"
           >
             <li
-              class=" c6"
+              class=" c5"
               data-blade-component="list-item"
             >
               <div
-                class="c3"
+                class="c2"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c4"
+                  class="c3"
                   data-blade-component="base-box"
                 >
                   <svg
@@ -1086,12 +1108,12 @@ exports[`<List /> should render large unordered List with icon 1`] = `
                     <path
                       d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
                       data-blade-component="svg-path"
-                      fill="hsla(217, 18%, 45%, 1)"
+                      fill="hsla(211, 22%, 56%, 1)"
                     />
                   </svg>
                 </div>
                 <p
-                  class="c5"
+                  class="c4"
                   data-blade-component="text"
                 >
                   Level 2
@@ -1102,20 +1124,20 @@ exports[`<List /> should render large unordered List with icon 1`] = `
                 data-blade-component="base-box"
               >
                 <ul
-                  class="c0"
+                  class="List__StyledUnorderedList-bqf6r7-1 c0"
                   data-blade-component="list"
                   role="list"
                 >
                   <li
-                    class=" c6"
+                    class=" c5"
                     data-blade-component="list-item"
                   >
                     <div
-                      class="c3"
+                      class="c2"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c7"
+                        class="c6"
                         data-blade-component="base-box"
                       >
                         <svg
@@ -1129,7 +1151,8 @@ exports[`<List /> should render large unordered List with icon 1`] = `
                         >
                           <rect
                             data-blade-component="svg-rect"
-                            fill="hsla(214, 18%, 69%, 1)"
+                            fill="hsla(211, 22%, 56%, 1)"
+                            fill-opacity="0.48"
                             height="6px"
                             rx="1px"
                             width="6px"
@@ -1137,7 +1160,7 @@ exports[`<List /> should render large unordered List with icon 1`] = `
                         </svg>
                       </div>
                       <p
-                        class="c5"
+                        class="c4"
                         data-blade-component="text"
                       >
                         Level 3
@@ -1156,7 +1179,7 @@ exports[`<List /> should render large unordered List with icon 1`] = `
 `;
 
 exports[`<List /> should render medium ordered List 1`] = `
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
@@ -1168,7 +1191,7 @@ exports[`<List /> should render medium ordered List 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1183,7 +1206,7 @@ exports[`<List /> should render medium ordered List 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1208,7 +1231,7 @@ exports[`<List /> should render medium ordered List 1`] = `
   width: 20px;
 }
 
-.c9.c9.c9.c9.c9 {
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1220,41 +1243,45 @@ exports[`<List /> should render medium ordered List 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c5.c5.c5.c5.c5 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 0;
 }
 
-.c8.c8.c8.c8.c8 {
+.c7.c7.c7.c7.c7 {
   margin-left: 16px;
 }
 
@@ -1264,31 +1291,31 @@ exports[`<List /> should render medium ordered List 1`] = `
     data-blade-component="base-box"
   >
     <ol
-      class="c0 c1"
+      class="List__StyledOrderedList-bqf6r7-0 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               1.
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 1
@@ -1299,20 +1326,20 @@ exports[`<List /> should render medium ordered List 1`] = `
           data-blade-component="base-box"
         >
           <ul
-            class="List__StyledUnorderedList-bqf6r7-1 c7"
+            class="List__StyledUnorderedList-bqf6r7-1 c6"
             data-blade-component="list"
             role="list"
           >
             <li
-              class=" c8"
+              class=" c7"
               data-blade-component="list-item"
             >
               <div
-                class="c3"
+                class="c2"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9"
+                  class="c8"
                   data-blade-component="base-box"
                 >
                   <svg
@@ -1329,12 +1356,12 @@ exports[`<List /> should render medium ordered List 1`] = `
                       cy="3px"
                       data-blade-component="svg-circle"
                       r="2.5px"
-                      stroke="hsla(214, 18%, 69%, 1)"
+                      stroke="hsla(211, 22%, 56%, 1)"
                     />
                   </svg>
                 </div>
                 <p
-                  class="c6"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Level 2
@@ -1345,20 +1372,20 @@ exports[`<List /> should render medium ordered List 1`] = `
                 data-blade-component="base-box"
               >
                 <ul
-                  class="List__StyledUnorderedList-bqf6r7-1 c7"
+                  class="List__StyledUnorderedList-bqf6r7-1 c6"
                   data-blade-component="list"
                   role="list"
                 >
                   <li
-                    class=" c8"
+                    class=" c7"
                     data-blade-component="list-item"
                   >
                     <div
-                      class="c3"
+                      class="c2"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c9"
+                        class="c8"
                         data-blade-component="base-box"
                       >
                         <svg
@@ -1372,7 +1399,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                         >
                           <rect
                             data-blade-component="svg-rect"
-                            fill="hsla(214, 18%, 69%, 1)"
+                            fill="hsla(211, 22%, 56%, 1)"
+                            fill-opacity="0.48"
                             height="6px"
                             rx="1px"
                             width="6px"
@@ -1380,7 +1408,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                         </svg>
                       </div>
                       <p
-                        class="c6"
+                        class="c5"
                         data-blade-component="text"
                       >
                         Level 3
@@ -1405,7 +1433,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1420,7 +1448,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1443,41 +1471,45 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
   margin-right: 8px;
   height: 20px;
   width: 20px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c5.c5.c5.c5.c5 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 0;
 }
 
@@ -1487,31 +1519,31 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
     data-blade-component="base-box"
   >
     <ol
-      class="c0 c1"
+      class="List__StyledOrderedList-bqf6r7-0 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               1
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 1
@@ -1519,26 +1551,26 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
         </div>
       </li>
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               2
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 2
@@ -1546,26 +1578,26 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
         </div>
       </li>
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               3
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 3
@@ -1584,7 +1616,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1599,7 +1631,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1611,7 +1643,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
   margin-right: 8px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1623,28 +1655,28 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 0;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   margin-left: 16px;
 }
 
@@ -1654,20 +1686,20 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
     data-blade-component="base-box"
   >
     <ul
-      class="c0 c1"
+      class="List__StyledUnorderedList-bqf6r7-1 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <svg
@@ -1682,12 +1714,12 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
               <path
                 d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
                 data-blade-component="svg-path"
-                fill="hsla(217, 18%, 45%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
               />
             </svg>
           </div>
           <p
-            class="c5"
+            class="c4"
             data-blade-component="text"
           >
             Level 1
@@ -1698,20 +1730,20 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
           data-blade-component="base-box"
         >
           <ul
-            class="c0"
+            class="List__StyledUnorderedList-bqf6r7-1 c0"
             data-blade-component="list"
             role="list"
           >
             <li
-              class=" c6"
+              class=" c5"
               data-blade-component="list-item"
             >
               <div
-                class="c3"
+                class="c2"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c4"
+                  class="c3"
                   data-blade-component="base-box"
                 >
                   <svg
@@ -1726,12 +1758,12 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                     <path
                       d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
                       data-blade-component="svg-path"
-                      fill="hsla(217, 18%, 45%, 1)"
+                      fill="hsla(211, 22%, 56%, 1)"
                     />
                   </svg>
                 </div>
                 <p
-                  class="c5"
+                  class="c4"
                   data-blade-component="text"
                 >
                   Level 2
@@ -1742,20 +1774,20 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                 data-blade-component="base-box"
               >
                 <ul
-                  class="c0"
+                  class="List__StyledUnorderedList-bqf6r7-1 c0"
                   data-blade-component="list"
                   role="list"
                 >
                   <li
-                    class=" c6"
+                    class=" c5"
                     data-blade-component="list-item"
                   >
                     <div
-                      class="c3"
+                      class="c2"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c7"
+                        class="c6"
                         data-blade-component="base-box"
                       >
                         <svg
@@ -1769,7 +1801,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                         >
                           <rect
                             data-blade-component="svg-rect"
-                            fill="hsla(214, 18%, 69%, 1)"
+                            fill="hsla(211, 22%, 56%, 1)"
+                            fill-opacity="0.48"
                             height="6px"
                             rx="1px"
                             width="6px"
@@ -1777,7 +1810,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                         </svg>
                       </div>
                       <p
-                        class="c5"
+                        class="c4"
                         data-blade-component="text"
                       >
                         Level 3
@@ -1796,7 +1829,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
 `;
 
 exports[`<List /> should render small ordered List 1`] = `
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
@@ -1808,7 +1841,7 @@ exports[`<List /> should render small ordered List 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1823,7 +1856,7 @@ exports[`<List /> should render small ordered List 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1848,7 +1881,7 @@ exports[`<List /> should render small ordered List 1`] = `
   width: 16px;
 }
 
-.c9.c9.c9.c9.c9 {
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1860,41 +1893,45 @@ exports[`<List /> should render small ordered List 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c5.c5.c5.c5.c5 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 0;
 }
 
-.c8.c8.c8.c8.c8 {
+.c7.c7.c7.c7.c7 {
   margin-left: 16px;
 }
 
@@ -1904,31 +1941,31 @@ exports[`<List /> should render small ordered List 1`] = `
     data-blade-component="base-box"
   >
     <ol
-      class="c0 c1"
+      class="List__StyledOrderedList-bqf6r7-0 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               1.
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 1
@@ -1939,20 +1976,20 @@ exports[`<List /> should render small ordered List 1`] = `
           data-blade-component="base-box"
         >
           <ul
-            class="List__StyledUnorderedList-bqf6r7-1 c7"
+            class="List__StyledUnorderedList-bqf6r7-1 c6"
             data-blade-component="list"
             role="list"
           >
             <li
-              class=" c8"
+              class=" c7"
               data-blade-component="list-item"
             >
               <div
-                class="c3"
+                class="c2"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c9"
+                  class="c8"
                   data-blade-component="base-box"
                 >
                   <svg
@@ -1969,12 +2006,12 @@ exports[`<List /> should render small ordered List 1`] = `
                       cy="3px"
                       data-blade-component="svg-circle"
                       r="2.5px"
-                      stroke="hsla(214, 18%, 69%, 1)"
+                      stroke="hsla(211, 22%, 56%, 1)"
                     />
                   </svg>
                 </div>
                 <p
-                  class="c6"
+                  class="c5"
                   data-blade-component="text"
                 >
                   Level 2
@@ -1985,20 +2022,20 @@ exports[`<List /> should render small ordered List 1`] = `
                 data-blade-component="base-box"
               >
                 <ul
-                  class="List__StyledUnorderedList-bqf6r7-1 c7"
+                  class="List__StyledUnorderedList-bqf6r7-1 c6"
                   data-blade-component="list"
                   role="list"
                 >
                   <li
-                    class=" c8"
+                    class=" c7"
                     data-blade-component="list-item"
                   >
                     <div
-                      class="c3"
+                      class="c2"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c9"
+                        class="c8"
                         data-blade-component="base-box"
                       >
                         <svg
@@ -2012,7 +2049,8 @@ exports[`<List /> should render small ordered List 1`] = `
                         >
                           <rect
                             data-blade-component="svg-rect"
-                            fill="hsla(214, 18%, 69%, 1)"
+                            fill="hsla(211, 22%, 56%, 1)"
+                            fill-opacity="0.48"
                             height="6px"
                             rx="1px"
                             width="6px"
@@ -2020,7 +2058,7 @@ exports[`<List /> should render small ordered List 1`] = `
                         </svg>
                       </div>
                       <p
-                        class="c6"
+                        class="c5"
                         data-blade-component="text"
                       >
                         Level 3
@@ -2045,7 +2083,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2060,7 +2098,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2083,41 +2121,45 @@ exports[`<List /> should render small ordered-filled List 1`] = `
   margin-right: 8px;
   height: 18px;
   width: 18px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c5.c5.c5.c5.c5 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 0;
 }
 
@@ -2127,31 +2169,31 @@ exports[`<List /> should render small ordered-filled List 1`] = `
     data-blade-component="base-box"
   >
     <ol
-      class="c0 c1"
+      class="List__StyledOrderedList-bqf6r7-0 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               1
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 1
@@ -2159,26 +2201,26 @@ exports[`<List /> should render small ordered-filled List 1`] = `
         </div>
       </li>
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               2
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 2
@@ -2186,26 +2228,26 @@ exports[`<List /> should render small ordered-filled List 1`] = `
         </div>
       </li>
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <p
-              class="c5"
+              class="c4"
               data-blade-component="text"
             >
               3
             </p>
           </div>
           <p
-            class="c6"
+            class="c5"
             data-blade-component="text"
           >
             Level 3
@@ -2224,7 +2266,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2239,7 +2281,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2251,7 +2293,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
   margin-right: 8px;
 }
 
-.c7.c7.c7.c7.c7 {
+.c6.c6.c6.c6.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2263,28 +2305,28 @@ exports[`<List /> should render small unordered List with icon 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 0;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   margin-left: 16px;
 }
 
@@ -2294,20 +2336,20 @@ exports[`<List /> should render small unordered List with icon 1`] = `
     data-blade-component="base-box"
   >
     <ul
-      class="c0 c1"
+      class="List__StyledUnorderedList-bqf6r7-1 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <svg
@@ -2322,12 +2364,12 @@ exports[`<List /> should render small unordered List with icon 1`] = `
               <path
                 d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
                 data-blade-component="svg-path"
-                fill="hsla(217, 18%, 45%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
               />
             </svg>
           </div>
           <p
-            class="c5"
+            class="c4"
             data-blade-component="text"
           >
             Level 1
@@ -2338,20 +2380,20 @@ exports[`<List /> should render small unordered List with icon 1`] = `
           data-blade-component="base-box"
         >
           <ul
-            class="c0"
+            class="List__StyledUnorderedList-bqf6r7-1 c0"
             data-blade-component="list"
             role="list"
           >
             <li
-              class=" c6"
+              class=" c5"
               data-blade-component="list-item"
             >
               <div
-                class="c3"
+                class="c2"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c4"
+                  class="c3"
                   data-blade-component="base-box"
                 >
                   <svg
@@ -2366,12 +2408,12 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                     <path
                       d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
                       data-blade-component="svg-path"
-                      fill="hsla(217, 18%, 45%, 1)"
+                      fill="hsla(211, 22%, 56%, 1)"
                     />
                   </svg>
                 </div>
                 <p
-                  class="c5"
+                  class="c4"
                   data-blade-component="text"
                 >
                   Level 2
@@ -2382,20 +2424,20 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                 data-blade-component="base-box"
               >
                 <ul
-                  class="c0"
+                  class="List__StyledUnorderedList-bqf6r7-1 c0"
                   data-blade-component="list"
                   role="list"
                 >
                   <li
-                    class=" c6"
+                    class=" c5"
                     data-blade-component="list-item"
                   >
                     <div
-                      class="c3"
+                      class="c2"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c7"
+                        class="c6"
                         data-blade-component="base-box"
                       >
                         <svg
@@ -2409,7 +2451,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                         >
                           <rect
                             data-blade-component="svg-rect"
-                            fill="hsla(214, 18%, 69%, 1)"
+                            fill="hsla(211, 22%, 56%, 1)"
+                            fill-opacity="0.48"
                             height="6px"
                             rx="1px"
                             width="6px"
@@ -2417,7 +2460,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                         </svg>
                       </div>
                       <p
-                        class="c5"
+                        class="c4"
                         data-blade-component="text"
                       >
                         Level 3
@@ -2442,7 +2485,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
   margin: 0px;
 }
 
-.c3.c3.c3.c3.c3 {
+.c2.c2.c2.c2.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2457,7 +2500,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
   margin-bottom: 8px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c3.c3.c3.c3.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2469,28 +2512,28 @@ exports[`<List /> should render unordered List of small size 1`] = `
   margin-right: 8px;
 }
 
-.c1.c1.c1.c1.c1 {
-  margin-top: 8px;
-}
-
-.c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c4.c4.c4.c4.c4 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c2.c2.c2.c2.c2 {
+.c1.c1.c1.c1.c1 {
   margin-left: 4px;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   margin-left: 16px;
 }
 
@@ -2500,20 +2543,20 @@ exports[`<List /> should render unordered List of small size 1`] = `
     data-blade-component="base-box"
   >
     <ul
-      class="c0 c1"
+      class="List__StyledUnorderedList-bqf6r7-1 c0"
       data-blade-component="list"
       role="list"
     >
       <li
-        class=" c2"
+        class=" c1"
         data-blade-component="list-item"
       >
         <div
-          class="c3"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c4"
+            class="c3"
             data-blade-component="base-box"
           >
             <svg
@@ -2529,13 +2572,14 @@ exports[`<List /> should render unordered List of small size 1`] = `
                 cx="3px"
                 cy="3px"
                 data-blade-component="svg-circle"
-                fill="hsla(214, 18%, 69%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
+                fill-opacity="0.48"
                 r="3px"
               />
             </svg>
           </div>
           <p
-            class="c5"
+            class="c4"
             data-blade-component="text"
           >
             Level 1
@@ -2546,20 +2590,20 @@ exports[`<List /> should render unordered List of small size 1`] = `
           data-blade-component="base-box"
         >
           <ul
-            class="c0"
+            class="List__StyledUnorderedList-bqf6r7-1 c0"
             data-blade-component="list"
             role="list"
           >
             <li
-              class=" c6"
+              class=" c5"
               data-blade-component="list-item"
             >
               <div
-                class="c3"
+                class="c2"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c4"
+                  class="c3"
                   data-blade-component="base-box"
                 >
                   <svg
@@ -2576,12 +2620,12 @@ exports[`<List /> should render unordered List of small size 1`] = `
                       cy="3px"
                       data-blade-component="svg-circle"
                       r="2.5px"
-                      stroke="hsla(214, 18%, 69%, 1)"
+                      stroke="hsla(211, 22%, 56%, 1)"
                     />
                   </svg>
                 </div>
                 <p
-                  class="c5"
+                  class="c4"
                   data-blade-component="text"
                 >
                   Level 2
@@ -2592,20 +2636,20 @@ exports[`<List /> should render unordered List of small size 1`] = `
                 data-blade-component="base-box"
               >
                 <ul
-                  class="c0"
+                  class="List__StyledUnorderedList-bqf6r7-1 c0"
                   data-blade-component="list"
                   role="list"
                 >
                   <li
-                    class=" c6"
+                    class=" c5"
                     data-blade-component="list-item"
                   >
                     <div
-                      class="c3"
+                      class="c2"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c4"
+                        class="c3"
                         data-blade-component="base-box"
                       >
                         <svg
@@ -2619,7 +2663,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                         >
                           <rect
                             data-blade-component="svg-rect"
-                            fill="hsla(214, 18%, 69%, 1)"
+                            fill="hsla(211, 22%, 56%, 1)"
+                            fill-opacity="0.48"
                             height="6px"
                             rx="1px"
                             width="6px"
@@ -2627,7 +2672,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                         </svg>
                       </div>
                       <p
-                        class="c5"
+                        class="c4"
                         data-blade-component="text"
                       >
                         Level 3
diff --git a/packages/blade/src/components/Modal/Modal.web.tsx b/packages/blade/src/components/Modal/Modal.web.tsx
index fae5f35bbcb..066e9fbcf29 100644
--- a/packages/blade/src/components/Modal/Modal.web.tsx
+++ b/packages/blade/src/components/Modal/Modal.web.tsx
@@ -159,7 +159,7 @@ const Modal = ({
                 maxHeight={modalMaxHeight}
                 width={`calc(100vw - ${makeSize(modalResponsiveScreenGap)})`}
                 borderRadius={modalBorderRadius}
-                backgroundColor={theme.colors.surface.background.level2.lowContrast}
+                backgroundColor="popup.background.subtle"
                 position="absolute"
                 display="flex"
                 flexDirection="column"
diff --git a/packages/blade/src/components/Modal/ModalBackdrop.tsx b/packages/blade/src/components/Modal/ModalBackdrop.tsx
index 3311217dfff..00168c36e16 100644
--- a/packages/blade/src/components/Modal/ModalBackdrop.tsx
+++ b/packages/blade/src/components/Modal/ModalBackdrop.tsx
@@ -16,7 +16,7 @@ const StyledModalBackdrop = styled(FloatingOverlay)(({ theme }) => {
       : castWebType(theme.motion.easing.exit.revealing),
     transitionProperty: 'opacity',
     opacity: isVisible ? 1 : 0,
-    backgroundColor: theme.colors.surface.overlay.background[800],
+    backgroundColor: theme.colors.overlay.background.subtle,
   };
 });
 
diff --git a/packages/blade/src/components/Modal/ModalHeader.web.tsx b/packages/blade/src/components/Modal/ModalHeader.web.tsx
index 6ca94fcd217..46c87e87763 100644
--- a/packages/blade/src/components/Modal/ModalHeader.web.tsx
+++ b/packages/blade/src/components/Modal/ModalHeader.web.tsx
@@ -6,7 +6,6 @@ import { makeSize } from '~utils';
 import { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';
 import { BaseBox } from '~components/Box/BaseBox';
 import { size } from '~tokens/global';
-import { useTheme } from '~components/BladeProvider';
 import { IconButton } from '~components/Button/IconButton';
 import { CloseIcon } from '~components/Icons';
 import { MetaConstants } from '~utils/metaAttribute';
@@ -25,7 +24,6 @@ const _ModalHeader = ({
   trailing,
 }: ModalHeaderProps): React.ReactElement => {
   const { close, defaultInitialFocusRef } = useModalContext();
-  const { theme } = useTheme();
 
   const isHeaderEmpty = !(title || subtitle || leading || trailing);
   return isHeaderEmpty ? (
@@ -39,7 +37,7 @@ const _ModalHeader = ({
       width={makeSize(size[28])}
       height={makeSize(size[28])}
       flexShrink={0}
-      backgroundColor={theme.colors.surface.background.level2.lowContrast}
+      backgroundColor="popup.background.subtle"
       borderRadius="max"
       zIndex={modalHighestZIndex}
     >
diff --git a/packages/blade/src/components/Modal/__tests__/Modal.web.test.tsx b/packages/blade/src/components/Modal/__tests__/Modal.web.test.tsx
index 27017f88c72..559e1e1dcb0 100644
--- a/packages/blade/src/components/Modal/__tests__/Modal.web.test.tsx
+++ b/packages/blade/src/components/Modal/__tests__/Modal.web.test.tsx
@@ -52,8 +52,8 @@ describe('Modal', () => {
         <ModalHeader
           title="Address Details"
           subtitle="Saving addresses will improve your checkout experience"
-          trailing={<Badge variant="notice">Action Needed</Badge>}
-          titleSuffix={<Counter variant="positive" value={2} />}
+          trailing={<Badge color="notice">Action Needed</Badge>}
+          titleSuffix={<Counter color="positive" value={2} />}
         />
         <ModalBody>
           <Text>Test Content</Text>
diff --git a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap
index a7a1c867d71..1947737e2ca 100644
--- a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap
+++ b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap
@@ -113,7 +113,8 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
 }
 
 .c13.c13.c13.c13.c13 {
-  background-color: hsla(155,100%,31%,0.09);
+  min-height: 20px;
+  background-color: hsla(150,100%,32%,0.09);
 }
 
 .c15.c15.c15.c15.c15 {
@@ -133,16 +134,13 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding-top: 2px;
-  padding-bottom: 2px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 .c23.c23.c23.c23.c23 {
-  border-width: 0px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-style: solid;
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-bottom-style: solid;
 }
 
 .c25.c25.c25.c25.c25 {
@@ -174,6 +172,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c18.c18.c18.c18.c18 {
@@ -182,10 +181,12 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
 
 .c19.c19.c19.c19.c19 {
   text-align: left;
-  background-color: hsla(36,100%,44%,0.09);
+  height: 20px;
+  background-color: hsla(25,90%,48%,0.09);
 }
 
 .c24.c24.c24.c24.c24 {
+  border-width: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   -webkit-box-flex: 1;
@@ -195,27 +196,35 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
 }
 
 .c9.c9.c9.c9.c9 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c16.c16.c16.c16.c16 {
-  color: hsla(160,100%,26%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(150,100%,27%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -227,54 +236,70 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
 }
 
 .c17.c17.c17.c17.c17 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c26.c26.c26.c26.c26 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c31.c31.c31.c31.c31 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c21.c21.c21.c21.c21 {
-  color: hsla(38,97%,38%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(25,85%,42%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -302,7 +327,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -312,17 +337,23 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
 }
 
 .c22.c22.c22.c22.c22:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c22.c22.c22.c22.c22:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c22.c22.c22.c22.c22:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c1.c1.c1.c1.c1 {
@@ -333,11 +364,11 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
   -webkit-transition-property: opacity;
   transition-property: opacity;
   opacity: 0;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
 }
 
 .c3.c3.c3.c3.c3 {
-  box-shadow: 0 24px 48px -12px hsla(217,56%,17%,0.18);
+  box-shadow: 0px 16px 48px -4px hsla(217,56%,17%,0.18);
   position: fixed;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
@@ -348,7 +379,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
 }
 
 .c20.c20.c20.c20.c20 {
-  background-color: hsla(36,100%,44%,0.09);
+  background-color: hsla(25,90%,48%,0.09);
   border-radius: 9999px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -363,7 +394,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
 }
 
 .c14.c14.c14.c14.c14 {
-  background-color: hsla(155,100%,31%,0.09);
+  background-color: hsla(150,100%,32%,0.09);
   border-radius: 9999px;
   max-width: 120px;
   display: -webkit-box;
@@ -382,10 +413,10 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -401,6 +432,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -415,25 +447,25 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
 }
 
 .c28.c28.c28.c28.c28:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c28.c28.c28.c28.c28:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c28.c28.c28.c28.c28:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c28.c28.c28.c28.c28 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -455,31 +487,31 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
 
 @media screen and (min-width:320px) {
   .c23.c23.c23.c23.c23 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c23.c23.c23.c23.c23 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c23.c23.c23.c23.c23 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c23.c23.c23.c23.c23 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c23.c23.c23.c23.c23 {
-    border-style: solid;
+    border-bottom-style: solid;
   }
 }
 
@@ -534,12 +566,12 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
                 class="c8"
                 data-blade-component="base-box"
               >
-                <h6
+                <p
                   class="c9"
-                  data-blade-component="heading"
+                  data-blade-component="text"
                 >
                   Address Details
-                </h6>
+                </p>
                 <div
                   class="c10"
                   data-blade-component="base-box"
@@ -726,14 +758,18 @@ exports[`Modal renders a basic Modal 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -746,11 +782,11 @@ exports[`Modal renders a basic Modal 1`] = `
   -webkit-transition-property: opacity;
   transition-property: opacity;
   opacity: 0;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
 }
 
 .c3.c3.c3.c3.c3 {
-  box-shadow: 0 24px 48px -12px hsla(217,56%,17%,0.18);
+  box-shadow: 0px 16px 48px -4px hsla(217,56%,17%,0.18);
   position: fixed;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
@@ -828,14 +864,18 @@ exports[`Modal renders a basic Modal of large size 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -848,11 +888,11 @@ exports[`Modal renders a basic Modal of large size 1`] = `
   -webkit-transition-property: opacity;
   transition-property: opacity;
   opacity: 0;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
 }
 
 .c3.c3.c3.c3.c3 {
-  box-shadow: 0 24px 48px -12px hsla(217,56%,17%,0.18);
+  box-shadow: 0px 16px 48px -4px hsla(217,56%,17%,0.18);
   position: fixed;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
@@ -930,14 +970,18 @@ exports[`Modal renders a basic Modal of medium size 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -950,11 +994,11 @@ exports[`Modal renders a basic Modal of medium size 1`] = `
   -webkit-transition-property: opacity;
   transition-property: opacity;
   opacity: 0;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
 }
 
 .c3.c3.c3.c3.c3 {
-  box-shadow: 0 24px 48px -12px hsla(217,56%,17%,0.18);
+  box-shadow: 0px 16px 48px -4px hsla(217,56%,17%,0.18);
   position: fixed;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
diff --git a/packages/blade/src/components/Modal/docs/ModalDocs.tsx b/packages/blade/src/components/Modal/docs/ModalDocs.tsx
index e9c127c9abe..ada4cfc715c 100644
--- a/packages/blade/src/components/Modal/docs/ModalDocs.tsx
+++ b/packages/blade/src/components/Modal/docs/ModalDocs.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Playground } from './stories';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
-import { Code, Heading, Text, Title } from '~components/Typography';
+import { Code, Heading, Text } from '~components/Typography';
 import { Sandbox } from '~utils/storybook/Sandbox';
 import { Box } from '~components/Box';
 import { ArgsTable } from '~utils/storybook/ArgsTable';
@@ -16,21 +16,16 @@ const ModalDocs = (): React.ReactElement => {
       componentDescription="Modals are often used to present information, notifications, or requests that require immediate attention or confirmation from the user"
       imports=""
       showStorybookControls={false}
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=39809-559333&t=j3ZK6zZSwP5CJ8Al-0',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?type=design&node-id=16459-684636&t=7KYEW7ENNS5GmLIO-0',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=39809-559333&t=j3ZK6zZSwP5CJ8Al-0"
     >
       <Box as="section">
-        <Title size="medium">Playground</Title>
+        <Heading size="xlarge">Playground</Heading>
         <Sandbox editorHeight={400}>{Playground}</Sandbox>
       </Box>
 
-      <Title size="medium" marginBottom="spacing.4">
+      <Heading size="xlarge" marginBottom="spacing.4">
         ⚠️ Modal for mWeb and React Native
-      </Title>
+      </Heading>
       <Text>
         Modals should not be used on mWeb & React Native Apps. Instead we should use{' '}
         <Link href="/?path=/story/components-bottomsheet--default">BottomSheet Component</Link> for
@@ -61,9 +56,9 @@ const ModalDocs = (): React.ReactElement => {
       </List>
 
       <BaseBox id="modal" as="section">
-        <Title size="medium" marginBottom="spacing.4">
+        <Heading size="xlarge" marginBottom="spacing.4">
           Modal
-        </Title>
+        </Heading>
         <Text>A Modal in Blade is usually a composite of 4 elements -</Text>
         <List variant="ordered-filled" marginY="spacing.5">
           <ListItem>Modal - Handles opening / closing of Modal</ListItem>
@@ -77,38 +72,38 @@ const ModalDocs = (): React.ReactElement => {
         marginBottom="spacing.4"
         data={{
           isOpen: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">boolean</Code> (required)
               </Text>
               Toggles modal state
             </Text>
           ),
           onDismiss: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">function</Code> (required)
               </Text>
               Called when the modal is closed, either by user state, hitting esc or tapping backdrop
             </Text>
           ),
           size: (
-            <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
               <Text size="small">{`'small' | 'medium' | 'large'`}</Text>
               Size of the modal
             </Text>
           ),
           initialFocusRef: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">function</Code>
               </Text>
               ref element you want to get keyboard focus when opening the modal
             </Text>
           ),
           accessibilityLabel: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">string</Code>
               </Text>
               The accessibility label (aria-label) for the Modal.
@@ -121,8 +116,8 @@ const ModalDocs = (): React.ReactElement => {
             </Text>
           ),
           zIndex: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">number</Code>
               </Text>
               Sets the z-index of the modal
@@ -135,32 +130,32 @@ const ModalDocs = (): React.ReactElement => {
         marginBottom="spacing.4"
         data={{
           title: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">string</Code>
               </Text>
               Title of the Header
             </Text>
           ),
           subtitle: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">string</Code>
               </Text>
               Subtitle of the Header
             </Text>
           ),
           leading: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">React.ReactNode</Code>
               </Text>
               leading asset or icon to be placed at the left most side of the ModalHeader
             </Text>
           ),
           trailing: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">Badge</Code>,<Code>Link</Code>,<Code>Text</Code>,
                 <Code>IconButton</Code>
               </Text>
@@ -168,8 +163,8 @@ const ModalDocs = (): React.ReactElement => {
             </Text>
           ),
           titleSuffix: (
-            <Text size="small" type="subdued">
-              <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
+              <Text size="small" color="surface.text.gray.subtle">
                 <Code size="medium">Counter</Code>
               </Text>
               A component to be placed adjacent to the title text
@@ -186,13 +181,13 @@ const ModalDocs = (): React.ReactElement => {
             <Text>
               [<Code>{'<ModalBody />'}</Code>, <Code>{'<ModalHeader />'}</Code>,
               <Code>{'<ModalHeader />'}</Code>]
-              <Text size="small" type="subdued">
+              <Text size="small" color="surface.text.gray.subtle">
                 (required)
               </Text>
             </Text>
           ),
           padding: (
-            <Text size="small" type="subdued">
+            <Text size="small" color="surface.text.gray.subtle">
               <Text size="small">{`'spacing.0' | 'spacing.6'`}</Text>
               {`Padding for the Modal Body. Default : 'spacing.6'`}
             </Text>
@@ -207,7 +202,7 @@ const ModalDocs = (): React.ReactElement => {
           children: (
             <Text>
               <Code>{'React.ReactElement'}</Code>
-              <Text size="small" type="subdued">
+              <Text size="small" color="surface.text.gray.subtle">
                 (required)
               </Text>
             </Text>
diff --git a/packages/blade/src/components/Modal/docs/ModalExamples.stories.tsx b/packages/blade/src/components/Modal/docs/ModalExamples.stories.tsx
index d588d0d3281..e3cafe63950 100644
--- a/packages/blade/src/components/Modal/docs/ModalExamples.stories.tsx
+++ b/packages/blade/src/components/Modal/docs/ModalExamples.stories.tsx
@@ -3,11 +3,11 @@ import type { StoryFn, Meta } from '@storybook/react';
 import { Modal } from '../Modal';
 import {
   BasicModalStory,
-  ModalStackingStory,
-  ModalWithHeaderFooterStory,
   ModalWithNoBodyPaddingStory,
   ModalWithScrollableBackgroundStory,
   ModalWithScrollableContentStory,
+  ModalWithHeaderFooterStory,
+  ModalStackingStory,
 } from './stories';
 import { Sandbox } from '~utils/storybook/Sandbox';
 
diff --git a/packages/blade/src/components/Modal/docs/SimpleModal.stories.tsx b/packages/blade/src/components/Modal/docs/SimpleModal.stories.tsx
index fdfd78d4c5c..a3fe7828463 100644
--- a/packages/blade/src/components/Modal/docs/SimpleModal.stories.tsx
+++ b/packages/blade/src/components/Modal/docs/SimpleModal.stories.tsx
@@ -4,9 +4,9 @@ import isChromatic from 'chromatic/isChromatic';
 import type { ModalProps } from '../Modal';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '../Modal';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
-import { Radio, RadioGroup } from '~components/Radio';
 import { Box } from '~components/Box';
 import { Button } from '~components/Button';
+import { Radio, RadioGroup } from '~components/Radio';
 
 export default {
   title: 'Components/Modal/SimpleModal',
@@ -54,7 +54,7 @@ const ModalTemplate: StoryFn<typeof Modal> = ({ size }) => {
         </ModalBody>
         <ModalFooter>
           <Box display="flex" gap="spacing.3" justifyContent="flex-end" width="100%">
-            <Button variant="secondary">Remove address</Button>
+            <Button variant="tertiary">Remove address</Button>
             <Button>Add address</Button>
           </Box>
         </ModalFooter>
diff --git a/packages/blade/src/components/Popover/Popover.native.tsx b/packages/blade/src/components/Popover/Popover.native.tsx
index 81e778bba52..1d2f37bdaf6 100644
--- a/packages/blade/src/components/Popover/Popover.native.tsx
+++ b/packages/blade/src/components/Popover/Popover.native.tsx
@@ -136,8 +136,8 @@ const Popover = ({
               context={context}
               width={ARROW_WIDTH}
               height={ARROW_HEIGHT}
-              fillColor={theme.colors.surface.popup.background}
-              strokeColor={theme.colors.brand.gray[400].lowContrast}
+              fillColor={theme.colors.popup.background.subtle}
+              strokeColor={theme.colors.popup.border.subtle}
             />
           }
         >
diff --git a/packages/blade/src/components/Popover/Popover.stories.tsx b/packages/blade/src/components/Popover/Popover.stories.tsx
index 3fc90bb7242..999ba8b6523 100644
--- a/packages/blade/src/components/Popover/Popover.stories.tsx
+++ b/packages/blade/src/components/Popover/Popover.stories.tsx
@@ -14,31 +14,26 @@ import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { Sandbox } from '~utils/storybook/Sandbox';
 import { Amount } from '~components/Amount';
 import { Divider } from '~components/Divider';
-import { Checkbox } from '~components/Checkbox';
 import iconMap from '~components/Icons/iconMap';
 import { InfoIcon, MoonIcon, SearchIcon, SunIcon } from '~components/Icons';
-import { Radio, RadioGroup } from '~components/Radio';
 import { Badge } from '~components/Badge';
 import { Counter } from '~components/Counter';
 import { List, ListItem, ListItemLink, ListItemText } from '~components/List';
-import { TextInput } from '~components/Input/TextInput';
 import { IconButton } from '~components/Button/IconButton';
 import { isReactNative } from '~utils';
 import { Alert } from '~components/Alert';
 import BaseBox from '~components/Box/BaseBox';
 import { PopoverVsTooltip } from '~utils/storybook/PopoverVsTooltip';
+import { TextInput } from '~components/Input/TextInput';
+import { Radio, RadioGroup } from '~components/Radio';
+import { Checkbox } from '~components/Checkbox';
 
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
       componentName="Popover"
       componentDescription="The popover typically provides additional context about the element or its function. A popover is always triggered by a mouse hover on desktop and on tap on mobile."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=2875-40870&mode=design&t=UP0cRLPEhmoPYo3b-0',
-        bankingTheme:
-          'https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=2875-40870&mode=design&t=UP0cRLPEhmoPYo3b-0',
-      }}
+      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=2875-40870&mode=design&t=UP0cRLPEhmoPYo3b-0"
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -112,24 +107,24 @@ const Content = () => {
         padding="spacing.3"
         flexDirection="column"
         borderRadius="medium"
-        backgroundColor="surface.background.level2.lowContrast"
+        backgroundColor="surface.background.gray.intense"
         borderWidth="thin"
-        borderColor="surface.border.normal.lowContrast"
+        borderColor="surface.border.gray.subtle"
       >
         <Box display="flex" justifyContent="space-between" gap="spacing.5">
           <Text size="medium">Gross Settlements</Text>
-          <Amount size="body-medium" value={5000} />
+          <Amount size="medium" value={5000} />
         </Box>
         <Box display="flex" justifyContent="space-between" gap="spacing.5">
           <Text size="medium">Deductions</Text>
-          <Amount intent="negative" size="body-medium" value={250} />
+          <Amount color="negative" size="medium" value={250} />
         </Box>
-        <Divider />
+        <Divider variant="subtle" />
         <Box display="flex" justifyContent="space-between" gap="spacing.5">
-          <Text weight="bold" size="medium">
+          <Text weight="semibold" size="medium">
             Net Settlements
           </Text>
-          <Amount size="body-medium-bold" value={4750} />
+          <Amount size="medium" weight="semibold" value={4750} />
         </Box>
       </Box>
     </Box>
@@ -161,7 +156,7 @@ const PopoverTemplate: StoryFn<typeof Popover> = (args) => {
     <Center>
       <Popover
         {...args}
-        titleLeading={<LeadingIcon color="surface.text.normal.lowContrast" size="medium" />}
+        titleLeading={<LeadingIcon color="interactive.icon.gray.normal" size="medium" />}
       >
         <Button>View Settlement</Button>
       </Popover>
@@ -210,7 +205,7 @@ export const Controlled: StoryFn<typeof Popover> = (args) => {
               setIsOpen(isOpen);
             }}
             footer={<FooterContent onClick={() => setIsOpen(false)} />}
-            titleLeading={<LeadingIcon color="surface.text.normal.lowContrast" size="medium" />}
+            titleLeading={<LeadingIcon color="interactive.icon.gray.normal" size="medium" />}
           >
             <Button onClick={() => setIsOpen((prev) => !prev)}>View Settlement</Button>
           </Popover>
@@ -287,36 +282,38 @@ export const PopoverInteractiveWrapperTemplate: StoryFn<typeof Popover> = (args)
     <>
       <Text as="span">
         With{' '}
-        <Text weight="bold" as="span">
+        <Text weight="semibold" as="span">
           PopoverInteractiveWrapper
         </Text>{' '}
         you can make Popover open when clicking non-interactive elements like Icons,Badges,Counter
         etc
       </Text>
-      <Text type="muted">Note: PopoverInteractiveWrapper is a button by default.</Text>
+      <Text color="surface.text.gray.muted">
+        Note: PopoverInteractiveWrapper is a button by default.
+      </Text>
       <Center>
         <Box display="flex" flexDirection="row" alignItems="center" gap="spacing.3">
           <Popover
             {...args}
-            titleLeading={<LeadingIcon color="surface.text.normal.lowContrast" size="medium" />}
+            titleLeading={<LeadingIcon color="interactive.icon.gray.normal" size="medium" />}
           >
             <PopoverInteractiveWrapper display="inline-block">
-              <InfoIcon color="surface.text.normal.lowContrast" size="large" />
+              <InfoIcon color="interactive.icon.gray.normal" size="large" />
             </PopoverInteractiveWrapper>
           </Popover>
 
           <Popover
             {...args}
-            titleLeading={<LeadingIcon color="surface.text.normal.lowContrast" size="medium" />}
+            titleLeading={<LeadingIcon color="interactive.icon.gray.normal" size="medium" />}
           >
             <PopoverInteractiveWrapper>
-              <Badge variant="information">NEW</Badge>
+              <Badge color="information">NEW</Badge>
             </PopoverInteractiveWrapper>
           </Popover>
 
           <Popover
             {...args}
-            titleLeading={<LeadingIcon color="surface.text.normal.lowContrast" size="medium" />}
+            titleLeading={<LeadingIcon color="interactive.icon.gray.normal" size="medium" />}
           >
             <PopoverInteractiveWrapper>
               <Counter value={20} />
@@ -351,7 +348,7 @@ const MyCustomTriggerButton = React.forwardRef<
   return (
     // just spread the props
     <BaseBox
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       borderRadius="medium"
       role="button"
@@ -377,44 +374,44 @@ const CustomTriggerDocs = () => {
       </ListItem>
       <ListItem>
         Make sure that your component can receive focus{' '}
-        <ListItemText as="span" type="subdued">
+        <ListItemText as="span" color="surface.text.gray.muted">
           (eg: have tabIndex:0)
         </ListItemText>
       </ListItem>
       <ListItem>
         Forward event handlers to the custom trigger{' '}
-        <ListItemText as="span" type="subdued">
+        <ListItemText as="span" color="surface.text.gray.muted">
           (you can import the PopoverTriggerProps type from blade when using TypeScript)
         </ListItemText>
         <List>
           <ListItem>onClick</ListItem>
           <ListItem>
             onMouseDown{' '}
-            <ListItemText as="span" type="subdued">
+            <ListItemText as="span" color="surface.text.gray.muted">
               (not needed if your trigger is a button component)
             </ListItemText>
           </ListItem>
           <ListItem>
             onPointerDown{' '}
-            <ListItemText as="span" type="subdued">
+            <ListItemText as="span" color="surface.text.gray.muted">
               (not needed if your trigger is a button component)
             </ListItemText>
           </ListItem>
           <ListItem>
             onKeyDown{' '}
-            <ListItemText as="span" type="subdued">
+            <ListItemText as="span" color="surface.text.gray.muted">
               (not needed if your trigger is a button component)
             </ListItemText>
           </ListItem>
           <ListItem>
             onKeyUp{' '}
-            <ListItemText as="span" type="subdued">
+            <ListItemText as="span" color="surface.text.gray.muted">
               (not needed if your trigger is a button component)
             </ListItemText>
           </ListItem>
           <ListItem>
             onTouchEnd{' '}
-            <ListItemText as="span" type="subdued">
+            <ListItemText as="span" color="surface.text.gray.muted">
               (react-native only)
             </ListItemText>
           </ListItem>
@@ -441,7 +438,7 @@ export const CustomTrigger: StoryFn<typeof Popover> = (args) => {
       <Center>
         <Popover
           {...args}
-          titleLeading={<LeadingIcon color="surface.text.normal.lowContrast" size="medium" />}
+          titleLeading={<LeadingIcon color="interactive.icon.gray.normal" size="medium" />}
         >
           <MyCustomTriggerButton>View Settlements</MyCustomTriggerButton>
         </Popover>
@@ -470,7 +467,7 @@ export const InitialFocus: StoryFn<typeof Popover> = (args) => {
           {...args}
           initialFocusRef={buttonRef}
           footer={<FooterContent ref={buttonRef} />}
-          titleLeading={<LeadingIcon color="surface.text.normal.lowContrast" size="medium" />}
+          titleLeading={<LeadingIcon color="interactive.icon.gray.normal" size="medium" />}
         >
           <Button>View Settlement</Button>
         </Popover>
@@ -490,8 +487,8 @@ const StoriesPanelSwitchAlert = ({ shouldShow }: { shouldShow: boolean }) => {
     <Alert
       title="Please switch to stories panel"
       marginBottom="spacing.5"
-      intent="notice"
       description="Open this example in the 'Stories' panel and reload the page for better experince"
+      color="notice"
     />
   ) : null;
 };
@@ -511,7 +508,7 @@ export const ProductUseCase1: StoryFn<typeof Popover> = (args, context) => {
     <Box>
       <StoriesPanelSwitchAlert shouldShow={isInDocsMode} />
       <Text as="span">
-        <Text as="span" weight="bold">
+        <Text as="span" weight="semibold">
           Product Usecase Example:
         </Text>
         <Text>
@@ -585,7 +582,7 @@ export const ProductUseCase2: StoryFn<typeof Popover> = (args, context) => {
     <Box>
       <StoriesPanelSwitchAlert shouldShow={isInDocsMode} />
       <Text as="span">
-        <Text as="span" weight="bold">
+        <Text as="span" weight="semibold">
           Product Usecase Example:
         </Text>
         <Text>
@@ -594,7 +591,6 @@ export const ProductUseCase2: StoryFn<typeof Popover> = (args, context) => {
         </Text>
       </Text>
       <Text marginY="spacing.5">isDarkMode On? {isDarkMode ? 'Yes' : 'No'}</Text>
-
       <Box marginTop="spacing.8">
         <Popover
           placement="bottom-end"
@@ -607,11 +603,11 @@ export const ProductUseCase2: StoryFn<typeof Popover> = (args, context) => {
             }
           }}
           title="Dark Mode"
-          titleLeading={<SunIcon color="surface.text.normal.lowContrast" size="small" />}
+          titleLeading={<SunIcon color="interactive.icon.gray.normal" size="small" />}
           content={
             <Text as="span">
               Want a more comfortable reading experience?{' '}
-              <Text as="span" weight="bold">
+              <Text as="span" weight="semibold">
                 Try dark mode
               </Text>
             </Text>
@@ -649,7 +645,7 @@ export const ProductUseCase3: StoryFn<typeof Popover> = (args, context) => {
     <Box>
       <StoriesPanelSwitchAlert shouldShow={isInDocsMode} />
       <Text as="span">
-        <Text as="span" weight="bold">
+        <Text as="span" weight="semibold">
           Product Usecase Example:
         </Text>
         <Text>
@@ -657,7 +653,6 @@ export const ProductUseCase3: StoryFn<typeof Popover> = (args, context) => {
           opens once and never again.
         </Text>
       </Text>
-
       <Box width="400px" marginTop="spacing.8">
         <Popover
           isOpen={isOpen}
diff --git a/packages/blade/src/components/Popover/Popover.web.tsx b/packages/blade/src/components/Popover/Popover.web.tsx
index 3e3cab2a0e2..3938334ee74 100644
--- a/packages/blade/src/components/Popover/Popover.web.tsx
+++ b/packages/blade/src/components/Popover/Popover.web.tsx
@@ -162,8 +162,8 @@ const Popover = ({
                     context={context}
                     width={ARROW_WIDTH}
                     height={ARROW_HEIGHT}
-                    fillColor={theme.colors.surface.popup.background}
-                    strokeColor={theme.colors.brand.gray[400].lowContrast}
+                    fillColor={theme.colors.popup.background.subtle}
+                    strokeColor={theme.colors.popup.border.subtle}
                   />
                 }
               >
diff --git a/packages/blade/src/components/Popover/PopoverContent.tsx b/packages/blade/src/components/Popover/PopoverContent.tsx
index 3520a6547eb..ce94ac9aca7 100644
--- a/packages/blade/src/components/Popover/PopoverContent.tsx
+++ b/packages/blade/src/components/Popover/PopoverContent.tsx
@@ -5,7 +5,7 @@ import type { PopoverContentProps } from './types';
 import { PopoverCloseButton } from './PopoverCloseButton';
 import { usePopoverContext } from './PopoverContext';
 import BaseBox from '~components/Box/BaseBox';
-import { Heading } from '~components/Typography';
+import { Text } from '~components/Typography';
 import { isReactNative } from '~utils';
 import { useIsMobile } from '~utils/useIsMobile';
 
@@ -46,9 +46,9 @@ const PopoverHeader = ({ title, titleLeading }: PopoverHeaderProps): React.React
         : null}
       {title ? (
         <BaseBox id={titleId} paddingRight="spacing.4">
-          <Heading size="small" weight="bold" type="normal">
+          <Text size="large" weight="semibold">
             {title}
-          </Heading>
+          </Text>
         </BaseBox>
       ) : null}
       <BaseBox marginLeft="auto">
diff --git a/packages/blade/src/components/Popover/PopoverInteractiveWrapper.web.tsx b/packages/blade/src/components/Popover/PopoverInteractiveWrapper.web.tsx
index 88cf44a1402..84829607e3f 100644
--- a/packages/blade/src/components/Popover/PopoverInteractiveWrapper.web.tsx
+++ b/packages/blade/src/components/Popover/PopoverInteractiveWrapper.web.tsx
@@ -5,6 +5,7 @@ import type { BaseBoxProps } from '~components/Box/BaseBox';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { makeAccessible } from '~utils/makeAccessible';
 import { useMemoizedStyles } from '~components/Box/BaseBox/useMemoizedStyles';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 
 const StyledPopoverInteractiveWrapper = styled.button((props) => {
   const cssObject = useMemoizedStyles(props as never);
@@ -16,9 +17,7 @@ const StyledPopoverInteractiveWrapper = styled.button((props) => {
     cursor: 'pointer',
     lineHeight: 0,
     '&:focus-visible': {
-      // TODO: refactor to use focus ring token
-      outline: 'none',
-      boxShadow: `0px 0px 0px 4px ${props.theme.colors.brand.primary[400]}`,
+      ...getFocusRingStyles({ theme: props.theme }),
     },
   };
 });
diff --git a/packages/blade/src/components/Popover/__tests__/Popover.native.test.tsx b/packages/blade/src/components/Popover/__tests__/Popover.native.test.tsx
index 65cf54415b4..9e424c78132 100644
--- a/packages/blade/src/components/Popover/__tests__/Popover.native.test.tsx
+++ b/packages/blade/src/components/Popover/__tests__/Popover.native.test.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { Popover, PopoverInteractiveWrapper } from '..';
 import { Button } from '~components/Button';
 import { Text } from '~components/Typography';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 import renderWithTheme from '~utils/testing/renderWithTheme.native';
 import { InfoIcon } from '~components/Icons';
 
@@ -33,7 +33,7 @@ describe('<Popover />', () => {
     fireEvent(getByRole('button', { name: buttonText }), 'touchEnd');
 
     await act(async () => {
-      jest.advanceTimersByTime(paymentTheme.motion.duration.quick);
+      jest.advanceTimersByTime(bladeTheme.motion.duration.quick);
     });
     expect(getByTestId(popoverModalId)).toHaveProp('visible', true);
 
@@ -46,7 +46,7 @@ describe('<Popover />', () => {
     const { toJSON, getByRole } = renderWithTheme(
       <Popover
         title="This is title"
-        titleLeading={<InfoIcon color="surface.text.placeholder.lowContrast" size="small" />}
+        titleLeading={<InfoIcon color="surface.icon.gray.disabled" size="small" />}
         content={<Text>{popoverContent}</Text>}
         footer={<Text>Footer</Text>}
       >
@@ -56,7 +56,7 @@ describe('<Popover />', () => {
     fireEvent(getByRole('button', { name: buttonText }), 'touchEnd');
 
     await act(async () => {
-      jest.advanceTimersByTime(paymentTheme.motion.duration.quick);
+      jest.advanceTimersByTime(bladeTheme.motion.duration.quick);
     });
     expect(toJSON()).toMatchSnapshot();
   });
@@ -99,7 +99,7 @@ describe('<Popover />', () => {
 
     // wait for closing animation to finish
     await act(async () => {
-      jest.advanceTimersByTime(paymentTheme.motion.duration.gentle);
+      jest.advanceTimersByTime(bladeTheme.motion.duration.gentle);
     });
     expect(getByTestId(popoverModalId)).toHaveProp('visible', false);
   });
@@ -123,7 +123,7 @@ describe('<Popover />', () => {
 
     // wait for closing animation to finish
     await act(async () => {
-      jest.advanceTimersByTime(paymentTheme.motion.duration.gentle);
+      jest.advanceTimersByTime(bladeTheme.motion.duration.gentle);
     });
     expect(getByTestId(popoverModalId)).toHaveProp('visible', false);
   });
@@ -165,7 +165,7 @@ describe('<Popover />', () => {
 
     // wait for closing animation to finish
     await act(async () => {
-      jest.advanceTimersByTime(paymentTheme.motion.duration.gentle);
+      jest.advanceTimersByTime(bladeTheme.motion.duration.gentle);
     });
 
     expect(getByTestId(popoverModalId)).toHaveProp('visible', false);
@@ -201,7 +201,7 @@ describe('<Popover />', () => {
 
     // wait for closing animation to finish
     await act(async () => {
-      jest.advanceTimersByTime(paymentTheme.motion.duration.gentle);
+      jest.advanceTimersByTime(bladeTheme.motion.duration.gentle);
     });
 
     expect(getByTestId(popoverModalId)).toHaveProp('visible', false);
@@ -216,7 +216,7 @@ describe('<Popover />', () => {
 
     // wait for closing animation to finish
     await act(async () => {
-      jest.advanceTimersByTime(paymentTheme.motion.duration.gentle);
+      jest.advanceTimersByTime(bladeTheme.motion.duration.gentle);
     });
 
     expect(getByTestId(popoverModalId)).toHaveProp('visible', false);
diff --git a/packages/blade/src/components/Popover/__tests__/Popover.web.test.tsx b/packages/blade/src/components/Popover/__tests__/Popover.web.test.tsx
index 8e7b58a843b..963e1168319 100644
--- a/packages/blade/src/components/Popover/__tests__/Popover.web.test.tsx
+++ b/packages/blade/src/components/Popover/__tests__/Popover.web.test.tsx
@@ -6,7 +6,7 @@ import { act, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { Popover, PopoverInteractiveWrapper } from '..';
 import { Button } from '~components/Button';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 import { InfoIcon } from '~components/Icons';
 import { MetaConstants } from '~utils/metaAttribute';
 import renderWithTheme from '~utils/testing/renderWithTheme.web';
@@ -15,7 +15,7 @@ import { Box } from '~components/Box';
 import { Text } from '~components/Typography';
 
 const waitForPosition = () => act(async () => {});
-const animationDuration = paymentTheme.motion.duration.quick;
+const animationDuration = bladeTheme.motion.duration.quick;
 const popoverInteractiveWrapperId = 'popover-interactive-wrapper';
 
 describe('<Popover />', () => {
@@ -257,7 +257,7 @@ describe('<Popover />', () => {
     const { getByTestId, queryByRole } = renderWithTheme(
       <Popover content={popoverContent}>
         <PopoverInteractiveWrapper testID={popoverInteractiveWrapperId}>
-          <InfoIcon color="surface.action.icon.default.highContrast" size="medium" />
+          <InfoIcon color="interactive.icon.gray.normal" size="medium" />
         </PopoverInteractiveWrapper>
       </Popover>,
     );
diff --git a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap
index 58a11bb614c..646499be8ec 100644
--- a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap
+++ b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap
@@ -28,24 +28,22 @@ exports[`<Popover /> should render 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -67,15 +65,16 @@ exports[`<Popover /> should render 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -86,8 +85,8 @@ exports[`<Popover /> should render 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -110,28 +109,31 @@ exports[`<Popover /> should render 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -221,7 +223,7 @@ exports[`<Popover /> should render 1`] = `
             {},
             {
               "backgroundColor": "hsla(0, 0%, 100%, 1)",
-              "borderColor": "hsla(216, 19%, 89%, 1)",
+              "borderColor": "hsla(211, 20%, 52%, 0.18)",
               "borderRadius": 8,
               "borderStyle": "solid",
               "borderWidth": 1,
@@ -233,14 +235,14 @@ exports[`<Popover /> should render 1`] = `
               "zIndex": 1100,
             },
             {
-              "elevation": 4,
-              "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+              "elevation": 8,
+              "shadowColor": "hsla(217, 56%, 17%, 0.4)",
               "shadowOffset": {
-                "height": 3,
+                "height": 2,
                 "width": 0,
               },
-              "shadowOpacity": 0.12,
-              "shadowRadius": 2,
+              "shadowOpacity": 0.2,
+              "shadowRadius": 4,
             },
           ]
         }
@@ -317,7 +319,7 @@ exports[`<Popover /> should render 1`] = `
               }
               accessible={true}
               collapsable={false}
-              contrast="low"
+              emphasis="intense"
               focusable={true}
               onBlur={[Function]}
               onClick={[Function]}
@@ -379,7 +381,7 @@ exports[`<Popover /> should render 1`] = `
                 >
                   <RNSVGPath
                     d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                    fill={4288851646}
+                    fill={4285959847}
                     propList={
                       [
                         "fill",
@@ -400,7 +402,7 @@ exports[`<Popover /> should render 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -410,11 +412,12 @@ exports[`<Popover /> should render 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -491,7 +494,7 @@ exports[`<Popover /> should render 1`] = `
                     "strokeWidth",
                   ]
                 }
-                stroke={4292797160}
+                stroke={778863773}
                 strokeWidth="2px"
               />
               <RNSVGPath
@@ -542,24 +545,22 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -581,15 +582,16 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -600,8 +602,8 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -624,28 +626,31 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -735,7 +740,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
             {},
             {
               "backgroundColor": "hsla(0, 0%, 100%, 1)",
-              "borderColor": "hsla(216, 19%, 89%, 1)",
+              "borderColor": "hsla(211, 20%, 52%, 0.18)",
               "borderRadius": 8,
               "borderStyle": "solid",
               "borderWidth": 1,
@@ -747,14 +752,14 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
               "zIndex": 9999,
             },
             {
-              "elevation": 4,
-              "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+              "elevation": 8,
+              "shadowColor": "hsla(217, 56%, 17%, 0.4)",
               "shadowOffset": {
-                "height": 3,
+                "height": 2,
                 "width": 0,
               },
-              "shadowOpacity": 0.12,
-              "shadowRadius": 2,
+              "shadowOpacity": 0.2,
+              "shadowRadius": 4,
             },
           ]
         }
@@ -831,7 +836,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
               }
               accessible={true}
               collapsable={false}
-              contrast="low"
+              emphasis="intense"
               focusable={true}
               onBlur={[Function]}
               onClick={[Function]}
@@ -893,7 +898,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
                 >
                   <RNSVGPath
                     d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                    fill={4288851646}
+                    fill={4285959847}
                     propList={
                       [
                         "fill",
@@ -914,7 +919,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -924,11 +929,12 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -1005,7 +1011,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
                     "strokeWidth",
                   ]
                 }
-                stroke={4292797160}
+                stroke={778863773}
                 strokeWidth="2px"
               />
               <RNSVGPath
@@ -1056,24 +1062,22 @@ exports[`<Popover /> should render with title,footer 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -1095,15 +1099,16 @@ exports[`<Popover /> should render with title,footer 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -1114,8 +1119,8 @@ exports[`<Popover /> should render with title,footer 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -1138,28 +1143,31 @@ exports[`<Popover /> should render with title,footer 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -1249,7 +1257,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
             {},
             {
               "backgroundColor": "hsla(0, 0%, 100%, 1)",
-              "borderColor": "hsla(216, 19%, 89%, 1)",
+              "borderColor": "hsla(211, 20%, 52%, 0.18)",
               "borderRadius": 8,
               "borderStyle": "solid",
               "borderWidth": 1,
@@ -1261,14 +1269,14 @@ exports[`<Popover /> should render with title,footer 1`] = `
               "zIndex": 1100,
             },
             {
-              "elevation": 4,
-              "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+              "elevation": 8,
+              "shadowColor": "hsla(217, 56%, 17%, 0.4)",
               "shadowOffset": {
-                "height": 3,
+                "height": 2,
                 "width": 0,
               },
-              "shadowOpacity": 0.12,
-              "shadowRadius": 2,
+              "shadowOpacity": 0.2,
+              "shadowRadius": 4,
             },
           ]
         }
@@ -1362,7 +1370,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
               >
                 <RNSVGPath
                   d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                  fill={4288851646}
+                  fill={1382843549}
                   propList={
                     [
                       "fill",
@@ -1371,7 +1379,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
                 />
                 <RNSVGPath
                   d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                  fill={4288851646}
+                  fill={1382843549}
                   propList={
                     [
                       "fill",
@@ -1381,7 +1389,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
                 <RNSVGPath
                   clipRule={0}
                   d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                  fill={4288851646}
+                  fill={1382843549}
                   fillRule={0}
                   propList={
                     [
@@ -1403,23 +1411,23 @@ exports[`<Popover /> should render with title,footer 1`] = `
               }
             >
               <Text
-                accessibilityRole="header"
                 accessible={true}
-                color="surface.text.normal.lowContrast"
-                data-blade-component="heading"
+                color="surface.text.gray.normal"
+                data-blade-component="text"
                 fontFamily="text"
                 fontSize={200}
                 fontStyle="normal"
-                fontWeight="bold"
-                lineHeight={300}
+                fontWeight="semibold"
+                lineHeight={200}
                 style={
                   [
                     {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
+                      "color": "hsla(212, 39%, 16%, 1)",
+                      "fontFamily": "Inter",
                       "fontSize": 16,
                       "fontStyle": "normal",
-                      "fontWeight": "700",
+                      "fontWeight": "600",
+                      "letterSpacing": 0,
                       "lineHeight": 24,
                       "marginBottom": 0,
                       "marginLeft": 0,
@@ -1469,7 +1477,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
                 }
                 accessible={true}
                 collapsable={false}
-                contrast="low"
+                emphasis="intense"
                 focusable={true}
                 onBlur={[Function]}
                 onClick={[Function]}
@@ -1531,7 +1539,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
                   >
                     <RNSVGPath
                       d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                      fill={4288851646}
+                      fill={4285959847}
                       propList={
                         [
                           "fill",
@@ -1553,7 +1561,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -1563,11 +1571,12 @@ exports[`<Popover /> should render with title,footer 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -1595,7 +1604,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -1605,11 +1614,12 @@ exports[`<Popover /> should render with title,footer 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -1686,7 +1696,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
                     "strokeWidth",
                   ]
                 }
-                stroke={4292797160}
+                stroke={778863773}
                 strokeWidth="2px"
               />
               <RNSVGPath
diff --git a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap
index bcd7617ddd4..95dbee7986c 100644
--- a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap
+++ b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`<Popover /> should render 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c4.c4.c4.c4.c4 {
@@ -54,9 +55,9 @@ exports[`<Popover /> should render 1`] = `
   background-color: hsla(0,0%,100%,1);
   border-width: 1px;
   border-radius: 8px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
   -webkit-transition-property: opacity,-webkit-transform;
   -webkit-transition-property: opacity,transform;
   transition-property: opacity,transform;
@@ -82,7 +83,7 @@ exports[`<Popover /> should render 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -92,42 +93,56 @@ exports[`<Popover /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c8.c8.c8.c8.c8:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c8.c8.c8.c8.c8:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c9.c9.c9.c9.c9 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -136,10 +151,10 @@ exports[`<Popover /> should render 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -155,6 +170,7 @@ exports[`<Popover /> should render 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -169,25 +185,25 @@ exports[`<Popover /> should render 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -306,7 +322,7 @@ exports[`<Popover /> should render 1`] = `
             clip-path="url(#:r3:)"
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
             fill="none"
-            stroke="hsla(216, 19%, 89%, 1)"
+            stroke="hsla(211, 20%, 52%, 0.18)"
             stroke-width="3"
           />
           <path
@@ -359,6 +375,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c4.c4.c4.c4.c4 {
@@ -393,9 +410,9 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
   background-color: hsla(0,0%,100%,1);
   border-width: 1px;
   border-radius: 8px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
   opacity: 0;
   -webkit-transform: translateY(4px);
   -ms-transform: translateY(4px);
@@ -420,7 +437,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -430,42 +447,56 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
 }
 
 .c8.c8.c8.c8.c8:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c8.c8.c8.c8.c8:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c8.c8.c8.c8.c8:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c9.c9.c9.c9.c9 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -474,10 +505,10 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -493,6 +524,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -507,25 +539,25 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -644,7 +676,7 @@ exports[`<Popover /> should render popover with custom zIndex 1`] = `
             clip-path="url(#:rb:)"
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
             fill="none"
-            stroke="hsla(216, 19%, 89%, 1)"
+            stroke="hsla(211, 20%, 52%, 0.18)"
             stroke-width="3"
           />
           <path
@@ -697,6 +729,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c4.c4.c4.c4.c4 {
@@ -748,9 +781,9 @@ exports[`<Popover /> should render with title,footer 1`] = `
   background-color: hsla(0,0%,100%,1);
   border-width: 1px;
   border-radius: 8px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
   opacity: 0;
   -webkit-transform: translateY(4px);
   -ms-transform: translateY(4px);
@@ -775,7 +808,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -785,55 +818,73 @@ exports[`<Popover /> should render with title,footer 1`] = `
 }
 
 .c11.c11.c11.c11.c11:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c9.c9.c9.c9.c9 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -842,10 +893,10 @@ exports[`<Popover /> should render with title,footer 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -861,6 +912,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -875,25 +927,25 @@ exports[`<Popover /> should render with title,footer 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -970,12 +1022,12 @@ exports[`<Popover /> should render with title,footer 1`] = `
               data-blade-component="base-box"
               id="popover-title-11"
             >
-              <h6
+              <p
                 class="c9"
-                data-blade-component="heading"
+                data-blade-component="text"
               >
                 This is title
-              </h6>
+              </p>
             </div>
             <div
               class="c10"
@@ -1040,7 +1092,7 @@ exports[`<Popover /> should render with title,footer 1`] = `
             clip-path="url(#:r7:)"
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
             fill="none"
-            stroke="hsla(216, 19%, 89%, 1)"
+            stroke="hsla(211, 20%, 52%, 0.18)"
             stroke-width="3"
           />
           <path
diff --git a/packages/blade/src/components/Popover/getPopoverContentWrapperStyles.ts b/packages/blade/src/components/Popover/getPopoverContentWrapperStyles.ts
index 44fe62c3d76..3409f2a6a92 100644
--- a/packages/blade/src/components/Popover/getPopoverContentWrapperStyles.ts
+++ b/packages/blade/src/components/Popover/getPopoverContentWrapperStyles.ts
@@ -17,10 +17,10 @@ const getPopoverContentWrapperStyles = ({
     width: '100%',
     maxWidth: makeSpace(isMobile ? 288 : 328),
     position: isReactNative() ? 'absolute' : 'relative',
-    backgroundColor: theme.colors.surface.popup.background,
+    backgroundColor: theme.colors.popup.background.subtle,
     borderWidth: makeBorderSize(theme.border.width.thin),
     borderRadius: makeBorderSize(theme.border.radius.large),
-    borderColor: theme.colors.brand.gray[400].lowContrast,
+    borderColor: theme.colors.popup.border.subtle,
     borderStyle: 'solid',
     boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.midRaised),
     ...styles,
diff --git a/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx
index 894787cd839..f50ad36dbb5 100644
--- a/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -14,12 +14,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentDescription="A Progress bar is generally a branded element that indicates progress of process or task"
       componentName="ProgressBar"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=16430%3A256423&t=0raQL8ilgxTx5XYL-4',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=11989%3A362441&t=2wnorJeMBCxn5yGG-4',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=16430%3A256423&t=0raQL8ilgxTx5XYL-4"
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -66,7 +61,6 @@ Default.storyName = 'Default';
 Default.args = {
   label: 'Label',
   value: 20,
-  contrast: 'low',
 };
 
 const ProgressBarWithUpdatingValuesTemplate: StoryFn<typeof ProgressBarComponent> = ({
@@ -90,7 +84,7 @@ const ProgressBarWithUpdatingValuesTemplate: StoryFn<typeof ProgressBarComponent
   return <ProgressBarComponent {...args} value={value} />;
 };
 
-const ProgressBarWithIntentsTemplate: StoryFn<typeof ProgressBarComponent> = ({ ...args }) => {
+const ProgressBarWithColorsTemplate: StoryFn<typeof ProgressBarComponent> = ({ ...args }) => {
   const [value, setValue] = useState(10);
   useEffect(() => {
     const interval = setInterval(() => {
@@ -117,7 +111,7 @@ const ProgressBarWithIntentsTemplate: StoryFn<typeof ProgressBarComponent> = ({
     >
       {intents.map((intent) => (
         <BaseBox key={intent} paddingTop="spacing.4">
-          <ProgressBarComponent {...args} intent={intent} value={value} />
+          <ProgressBarComponent {...args} color={intent} value={value} />
         </BaseBox>
       ))}
     </BaseBox>
@@ -144,9 +138,9 @@ ProgressBarMediumSize.args = {
   size: 'medium',
 };
 
-export const ProgressBarWithIntents = ProgressBarWithIntentsTemplate.bind({});
-ProgressBarWithIntents.storyName = 'Intents';
-ProgressBarWithIntents.args = {
+export const ProgressBarWithColor = ProgressBarWithColorsTemplate.bind({});
+ProgressBarWithColor.storyName = 'Intents';
+ProgressBarWithColor.args = {
   size: 'medium',
   label: 'Label',
 };
@@ -158,7 +152,7 @@ ProgressBarMeterVariant.args = {
   size: 'medium',
   value: 10,
   label: 'Balance: ₹10,000',
-  intent: 'notice',
+  color: 'notice',
 };
 
 export const ProgressBarIndeterminate = ProgressBarTemplate.bind({});
diff --git a/packages/blade/src/components/ProgressBar/ProgressBar.tsx b/packages/blade/src/components/ProgressBar/ProgressBar.tsx
index 71ca23e41f5..30f9f9253d5 100644
--- a/packages/blade/src/components/ProgressBar/ProgressBar.tsx
+++ b/packages/blade/src/components/ProgressBar/ProgressBar.tsx
@@ -1,15 +1,15 @@
 import type { ReactElement } from 'react';
 import { ProgressBarFilled } from './ProgressBarFilled';
 import clamp from '~utils/lodashButBetter/clamp';
-import { FormLabel } from '~components/Form';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { Text } from '~components/Typography/Text';
 import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { useId } from '~utils/useId';
 import { useTheme } from '~components/BladeProvider';
+import type { BaseBoxProps } from '~components/Box/BaseBox';
 import BaseBox from '~components/Box/BaseBox';
-import type { ColorContrastTypes, Feedback } from '~tokens/theme/theme';
+import type { FeedbackColors } from '~tokens/theme/theme';
 import { size } from '~tokens/global';
 import type { TestID } from '~utils/types';
 import { makeSize } from '~utils/makeSize';
@@ -23,14 +23,9 @@ type ProgressBarCommonProps = {
    */
   accessibilityLabel?: string;
   /**
-   * Sets the contrast for the progress bar
-   * @default 'low'
+   * Sets the color of the progress bar which changes the feedback color.
    */
-  contrast?: ColorContrastTypes;
-  /**
-   * Sets the intent of the progress bar which changes the feedback color.
-   */
-  intent?: Feedback;
+  color?: FeedbackColors;
   /**
    * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
    */
@@ -105,8 +100,7 @@ const progressBarHeight: Record<NonNullable<ProgressBarCommonProps['size']>, 2 |
 
 const ProgressBar = ({
   accessibilityLabel,
-  contrast = 'low',
-  intent,
+  color,
   isIndeterminate = false,
   label,
   showPercentage = true,
@@ -130,10 +124,11 @@ const ProgressBar = ({
     }
   }
 
-  const unfilledBackgroundColor = theme.colors.brand.gray.a100[`${contrast}Contrast`];
-  const filledBackgroundColor = intent
-    ? theme.colors.feedback.background[intent].highContrast
-    : theme.colors.brand.primary[500];
+  const unfilledBackgroundColor = theme.colors.feedback.background.neutral
+    .subtle as BaseBoxProps['backgroundColor'];
+  const filledBackgroundColor = color
+    ? theme.colors.feedback.background[color].intense
+    : theme.colors.surface.background.primary.intense;
   const hasLabel = label && label.trim()?.length > 0;
   const isMeter = variant === 'meter';
   const progressValue = clamp(value, min, max);
@@ -176,17 +171,16 @@ const ProgressBar = ({
           justifyContent={hasLabel ? 'space-between' : 'flex-end'}
         >
           {hasLabel ? (
-            <FormLabel as="label" htmlFor={id} contrast={contrast}>
+            <Text as="label" variant="body" size="small" color="surface.text.gray.subtle">
               {label}
-            </FormLabel>
+            </Text>
           ) : null}
           {shouldShowPercentage ? (
             <BaseBox marginBottom="spacing.2">
               <Text
-                type="subdued"
                 variant="body"
-                contrast={contrast}
                 size="small"
+                color="surface.text.gray.subtle"
               >{`${percentageProgressValue}%`}</Text>
             </BaseBox>
           ) : null}
diff --git a/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.native.test.tsx b/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.native.test.tsx
index ce19816b6bc..5f41a58941d 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.native.test.tsx
+++ b/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.native.test.tsx
@@ -4,6 +4,8 @@ import { ProgressBar } from '../ProgressBar';
 import renderWithTheme from '~utils/testing/renderWithTheme.native';
 import { Button } from '~components/Button';
 
+const colors = ['information', 'negative', 'neutral', 'notice', 'positive'] as const;
+
 describe('<ProgressBar />', () => {
   it('should render ProgressBar with default props', () => {
     const { toJSON } = renderWithTheme(<ProgressBar label="Label" value={20} />);
@@ -47,67 +49,11 @@ describe('<ProgressBar />', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render high contrast ProgressBar', () => {
-    const { toJSON } = renderWithTheme(<ProgressBar contrast="high" value={20} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render low contrast positive intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(<ProgressBar intent="positive" contrast="low" value={20} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render high contrast positive intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(
-      <ProgressBar intent="positive" contrast="high" value={20} />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render low contrast negative intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(<ProgressBar intent="negative" contrast="low" value={20} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render high contrast negative intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(
-      <ProgressBar intent="negative" contrast="high" value={20} />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render low contrast notice intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(<ProgressBar intent="notice" contrast="low" value={20} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render high contrast notice intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(<ProgressBar intent="notice" contrast="high" value={20} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render low contrast information intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(
-      <ProgressBar intent="information" contrast="low" value={20} />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render high contrast information intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(
-      <ProgressBar intent="information" contrast="high" value={20} />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render low contrast neutral intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(<ProgressBar intent="neutral" contrast="low" value={20} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render high contrast neutral intent ProgressBar', () => {
-    const { toJSON } = renderWithTheme(<ProgressBar intent="neutral" contrast="high" value={20} />);
-    expect(toJSON()).toMatchSnapshot();
+  colors.forEach((color) => {
+    it(`should render color=${color} ProgressBar`, () => {
+      const { toJSON } = renderWithTheme(<ProgressBar color={color} value={20} />);
+      expect(toJSON()).toMatchSnapshot();
+    });
   });
 
   it('should have accessibility attributes for progress variant', () => {
diff --git a/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.web.test.tsx b/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.web.test.tsx
index 356b18e33f9..d14628ca5cc 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.web.test.tsx
+++ b/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.web.test.tsx
@@ -4,6 +4,8 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 import assertAccessible from '~utils/testing/assertAccessible.web';
 import { Button } from '~components/Button';
 
+const colors = ['information', 'negative', 'neutral', 'notice', 'positive'] as const;
+
 describe('<ProgressBar />', () => {
   it('should render ProgressBar with default props', () => {
     const { container } = renderWithTheme(<ProgressBar label="Label" value={20} />);
@@ -48,79 +50,11 @@ describe('<ProgressBar />', () => {
     expect(getByRole('meter')).toBeTruthy();
   });
 
-  it('should render high contrast ProgressBar', () => {
-    const { container } = renderWithTheme(<ProgressBar contrast="high" value={20} />);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render low contrast positive intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="positive" contrast="low" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render high contrast positive intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="positive" contrast="high" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render low contrast negative intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="negative" contrast="low" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render high contrast negative intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="negative" contrast="high" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render low contrast notice intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="notice" contrast="low" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render high contrast notice intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="notice" contrast="high" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render low contrast information intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="information" contrast="low" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render high contrast information intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="information" contrast="high" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render low contrast neutral intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="neutral" contrast="low" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render high contrast neutral intent ProgressBar', () => {
-    const { container } = renderWithTheme(
-      <ProgressBar intent="neutral" contrast="high" value={20} />,
-    );
-    expect(container).toMatchSnapshot();
+  colors.forEach((color) => {
+    it(`should render color=${color} ProgressBar`, () => {
+      const { container } = renderWithTheme(<ProgressBar color={color} value={20} />);
+      expect(container).toMatchSnapshot();
+    });
   });
 
   it('should have the right accessibility attributes for progress variant', () => {
diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap
index dd9d78af8d9..75df4666d2f 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap
+++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap
@@ -46,1087 +46,40 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
           ]
         }
       >
-        <View
-          data-blade-component="base-box"
-          style={
-            [
-              {
-                "marginBottom": 4,
-                "marginRight": 16,
-              },
-            ]
-          }
-        >
-          <View
-            alignItems="center"
-            data-blade-component="base-box"
-            display="flex"
-            flexDirection="row"
-            flexWrap="wrap"
-            gap="spacing.0"
-            maxHeight="36px"
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "flexDirection": "row",
-                  "flexWrap": "wrap",
-                  "gap": 0,
-                  "maxHeight": 36,
-                },
-              ]
-            }
-          >
-            <Text
-              accessible={true}
-              color="surface.text.subdued.lowContrast"
-              data-blade-component="text"
-              fontFamily="text"
-              fontSize={75}
-              fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
-                    "fontSize": 12,
-                    "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
-                    "marginBottom": 0,
-                    "marginLeft": 0,
-                    "marginRight": 0,
-                    "marginTop": 0,
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "textDecorationLine": "none",
-                  },
-                ]
-              }
-            >
-              Label
-            </Text>
-            <View
-              data-blade-component="visually-hidden"
-              style={
-                [
-                  {
-                    "borderColor": "black",
-                    "borderStyle": "solid",
-                    "borderWidth": 0,
-                    "clip": "rect(0 0 0 0)",
-                    "clipPath": "inset(50%)",
-                    "height": 1,
-                    "left": -10000,
-                    "marginBottom": -1,
-                    "marginLeft": 0,
-                    "marginRight": -1,
-                    "marginTop": 0,
-                    "overflow": "hidden",
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "position": "absolute",
-                    "whiteSpace": "nowrap",
-                    "width": 1,
-                    "wordWrap": "normal",
-                  },
-                ]
-              }
-            >
-              <Text
-                accessible={true}
-                color="surface.text.normal.lowContrast"
-                data-blade-component="text"
-                fontFamily="text"
-                fontSize={100}
-                fontStyle="normal"
-                fontWeight="regular"
-                lineHeight={100}
-                style={
-                  [
-                    {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
-                      "fontSize": 14,
-                      "fontStyle": "normal",
-                      "fontWeight": "400",
-                      "lineHeight": 20,
-                      "marginBottom": 0,
-                      "marginLeft": 0,
-                      "marginRight": 0,
-                      "marginTop": 0,
-                      "paddingBottom": 0,
-                      "paddingLeft": 0,
-                      "paddingRight": 0,
-                      "paddingTop": 0,
-                      "textDecorationLine": "none",
-                    },
-                  ]
-                }
-              />
-            </View>
-          </View>
-        </View>
-        <View
-          data-blade-component="base-box"
-          style={
-            [
-              {
-                "marginBottom": 4,
-              },
-            ]
-          }
-        >
-          <Text
-            accessible={true}
-            color="surface.text.subdued.lowContrast"
-            data-blade-component="text"
-            fontFamily="text"
-            fontSize={75}
-            fontStyle="normal"
-            fontWeight="regular"
-            lineHeight={50}
-            style={
-              [
-                {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
-                  "fontSize": 12,
-                  "fontStyle": "normal",
-                  "fontWeight": "400",
-                  "lineHeight": 16,
-                  "marginBottom": 0,
-                  "marginLeft": 0,
-                  "marginRight": 0,
-                  "marginTop": 0,
-                  "paddingBottom": 0,
-                  "paddingLeft": 0,
-                  "paddingRight": 0,
-                  "paddingTop": 0,
-                  "textDecorationLine": "none",
-                },
-              ]
-            }
-          >
-            20%
-          </Text>
-        </View>
-      </View>
-      <View
-        accessibilityLabel="Label"
-        accessibilityRole="progressbar"
-        accessibilityValue={
-          {
-            "max": 100,
-            "min": 0,
-            "now": 20,
-            "text": "20%",
-          }
-        }
-        accessible={true}
-        data-blade-component="base-box"
-        id="progress-1"
-        style={
-          [
-            {},
-          ]
-        }
-      >
-        <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
-          data-blade-component="base-box"
-          height="2px"
-          overflow="hidden"
-          position="relative"
-          style={
-            [
-              {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
-                "height": 2,
-                "overflow": "hidden",
-                "position": "relative",
-              },
-            ]
-          }
-        >
-          <View
-            backgroundColor="hsla(218, 89%, 51%, 1)"
-            progress={20}
-            style={
-              [
-                {
-                  "backgroundColor": "hsla(218, 89%, 51%, 1)",
-                  "height": "100%",
-                  "width": "20%",
-                },
-                {
-                  "width": "20%",
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {
-                    "backgroundColor": "white",
-                    "height": "100%",
-                    "opacity": 0,
-                    "width": "100%",
-                  },
-                  {
-                    "opacity": 0,
-                  },
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<ProgressBar /> should render ProgressBar without label and percentage 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="progress-bar"
-    style={
-      [
-        {},
-      ]
-    }
-  >
-    <View
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="column"
-      style={
-        [
-          {
-            "display": "flex",
-            "flexDirection": "column",
-            "width": "100%",
-          },
-        ]
-      }
-      width="100%"
-    >
-      <View
-        data-blade-component="base-box"
-        display="flex"
-        flexDirection="row"
-        justifyContent="flex-end"
-        style={
-          [
-            {
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-            },
-          ]
-        }
-      />
-      <View
-        accessibilityRole="progressbar"
-        accessibilityValue={
-          {
-            "max": 100,
-            "min": 0,
-            "now": 50,
-            "text": "50%",
-          }
-        }
-        accessible={true}
-        data-blade-component="base-box"
-        id="progress-10"
-        style={
-          [
-            {},
-          ]
-        }
-      >
-        <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
-          data-blade-component="base-box"
-          height="2px"
-          overflow="hidden"
-          position="relative"
-          style={
-            [
-              {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
-                "height": 2,
-                "overflow": "hidden",
-                "position": "relative",
-              },
-            ]
-          }
-        >
-          <View
-            backgroundColor="hsla(218, 89%, 51%, 1)"
-            progress={50}
-            style={
-              [
-                {
-                  "backgroundColor": "hsla(218, 89%, 51%, 1)",
-                  "height": "100%",
-                  "width": "50%",
-                },
-                {
-                  "width": "50%",
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {
-                    "backgroundColor": "white",
-                    "height": "100%",
-                    "opacity": 0,
-                    "width": "100%",
-                  },
-                  {
-                    "opacity": 0,
-                  },
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="progress-bar"
-    style={
-      [
-        {},
-      ]
-    }
-  >
-    <View
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="column"
-      style={
-        [
-          {
-            "display": "flex",
-            "flexDirection": "column",
-            "width": "100%",
-          },
-        ]
-      }
-      width="100%"
-    >
-      <View
-        data-blade-component="base-box"
-        display="flex"
-        flexDirection="row"
-        justifyContent="flex-end"
-        style={
-          [
-            {
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-            },
-          ]
-        }
-      >
-        <View
-          data-blade-component="base-box"
-          style={
-            [
-              {
-                "marginBottom": 4,
-              },
-            ]
-          }
-        >
-          <Text
-            accessible={true}
-            color="surface.text.subdued.highContrast"
-            data-blade-component="text"
-            fontFamily="text"
-            fontSize={75}
-            fontStyle="normal"
-            fontWeight="regular"
-            lineHeight={50}
-            style={
-              [
-                {
-                  "color": "hsla(216, 19%, 89%, 1)",
-                  "fontFamily": "Lato",
-                  "fontSize": 12,
-                  "fontStyle": "normal",
-                  "fontWeight": "400",
-                  "lineHeight": 16,
-                  "marginBottom": 0,
-                  "marginLeft": 0,
-                  "marginRight": 0,
-                  "marginTop": 0,
-                  "paddingBottom": 0,
-                  "paddingLeft": 0,
-                  "paddingRight": 0,
-                  "paddingTop": 0,
-                  "textDecorationLine": "none",
-                },
-              ]
-            }
-          >
-            20%
-          </Text>
-        </View>
-      </View>
-      <View
-        accessibilityRole="progressbar"
-        accessibilityValue={
-          {
-            "max": 100,
-            "min": 0,
-            "now": 20,
-            "text": "20%",
-          }
-        }
-        accessible={true}
-        data-blade-component="base-box"
-        id="progress-14"
-        style={
-          [
-            {},
-          ]
-        }
-      >
-        <View
-          backgroundColor="hsla(214, 21%, 94%, 0.18)"
-          data-blade-component="base-box"
-          height="2px"
-          overflow="hidden"
-          position="relative"
-          style={
-            [
-              {
-                "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
-                "height": 2,
-                "overflow": "hidden",
-                "position": "relative",
-              },
-            ]
-          }
-        >
-          <View
-            backgroundColor="hsla(218, 89%, 51%, 1)"
-            progress={20}
-            style={
-              [
-                {
-                  "backgroundColor": "hsla(218, 89%, 51%, 1)",
-                  "height": "100%",
-                  "width": "20%",
-                },
-                {
-                  "width": "20%",
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {
-                    "backgroundColor": "white",
-                    "height": "100%",
-                    "opacity": 0,
-                    "width": "100%",
-                  },
-                  {
-                    "opacity": 0,
-                  },
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<ProgressBar /> should render high contrast information intent ProgressBar 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="progress-bar"
-    style={
-      [
-        {},
-      ]
-    }
-  >
-    <View
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="column"
-      style={
-        [
-          {
-            "display": "flex",
-            "flexDirection": "column",
-            "width": "100%",
-          },
-        ]
-      }
-      width="100%"
-    >
-      <View
-        data-blade-component="base-box"
-        display="flex"
-        flexDirection="row"
-        justifyContent="flex-end"
-        style={
-          [
-            {
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-            },
-          ]
-        }
-      >
-        <View
-          data-blade-component="base-box"
-          style={
-            [
-              {
-                "marginBottom": 4,
-              },
-            ]
-          }
-        >
-          <Text
-            accessible={true}
-            color="surface.text.subdued.highContrast"
-            data-blade-component="text"
-            fontFamily="text"
-            fontSize={75}
-            fontStyle="normal"
-            fontWeight="regular"
-            lineHeight={50}
-            style={
-              [
-                {
-                  "color": "hsla(216, 19%, 89%, 1)",
-                  "fontFamily": "Lato",
-                  "fontSize": 12,
-                  "fontStyle": "normal",
-                  "fontWeight": "400",
-                  "lineHeight": 16,
-                  "marginBottom": 0,
-                  "marginLeft": 0,
-                  "marginRight": 0,
-                  "marginTop": 0,
-                  "paddingBottom": 0,
-                  "paddingLeft": 0,
-                  "paddingRight": 0,
-                  "paddingTop": 0,
-                  "textDecorationLine": "none",
-                },
-              ]
-            }
-          >
-            20%
-          </Text>
-        </View>
-      </View>
-      <View
-        accessibilityRole="progressbar"
-        accessibilityValue={
-          {
-            "max": 100,
-            "min": 0,
-            "now": 20,
-            "text": "20%",
-          }
-        }
-        accessible={true}
-        data-blade-component="base-box"
-        id="progress-30"
-        style={
-          [
-            {},
-          ]
-        }
-      >
-        <View
-          backgroundColor="hsla(214, 21%, 94%, 0.18)"
-          data-blade-component="base-box"
-          height="2px"
-          overflow="hidden"
-          position="relative"
-          style={
-            [
-              {
-                "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
-                "height": 2,
-                "overflow": "hidden",
-                "position": "relative",
-              },
-            ]
-          }
-        >
-          <View
-            backgroundColor="hsla(193, 100%, 35%, 1)"
-            progress={20}
-            style={
-              [
-                {
-                  "backgroundColor": "hsla(193, 100%, 35%, 1)",
-                  "height": "100%",
-                  "width": "20%",
-                },
-                {
-                  "width": "20%",
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {
-                    "backgroundColor": "white",
-                    "height": "100%",
-                    "opacity": 0,
-                    "width": "100%",
-                  },
-                  {
-                    "opacity": 0,
-                  },
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<ProgressBar /> should render high contrast negative intent ProgressBar 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="progress-bar"
-    style={
-      [
-        {},
-      ]
-    }
-  >
-    <View
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="column"
-      style={
-        [
-          {
-            "display": "flex",
-            "flexDirection": "column",
-            "width": "100%",
-          },
-        ]
-      }
-      width="100%"
-    >
-      <View
-        data-blade-component="base-box"
-        display="flex"
-        flexDirection="row"
-        justifyContent="flex-end"
-        style={
-          [
-            {
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-            },
-          ]
-        }
-      >
-        <View
-          data-blade-component="base-box"
-          style={
-            [
-              {
-                "marginBottom": 4,
-              },
-            ]
-          }
-        >
-          <Text
-            accessible={true}
-            color="surface.text.subdued.highContrast"
-            data-blade-component="text"
-            fontFamily="text"
-            fontSize={75}
-            fontStyle="normal"
-            fontWeight="regular"
-            lineHeight={50}
-            style={
-              [
-                {
-                  "color": "hsla(216, 19%, 89%, 1)",
-                  "fontFamily": "Lato",
-                  "fontSize": 12,
-                  "fontStyle": "normal",
-                  "fontWeight": "400",
-                  "lineHeight": 16,
-                  "marginBottom": 0,
-                  "marginLeft": 0,
-                  "marginRight": 0,
-                  "marginTop": 0,
-                  "paddingBottom": 0,
-                  "paddingLeft": 0,
-                  "paddingRight": 0,
-                  "paddingTop": 0,
-                  "textDecorationLine": "none",
-                },
-              ]
-            }
-          >
-            20%
-          </Text>
-        </View>
-      </View>
-      <View
-        accessibilityRole="progressbar"
-        accessibilityValue={
-          {
-            "max": 100,
-            "min": 0,
-            "now": 20,
-            "text": "20%",
-          }
-        }
-        accessible={true}
-        data-blade-component="base-box"
-        id="progress-22"
-        style={
-          [
-            {},
-          ]
-        }
-      >
-        <View
-          backgroundColor="hsla(214, 21%, 94%, 0.18)"
-          data-blade-component="base-box"
-          height="2px"
-          overflow="hidden"
-          position="relative"
-          style={
-            [
-              {
-                "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
-                "height": 2,
-                "overflow": "hidden",
-                "position": "relative",
-              },
-            ]
-          }
-        >
-          <View
-            backgroundColor="hsla(8, 73%, 47%, 1)"
-            progress={20}
-            style={
-              [
-                {
-                  "backgroundColor": "hsla(8, 73%, 47%, 1)",
-                  "height": "100%",
-                  "width": "20%",
-                },
-                {
-                  "width": "20%",
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {
-                    "backgroundColor": "white",
-                    "height": "100%",
-                    "opacity": 0,
-                    "width": "100%",
-                  },
-                  {
-                    "opacity": 0,
-                  },
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="progress-bar"
-    style={
-      [
-        {},
-      ]
-    }
-  >
-    <View
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="column"
-      style={
-        [
-          {
-            "display": "flex",
-            "flexDirection": "column",
-            "width": "100%",
-          },
-        ]
-      }
-      width="100%"
-    >
-      <View
-        data-blade-component="base-box"
-        display="flex"
-        flexDirection="row"
-        justifyContent="flex-end"
-        style={
-          [
-            {
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-            },
-          ]
-        }
-      >
-        <View
-          data-blade-component="base-box"
-          style={
-            [
-              {
-                "marginBottom": 4,
-              },
-            ]
-          }
-        >
-          <Text
-            accessible={true}
-            color="surface.text.subdued.highContrast"
-            data-blade-component="text"
-            fontFamily="text"
-            fontSize={75}
-            fontStyle="normal"
-            fontWeight="regular"
-            lineHeight={50}
-            style={
-              [
-                {
-                  "color": "hsla(216, 19%, 89%, 1)",
-                  "fontFamily": "Lato",
-                  "fontSize": 12,
-                  "fontStyle": "normal",
-                  "fontWeight": "400",
-                  "lineHeight": 16,
-                  "marginBottom": 0,
-                  "marginLeft": 0,
-                  "marginRight": 0,
-                  "marginTop": 0,
-                  "paddingBottom": 0,
-                  "paddingLeft": 0,
-                  "paddingRight": 0,
-                  "paddingTop": 0,
-                  "textDecorationLine": "none",
-                },
-              ]
-            }
-          >
-            20%
-          </Text>
-        </View>
-      </View>
-      <View
-        accessibilityRole="progressbar"
-        accessibilityValue={
-          {
-            "max": 100,
-            "min": 0,
-            "now": 20,
-            "text": "20%",
-          }
-        }
-        accessible={true}
-        data-blade-component="base-box"
-        id="progress-34"
-        style={
-          [
-            {},
-          ]
-        }
-      >
-        <View
-          backgroundColor="hsla(214, 21%, 94%, 0.18)"
-          data-blade-component="base-box"
-          height="2px"
-          overflow="hidden"
-          position="relative"
+        <Text
+          accessible={true}
+          color="surface.text.gray.subtle"
+          data-blade-component="text"
+          fontFamily="text"
+          fontSize={75}
+          fontStyle="normal"
+          fontWeight="regular"
+          lineHeight={75}
           style={
             [
               {
-                "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
-                "height": 2,
-                "overflow": "hidden",
-                "position": "relative",
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 12,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 18,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
               },
             ]
           }
         >
-          <View
-            backgroundColor="hsla(216, 33%, 29%, 1)"
-            progress={20}
-            style={
-              [
-                {
-                  "backgroundColor": "hsla(216, 33%, 29%, 1)",
-                  "height": "100%",
-                  "width": "20%",
-                },
-                {
-                  "width": "20%",
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                [
-                  {
-                    "backgroundColor": "white",
-                    "height": "100%",
-                    "opacity": 0,
-                    "width": "100%",
-                  },
-                  {
-                    "opacity": 0,
-                  },
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="progress-bar"
-    style={
-      [
-        {},
-      ]
-    }
-  >
-    <View
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="column"
-      style={
-        [
-          {
-            "display": "flex",
-            "flexDirection": "column",
-            "width": "100%",
-          },
-        ]
-      }
-      width="100%"
-    >
-      <View
-        data-blade-component="base-box"
-        display="flex"
-        flexDirection="row"
-        justifyContent="flex-end"
-        style={
-          [
-            {
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "flex-end",
-            },
-          ]
-        }
-      >
+          Label
+        </Text>
         <View
           data-blade-component="base-box"
           style={
@@ -1139,22 +92,23 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.highContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(216, 19%, 89%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -1173,6 +127,7 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
         </View>
       </View>
       <View
+        accessibilityLabel="Label"
         accessibilityRole="progressbar"
         accessibilityValue={
           {
@@ -1184,7 +139,7 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
         }
         accessible={true}
         data-blade-component="base-box"
-        id="progress-26"
+        id="progress-1"
         style={
           [
             {},
@@ -1192,7 +147,7 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
         }
       >
         <View
-          backgroundColor="hsla(214, 21%, 94%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -1200,7 +155,7 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
           style={
             [
               {
-                "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -1209,12 +164,12 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
           }
         >
           <View
-            backgroundColor="hsla(38, 97%, 38%, 1)"
+            backgroundColor="hsla(227, 100%, 59%, 1)"
             progress={20}
             style={
               [
                 {
-                  "backgroundColor": "hsla(38, 97%, 38%, 1)",
+                  "backgroundColor": "hsla(227, 100%, 59%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
@@ -1247,7 +202,7 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
 </View>
 `;
 
-exports[`<ProgressBar /> should render high contrast positive intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render ProgressBar without label and percentage 1`] = `
 <View
   style={
     {
@@ -1292,65 +247,20 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
             },
           ]
         }
-      >
-        <View
-          data-blade-component="base-box"
-          style={
-            [
-              {
-                "marginBottom": 4,
-              },
-            ]
-          }
-        >
-          <Text
-            accessible={true}
-            color="surface.text.subdued.highContrast"
-            data-blade-component="text"
-            fontFamily="text"
-            fontSize={75}
-            fontStyle="normal"
-            fontWeight="regular"
-            lineHeight={50}
-            style={
-              [
-                {
-                  "color": "hsla(216, 19%, 89%, 1)",
-                  "fontFamily": "Lato",
-                  "fontSize": 12,
-                  "fontStyle": "normal",
-                  "fontWeight": "400",
-                  "lineHeight": 16,
-                  "marginBottom": 0,
-                  "marginLeft": 0,
-                  "marginRight": 0,
-                  "marginTop": 0,
-                  "paddingBottom": 0,
-                  "paddingLeft": 0,
-                  "paddingRight": 0,
-                  "paddingTop": 0,
-                  "textDecorationLine": "none",
-                },
-              ]
-            }
-          >
-            20%
-          </Text>
-        </View>
-      </View>
+      />
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
           {
             "max": 100,
             "min": 0,
-            "now": 20,
-            "text": "20%",
+            "now": 50,
+            "text": "50%",
           }
         }
         accessible={true}
         data-blade-component="base-box"
-        id="progress-18"
+        id="progress-10"
         style={
           [
             {},
@@ -1358,7 +268,7 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
         }
       >
         <View
-          backgroundColor="hsla(214, 21%, 94%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -1366,7 +276,7 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
           style={
             [
               {
-                "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -1375,17 +285,17 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
           }
         >
           <View
-            backgroundColor="hsla(160, 100%, 26%, 1)"
-            progress={20}
+            backgroundColor="hsla(227, 100%, 59%, 1)"
+            progress={50}
             style={
               [
                 {
-                  "backgroundColor": "hsla(160, 100%, 26%, 1)",
+                  "backgroundColor": "hsla(227, 100%, 59%, 1)",
                   "height": "100%",
-                  "width": "20%",
+                  "width": "50%",
                 },
                 {
-                  "width": "20%",
+                  "width": "50%",
                 },
               ]
             }
@@ -1413,7 +323,7 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
 </View>
 `;
 
-exports[`<ProgressBar /> should render low contrast information intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=information ProgressBar 1`] = `
 <View
   style={
     {
@@ -1471,22 +381,23 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -1516,7 +427,7 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
         }
         accessible={true}
         data-blade-component="base-box"
-        id="progress-28"
+        id="progress-14"
         style={
           [
             {},
@@ -1524,7 +435,7 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -1532,7 +443,7 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -1541,12 +452,12 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
           }
         >
           <View
-            backgroundColor="hsla(193, 100%, 35%, 1)"
+            backgroundColor="hsla(200, 84%, 44%, 1)"
             progress={20}
             style={
               [
                 {
-                  "backgroundColor": "hsla(193, 100%, 35%, 1)",
+                  "backgroundColor": "hsla(200, 84%, 44%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
@@ -1579,7 +490,7 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
 </View>
 `;
 
-exports[`<ProgressBar /> should render low contrast negative intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=negative ProgressBar 1`] = `
 <View
   style={
     {
@@ -1637,22 +548,23 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -1682,7 +594,7 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
         }
         accessible={true}
         data-blade-component="base-box"
-        id="progress-20"
+        id="progress-16"
         style={
           [
             {},
@@ -1690,7 +602,7 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -1698,7 +610,7 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -1707,12 +619,12 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
           }
         >
           <View
-            backgroundColor="hsla(8, 73%, 47%, 1)"
+            backgroundColor="hsla(4, 74%, 49%, 1)"
             progress={20}
             style={
               [
                 {
-                  "backgroundColor": "hsla(8, 73%, 47%, 1)",
+                  "backgroundColor": "hsla(4, 74%, 49%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
@@ -1745,7 +657,7 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
 </View>
 `;
 
-exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=neutral ProgressBar 1`] = `
 <View
   style={
     {
@@ -1803,22 +715,23 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -1848,7 +761,7 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
         }
         accessible={true}
         data-blade-component="base-box"
-        id="progress-32"
+        id="progress-18"
         style={
           [
             {},
@@ -1856,7 +769,7 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -1864,7 +777,7 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -1873,12 +786,12 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
           }
         >
           <View
-            backgroundColor="hsla(216, 33%, 29%, 1)"
+            backgroundColor="hsla(211, 29%, 26%, 1)"
             progress={20}
             style={
               [
                 {
-                  "backgroundColor": "hsla(216, 33%, 29%, 1)",
+                  "backgroundColor": "hsla(211, 29%, 26%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
@@ -1911,7 +824,7 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
 </View>
 `;
 
-exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=notice ProgressBar 1`] = `
 <View
   style={
     {
@@ -1969,22 +882,23 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -2014,7 +928,7 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
         }
         accessible={true}
         data-blade-component="base-box"
-        id="progress-24"
+        id="progress-20"
         style={
           [
             {},
@@ -2022,7 +936,7 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -2030,7 +944,7 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -2039,12 +953,12 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
           }
         >
           <View
-            backgroundColor="hsla(38, 97%, 38%, 1)"
+            backgroundColor="hsla(25, 90%, 48%, 1)"
             progress={20}
             style={
               [
                 {
-                  "backgroundColor": "hsla(38, 97%, 38%, 1)",
+                  "backgroundColor": "hsla(25, 90%, 48%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
@@ -2077,7 +991,7 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
 </View>
 `;
 
-exports[`<ProgressBar /> should render low contrast positive intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=positive ProgressBar 1`] = `
 <View
   style={
     {
@@ -2135,22 +1049,23 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -2180,7 +1095,7 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
         }
         accessible={true}
         data-blade-component="base-box"
-        id="progress-16"
+        id="progress-22"
         style={
           [
             {},
@@ -2188,7 +1103,7 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -2196,7 +1111,7 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -2205,12 +1120,12 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
           }
         >
           <View
-            backgroundColor="hsla(160, 100%, 26%, 1)"
+            backgroundColor="hsla(150, 100%, 32%, 1)"
             progress={20}
             style={
               [
                 {
-                  "backgroundColor": "hsla(160, 100%, 26%, 1)",
+                  "backgroundColor": "hsla(150, 100%, 32%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
@@ -2289,135 +1204,40 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
           ]
         }
       >
-        <View
-          data-blade-component="base-box"
+        <Text
+          accessible={true}
+          color="surface.text.gray.subtle"
+          data-blade-component="text"
+          fontFamily="text"
+          fontSize={75}
+          fontStyle="normal"
+          fontWeight="regular"
+          lineHeight={75}
           style={
             [
               {
-                "marginBottom": 4,
-                "marginRight": 16,
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 12,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 18,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
               },
             ]
           }
         >
-          <View
-            alignItems="center"
-            data-blade-component="base-box"
-            display="flex"
-            flexDirection="row"
-            flexWrap="wrap"
-            gap="spacing.0"
-            maxHeight="36px"
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "flexDirection": "row",
-                  "flexWrap": "wrap",
-                  "gap": 0,
-                  "maxHeight": 36,
-                },
-              ]
-            }
-          >
-            <Text
-              accessible={true}
-              color="surface.text.subdued.lowContrast"
-              data-blade-component="text"
-              fontFamily="text"
-              fontSize={75}
-              fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
-                    "fontSize": 12,
-                    "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
-                    "marginBottom": 0,
-                    "marginLeft": 0,
-                    "marginRight": 0,
-                    "marginTop": 0,
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "textDecorationLine": "none",
-                  },
-                ]
-              }
-            >
-              Label
-            </Text>
-            <View
-              data-blade-component="visually-hidden"
-              style={
-                [
-                  {
-                    "borderColor": "black",
-                    "borderStyle": "solid",
-                    "borderWidth": 0,
-                    "clip": "rect(0 0 0 0)",
-                    "clipPath": "inset(50%)",
-                    "height": 1,
-                    "left": -10000,
-                    "marginBottom": -1,
-                    "marginLeft": 0,
-                    "marginRight": -1,
-                    "marginTop": 0,
-                    "overflow": "hidden",
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "position": "absolute",
-                    "whiteSpace": "nowrap",
-                    "width": 1,
-                    "wordWrap": "normal",
-                  },
-                ]
-              }
-            >
-              <Text
-                accessible={true}
-                color="surface.text.normal.lowContrast"
-                data-blade-component="text"
-                fontFamily="text"
-                fontSize={100}
-                fontStyle="normal"
-                fontWeight="regular"
-                lineHeight={100}
-                style={
-                  [
-                    {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
-                      "fontSize": 14,
-                      "fontStyle": "normal",
-                      "fontWeight": "400",
-                      "lineHeight": 20,
-                      "marginBottom": 0,
-                      "marginLeft": 0,
-                      "marginRight": 0,
-                      "marginTop": 0,
-                      "paddingBottom": 0,
-                      "paddingLeft": 0,
-                      "paddingRight": 0,
-                      "paddingTop": 0,
-                      "textDecorationLine": "none",
-                    },
-                  ]
-                }
-              />
-            </View>
-          </View>
-        </View>
+          Label
+        </Text>
         <View
           data-blade-component="base-box"
           style={
@@ -2430,22 +1250,23 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -2484,7 +1305,7 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="4px"
           overflow="hidden"
@@ -2492,7 +1313,7 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 4,
                 "overflow": "hidden",
                 "position": "relative",
@@ -2501,12 +1322,12 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
           }
         >
           <View
-            backgroundColor="hsla(218, 89%, 51%, 1)"
+            backgroundColor="hsla(227, 100%, 59%, 1)"
             progress={20}
             style={
               [
                 {
-                  "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                  "backgroundColor": "hsla(227, 100%, 59%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
@@ -2605,7 +1426,7 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -2613,7 +1434,7 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -2622,12 +1443,12 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
           }
         >
           <View
-            backgroundColor="hsla(218, 89%, 51%, 1)"
+            backgroundColor="hsla(227, 100%, 59%, 1)"
             progress={70}
             style={
               [
                 {
-                  "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                  "backgroundColor": "hsla(227, 100%, 59%, 1)",
                   "height": "100%",
                   "width": "70%",
                 },
@@ -2706,135 +1527,40 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
           ]
         }
       >
-        <View
-          data-blade-component="base-box"
+        <Text
+          accessible={true}
+          color="surface.text.gray.subtle"
+          data-blade-component="text"
+          fontFamily="text"
+          fontSize={75}
+          fontStyle="normal"
+          fontWeight="regular"
+          lineHeight={75}
           style={
             [
               {
-                "marginBottom": 4,
-                "marginRight": 16,
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 12,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 18,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
               },
             ]
           }
         >
-          <View
-            alignItems="center"
-            data-blade-component="base-box"
-            display="flex"
-            flexDirection="row"
-            flexWrap="wrap"
-            gap="spacing.0"
-            maxHeight="36px"
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "flexDirection": "row",
-                  "flexWrap": "wrap",
-                  "gap": 0,
-                  "maxHeight": 36,
-                },
-              ]
-            }
-          >
-            <Text
-              accessible={true}
-              color="surface.text.subdued.lowContrast"
-              data-blade-component="text"
-              fontFamily="text"
-              fontSize={75}
-              fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
-                    "fontSize": 12,
-                    "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
-                    "marginBottom": 0,
-                    "marginLeft": 0,
-                    "marginRight": 0,
-                    "marginTop": 0,
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "textDecorationLine": "none",
-                  },
-                ]
-              }
-            >
-              Label
-            </Text>
-            <View
-              data-blade-component="visually-hidden"
-              style={
-                [
-                  {
-                    "borderColor": "black",
-                    "borderStyle": "solid",
-                    "borderWidth": 0,
-                    "clip": "rect(0 0 0 0)",
-                    "clipPath": "inset(50%)",
-                    "height": 1,
-                    "left": -10000,
-                    "marginBottom": -1,
-                    "marginLeft": 0,
-                    "marginRight": -1,
-                    "marginTop": 0,
-                    "overflow": "hidden",
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "position": "absolute",
-                    "whiteSpace": "nowrap",
-                    "width": 1,
-                    "wordWrap": "normal",
-                  },
-                ]
-              }
-            >
-              <Text
-                accessible={true}
-                color="surface.text.normal.lowContrast"
-                data-blade-component="text"
-                fontFamily="text"
-                fontSize={100}
-                fontStyle="normal"
-                fontWeight="regular"
-                lineHeight={100}
-                style={
-                  [
-                    {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
-                      "fontSize": 14,
-                      "fontStyle": "normal",
-                      "fontWeight": "400",
-                      "lineHeight": 20,
-                      "marginBottom": 0,
-                      "marginLeft": 0,
-                      "marginRight": 0,
-                      "marginTop": 0,
-                      "paddingBottom": 0,
-                      "paddingLeft": 0,
-                      "paddingRight": 0,
-                      "paddingTop": 0,
-                      "textDecorationLine": "none",
-                    },
-                  ]
-                }
-              />
-            </View>
-          </View>
-        </View>
+          Label
+        </Text>
         <View
           data-blade-component="base-box"
           style={
@@ -2847,22 +1573,23 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -2901,7 +1628,7 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -2909,7 +1636,7 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -2918,12 +1645,12 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
           }
         >
           <View
-            backgroundColor="hsla(218, 89%, 51%, 1)"
+            backgroundColor="hsla(227, 100%, 59%, 1)"
             progress={20}
             style={
               [
                 {
-                  "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                  "backgroundColor": "hsla(227, 100%, 59%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
@@ -2984,24 +1711,22 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3022,15 +1747,16 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3041,8 +1767,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -3065,28 +1791,31 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3145,135 +1874,40 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
           ]
         }
       >
-        <View
-          data-blade-component="base-box"
+        <Text
+          accessible={true}
+          color="surface.text.gray.subtle"
+          data-blade-component="text"
+          fontFamily="text"
+          fontSize={75}
+          fontStyle="normal"
+          fontWeight="regular"
+          lineHeight={75}
           style={
             [
               {
-                "marginBottom": 4,
-                "marginRight": 16,
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 12,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 18,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
               },
             ]
           }
         >
-          <View
-            alignItems="center"
-            data-blade-component="base-box"
-            display="flex"
-            flexDirection="row"
-            flexWrap="wrap"
-            gap="spacing.0"
-            maxHeight="36px"
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "flexDirection": "row",
-                  "flexWrap": "wrap",
-                  "gap": 0,
-                  "maxHeight": 36,
-                },
-              ]
-            }
-          >
-            <Text
-              accessible={true}
-              color="surface.text.subdued.lowContrast"
-              data-blade-component="text"
-              fontFamily="text"
-              fontSize={75}
-              fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
-                    "fontSize": 12,
-                    "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
-                    "marginBottom": 0,
-                    "marginLeft": 0,
-                    "marginRight": 0,
-                    "marginTop": 0,
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "textDecorationLine": "none",
-                  },
-                ]
-              }
-            >
-              Label
-            </Text>
-            <View
-              data-blade-component="visually-hidden"
-              style={
-                [
-                  {
-                    "borderColor": "black",
-                    "borderStyle": "solid",
-                    "borderWidth": 0,
-                    "clip": "rect(0 0 0 0)",
-                    "clipPath": "inset(50%)",
-                    "height": 1,
-                    "left": -10000,
-                    "marginBottom": -1,
-                    "marginLeft": 0,
-                    "marginRight": -1,
-                    "marginTop": 0,
-                    "overflow": "hidden",
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "position": "absolute",
-                    "whiteSpace": "nowrap",
-                    "width": 1,
-                    "wordWrap": "normal",
-                  },
-                ]
-              }
-            >
-              <Text
-                accessible={true}
-                color="surface.text.normal.lowContrast"
-                data-blade-component="text"
-                fontFamily="text"
-                fontSize={100}
-                fontStyle="normal"
-                fontWeight="regular"
-                lineHeight={100}
-                style={
-                  [
-                    {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
-                      "fontSize": 14,
-                      "fontStyle": "normal",
-                      "fontWeight": "400",
-                      "lineHeight": 20,
-                      "marginBottom": 0,
-                      "marginLeft": 0,
-                      "marginRight": 0,
-                      "marginTop": 0,
-                      "paddingBottom": 0,
-                      "paddingLeft": 0,
-                      "paddingRight": 0,
-                      "paddingTop": 0,
-                      "textDecorationLine": "none",
-                    },
-                  ]
-                }
-              />
-            </View>
-          </View>
-        </View>
+          Label
+        </Text>
         <View
           data-blade-component="base-box"
           style={
@@ -3286,22 +1920,23 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -3340,7 +1975,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -3348,7 +1983,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -3357,12 +1992,12 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
           }
         >
           <View
-            backgroundColor="hsla(218, 89%, 51%, 1)"
+            backgroundColor="hsla(227, 100%, 59%, 1)"
             progress={0}
             style={
               [
                 {
-                  "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                  "backgroundColor": "hsla(227, 100%, 59%, 1)",
                   "height": "100%",
                   "width": "0%",
                 },
@@ -3423,24 +2058,22 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -3461,15 +2094,16 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3480,8 +2114,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -3504,28 +2138,31 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3584,135 +2221,40 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
           ]
         }
       >
-        <View
-          data-blade-component="base-box"
+        <Text
+          accessible={true}
+          color="surface.text.gray.subtle"
+          data-blade-component="text"
+          fontFamily="text"
+          fontSize={75}
+          fontStyle="normal"
+          fontWeight="regular"
+          lineHeight={75}
           style={
             [
               {
-                "marginBottom": 4,
-                "marginRight": 16,
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 12,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 18,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
               },
             ]
           }
         >
-          <View
-            alignItems="center"
-            data-blade-component="base-box"
-            display="flex"
-            flexDirection="row"
-            flexWrap="wrap"
-            gap="spacing.0"
-            maxHeight="36px"
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "flexDirection": "row",
-                  "flexWrap": "wrap",
-                  "gap": 0,
-                  "maxHeight": 36,
-                },
-              ]
-            }
-          >
-            <Text
-              accessible={true}
-              color="surface.text.subdued.lowContrast"
-              data-blade-component="text"
-              fontFamily="text"
-              fontSize={75}
-              fontStyle="normal"
-              fontWeight="bold"
-              lineHeight={50}
-              numberOfLines={2}
-              style={
-                [
-                  {
-                    "color": "hsla(217, 18%, 45%, 1)",
-                    "fontFamily": "Lato",
-                    "fontSize": 12,
-                    "fontStyle": "normal",
-                    "fontWeight": "700",
-                    "lineHeight": 16,
-                    "marginBottom": 0,
-                    "marginLeft": 0,
-                    "marginRight": 0,
-                    "marginTop": 0,
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "textDecorationLine": "none",
-                  },
-                ]
-              }
-            >
-              Label
-            </Text>
-            <View
-              data-blade-component="visually-hidden"
-              style={
-                [
-                  {
-                    "borderColor": "black",
-                    "borderStyle": "solid",
-                    "borderWidth": 0,
-                    "clip": "rect(0 0 0 0)",
-                    "clipPath": "inset(50%)",
-                    "height": 1,
-                    "left": -10000,
-                    "marginBottom": -1,
-                    "marginLeft": 0,
-                    "marginRight": -1,
-                    "marginTop": 0,
-                    "overflow": "hidden",
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 0,
-                    "position": "absolute",
-                    "whiteSpace": "nowrap",
-                    "width": 1,
-                    "wordWrap": "normal",
-                  },
-                ]
-              }
-            >
-              <Text
-                accessible={true}
-                color="surface.text.normal.lowContrast"
-                data-blade-component="text"
-                fontFamily="text"
-                fontSize={100}
-                fontStyle="normal"
-                fontWeight="regular"
-                lineHeight={100}
-                style={
-                  [
-                    {
-                      "color": "hsla(217, 56%, 17%, 1)",
-                      "fontFamily": "Lato",
-                      "fontSize": 14,
-                      "fontStyle": "normal",
-                      "fontWeight": "400",
-                      "lineHeight": 20,
-                      "marginBottom": 0,
-                      "marginLeft": 0,
-                      "marginRight": 0,
-                      "marginTop": 0,
-                      "paddingBottom": 0,
-                      "paddingLeft": 0,
-                      "paddingRight": 0,
-                      "paddingTop": 0,
-                      "textDecorationLine": "none",
-                    },
-                  ]
-                }
-              />
-            </View>
-          </View>
-        </View>
+          Label
+        </Text>
         <View
           data-blade-component="base-box"
           style={
@@ -3725,22 +2267,23 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -3779,7 +2322,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
         }
       >
         <View
-          backgroundColor="hsla(216, 15%, 54%, 0.18)"
+          backgroundColor="hsla(211, 20%, 52%, 0.09)"
           data-blade-component="base-box"
           height="2px"
           overflow="hidden"
@@ -3787,7 +2330,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
           style={
             [
               {
-                "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+                "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
                 "height": 2,
                 "overflow": "hidden",
                 "position": "relative",
@@ -3796,12 +2339,12 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
           }
         >
           <View
-            backgroundColor="hsla(218, 89%, 51%, 1)"
+            backgroundColor="hsla(227, 100%, 59%, 1)"
             progress={60}
             style={
               [
                 {
-                  "backgroundColor": "hsla(218, 89%, 51%, 1)",
+                  "backgroundColor": "hsla(227, 100%, 59%, 1)",
                   "height": "100%",
                   "width": "60%",
                 },
diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.ssr.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.ssr.test.tsx.snap
index b87b71c034c..53cd6ae4783 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.ssr.test.tsx.snap
+++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ProgressBar /> should render ProgressBar with default properties 1`] = `"<div id="root"><div data-blade-component="progress-bar" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><p class="StyledBaseText-dVBfTO krDqnr" data-blade-component="text">20%</p></div></div><div id="progress-undefined" role="progressbar" aria-valuenow="20" aria-valuetext="20%" aria-valuemin="0" aria-valuemax="100" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fAYtoS"><div data-blade-component="base-box" class="BaseBox-bmPWx ProgressBarFilledweb__BoxWithProgressFillTransition-sc-15oi5xk-3 ProgressBarFilledweb__DeterminateFilledContainer-sc-15oi5xk-4 ktwcbV ddQlxd jUCxws"><div data-blade-component="base-box" class="BaseBox-bmPWx ProgressBarFilledweb__BoxWithProgressFillTransition-sc-15oi5xk-3 ProgressBarFilledweb__DeterminatePulseAnimation-sc-15oi5xk-5  fHMPZy yGOYl"></div></div></div></div></div></div></div>"`;
+exports[`<ProgressBar /> should render ProgressBar with default properties 1`] = `"<div id="root"><div data-blade-component="progress-bar" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><p class="StyledBaseText-dVBfTO bLchiZ" data-blade-component="text">20%</p></div></div><div id="progress-undefined" role="progressbar" aria-valuenow="20" aria-valuetext="20%" aria-valuemin="0" aria-valuemax="100" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx ArQWZ"><div data-blade-component="base-box" class="BaseBox-bmPWx ProgressBarFilledweb__BoxWithProgressFillTransition-sc-15oi5xk-3 ProgressBarFilledweb__DeterminateFilledContainer-sc-15oi5xk-4 LpXTJ ddQlxd lGSZY"><div data-blade-component="base-box" class="BaseBox-bmPWx ProgressBarFilledweb__BoxWithProgressFillTransition-sc-15oi5xk-3 ProgressBarFilledweb__DeterminatePulseAnimation-sc-15oi5xk-5  fHMPZy yGOYl"></div></div></div></div></div></div></div>"`;
 
 exports[`<ProgressBar /> should render ProgressBar with default properties 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -36,11 +36,11 @@ exports[`<ProgressBar /> should render ProgressBar with default properties 2`] =
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c5.c5.c5.c5.c5 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
 }
 
 .c6.c6.c6.c6.c6 {
@@ -60,7 +60,7 @@ exports[`<ProgressBar /> should render ProgressBar with default properties 2`] =
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   height: 100%;
   width: 20%;
 }
@@ -77,14 +77,18 @@ exports[`<ProgressBar /> should render ProgressBar with default properties 2`] =
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap
index 552f44334c3..f1e435e854e 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap
+++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap
@@ -26,48 +26,29 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
   justify-content: space-between;
 }
 
-.c2.c2.c2.c2.c2 {
-  margin-bottom: 4px;
-}
-
 .c3.c3.c3.c3.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  max-height: 36px;
-  gap: 0px;
+  margin-bottom: 4px;
 }
 
-.c8.c8.c8.c8.c8 {
+.c4.c4.c4.c4.c4 {
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
-.c9.c9.c9.c9.c9 {
-  background-color: hsla(218,89%,51%,1);
+.c5.c5.c5.c5.c5 {
+  background-color: hsla(227,100%,59%,1);
 }
 
-.c10.c10.c10.c10.c10 {
+.c6.c6.c6.c6.c6 {
   -webkit-transition-property: width;
   transition-property: width;
   -webkit-transition-duration: 900ms;
   transition-duration: 900ms;
 }
 
-.c12.c12.c12.c12.c12 {
+.c8.c8.c8.c8.c8 {
   -webkit-transition-property: width;
   transition-property: width;
   -webkit-transition-duration: 900ms;
@@ -76,13 +57,13 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
   transition-timing-function: cubic-bezier(0.5,0,0,1);
 }
 
-.c11.c11.c11.c11.c11 {
-  background-color: hsla(218,89%,51%,1);
+.c7.c7.c7.c7.c7 {
+  background-color: hsla(227,100%,59%,1);
   height: 100%;
   width: 20%;
 }
 
-.c13.c13.c13.c13.c13 {
+.c9.c9.c9.c9.c9 {
   height: 100%;
   width: 100%;
   opacity: 0;
@@ -93,67 +74,23 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
   animation-delay: 3000ms;
 }
 
-.c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c7.c7.c7.c7.c7 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c2.c2.c2.c2.c2 {
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c5.c5.c5.c5.c5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: 0 -1px -1px 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  left: -10000px;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-
 <div>
   <div
     class=""
@@ -168,42 +105,17 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
         data-blade-component="base-box"
       >
         <label
-          data-blade-component="form-label"
-          for="progress-1"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          class="c2"
+          data-blade-component="text"
         >
-          <div
-            class="c2"
-            data-blade-component="base-box"
-          >
-            <div
-              class="c3"
-              data-blade-component="base-box"
-            >
-              <p
-                class="c4"
-                data-blade-component="text"
-              >
-                Label
-              </p>
-              <div
-                class="c5"
-                data-blade-component="visually-hidden"
-              >
-                <p
-                  class="c6"
-                  data-blade-component="text"
-                />
-              </div>
-            </div>
-          </div>
+          Label
         </label>
         <div
-          class="c2"
+          class="c3"
           data-blade-component="base-box"
         >
           <p
-            class="c7"
+            class="c2"
             data-blade-component="text"
           >
             20%
@@ -222,15 +134,15 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
         role="progressbar"
       >
         <div
-          class="c8"
+          class="c4"
           data-blade-component="base-box"
         >
           <div
-            class="c9 c10 c11"
+            class="c5 c6 c7"
             data-blade-component="base-box"
           >
             <div
-              class=" c12 c13"
+              class=" c8 c9"
               data-blade-component="base-box"
             />
           </div>
@@ -271,11 +183,11 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c3.c3.c3.c3.c3 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
 }
 
 .c4.c4.c4.c4.c4 {
@@ -295,7 +207,7 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
 }
 
 .c5.c5.c5.c5.c5 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   height: 100%;
   width: 50%;
 }
@@ -354,7 +266,7 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
 </div>
 `;
 
-exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=information ProgressBar 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -388,11 +300,11 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(214,21%,94%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c5.c5.c5.c5.c5 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(200,84%,44%,1);
 }
 
 .c6.c6.c6.c6.c6 {
@@ -412,7 +324,7 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(200,84%,44%,1);
   height: 100%;
   width: 20%;
 }
@@ -429,14 +341,18 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,19%,89%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -496,7 +412,7 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
 </div>
 `;
 
-exports[`<ProgressBar /> should render high contrast information intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=negative ProgressBar 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -530,11 +446,11 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(214,21%,94%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c5.c5.c5.c5.c5 {
-  background-color: hsla(193,100%,35%,1);
+  background-color: hsla(4,74%,49%,1);
 }
 
 .c6.c6.c6.c6.c6 {
@@ -554,7 +470,7 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(193,100%,35%,1);
+  background-color: hsla(4,74%,49%,1);
   height: 100%;
   width: 20%;
 }
@@ -571,14 +487,18 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,19%,89%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -615,7 +535,7 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
         aria-valuetext="20%"
         class=""
         data-blade-component="base-box"
-        id="progress-30"
+        id="progress-16"
         role="progressbar"
       >
         <div
@@ -638,7 +558,7 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
 </div>
 `;
 
-exports[`<ProgressBar /> should render high contrast negative intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=neutral ProgressBar 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -672,11 +592,11 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(214,21%,94%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c5.c5.c5.c5.c5 {
-  background-color: hsla(8,73%,47%,1);
+  background-color: hsla(211,29%,26%,1);
 }
 
 .c6.c6.c6.c6.c6 {
@@ -696,7 +616,7 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(8,73%,47%,1);
+  background-color: hsla(211,29%,26%,1);
   height: 100%;
   width: 20%;
 }
@@ -713,14 +633,18 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,19%,89%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -757,7 +681,7 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
         aria-valuetext="20%"
         class=""
         data-blade-component="base-box"
-        id="progress-22"
+        id="progress-18"
         role="progressbar"
       >
         <div
@@ -780,7 +704,7 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
 </div>
 `;
 
-exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=notice ProgressBar 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -814,11 +738,11 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(214,21%,94%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c5.c5.c5.c5.c5 {
-  background-color: hsla(216,33%,29%,1);
+  background-color: hsla(25,90%,48%,1);
 }
 
 .c6.c6.c6.c6.c6 {
@@ -838,7 +762,7 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,33%,29%,1);
+  background-color: hsla(25,90%,48%,1);
   height: 100%;
   width: 20%;
 }
@@ -855,14 +779,18 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,19%,89%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -899,7 +827,7 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
         aria-valuetext="20%"
         class=""
         data-blade-component="base-box"
-        id="progress-34"
+        id="progress-20"
         role="progressbar"
       >
         <div
@@ -922,7 +850,7 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
 </div>
 `;
 
-exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render color=positive ProgressBar 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -956,11 +884,11 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(214,21%,94%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c5.c5.c5.c5.c5 {
-  background-color: hsla(38,97%,38%,1);
+  background-color: hsla(150,100%,32%,1);
 }
 
 .c6.c6.c6.c6.c6 {
@@ -980,7 +908,7 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(38,97%,38%,1);
+  background-color: hsla(150,100%,32%,1);
   height: 100%;
   width: 20%;
 }
@@ -997,14 +925,18 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,19%,89%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -1041,7 +973,7 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
         aria-valuetext="20%"
         class=""
         data-blade-component="base-box"
-        id="progress-26"
+        id="progress-22"
         role="progressbar"
       >
         <div
@@ -1064,7 +996,7 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
 </div>
 `;
 
-exports[`<ProgressBar /> should render high contrast positive intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1084,25 +1016,25 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c2.c2.c2.c2.c2 {
+.c3.c3.c3.c3.c3 {
   margin-bottom: 4px;
 }
 
 .c4.c4.c4.c4.c4 {
   overflow: hidden;
   position: relative;
-  height: 2px;
-  background-color: hsla(214,21%,94%,0.18);
+  height: 4px;
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c5.c5.c5.c5.c5 {
-  background-color: hsla(160,100%,26%,1);
+  background-color: hsla(227,100%,59%,1);
 }
 
 .c6.c6.c6.c6.c6 {
@@ -1122,7 +1054,7 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(160,100%,26%,1);
+  background-color: hsla(227,100%,59%,1);
   height: 100%;
   width: 20%;
 }
@@ -1138,15 +1070,19 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
   animation-delay: 3000ms;
 }
 
-.c3.c3.c3.c3.c3 {
-  color: hsla(216,19%,89%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c2.c2.c2.c2.c2 {
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -1164,12 +1100,18 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
         class="c1"
         data-blade-component="base-box"
       >
-        <div
+        <label
           class="c2"
+          data-blade-component="text"
+        >
+          Label
+        </label>
+        <div
+          class="c3"
           data-blade-component="base-box"
         >
           <p
-            class="c3"
+            class="c2"
             data-blade-component="text"
           >
             20%
@@ -1177,13 +1119,14 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
         </div>
       </div>
       <div
+        aria-label="Label"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
         aria-valuetext="20%"
         class=""
         data-blade-component="base-box"
-        id="progress-18"
+        id="progress-8"
         role="progressbar"
       >
         <div
@@ -1206,7 +1149,7 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
 </div>
 `;
 
-exports[`<ProgressBar /> should render low contrast information intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1233,28 +1176,24 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
 }
 
 .c2.c2.c2.c2.c2 {
-  margin-bottom: 4px;
-}
-
-.c4.c4.c4.c4.c4 {
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
-.c5.c5.c5.c5.c5 {
-  background-color: hsla(193,100%,35%,1);
+.c3.c3.c3.c3.c3 {
+  background-color: hsla(227,100%,59%,1);
 }
 
-.c6.c6.c6.c6.c6 {
+.c4.c4.c4.c4.c4 {
   -webkit-transition-property: width;
   transition-property: width;
   -webkit-transition-duration: 900ms;
   transition-duration: 900ms;
 }
 
-.c8.c8.c8.c8.c8 {
+.c6.c6.c6.c6.c6 {
   -webkit-transition-property: width;
   transition-property: width;
   -webkit-transition-duration: 900ms;
@@ -1263,34 +1202,10 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
   transition-timing-function: cubic-bezier(0.5,0,0,1);
 }
 
-.c7.c7.c7.c7.c7 {
-  background-color: hsla(193,100%,35%,1);
-  height: 100%;
-  width: 20%;
-}
-
-.c9.c9.c9.c9.c9 {
+.c5.c5.c5.c5.c5 {
+  background-color: hsla(227,100%,59%,1);
   height: 100%;
-  width: 100%;
-  opacity: 0;
-  background-color: white;
-  -webkit-animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  -webkit-animation-delay: 3000ms;
-  animation-delay: 3000ms;
-}
-
-.c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
+  width: 70%;
 }
 
 <div>
@@ -1305,39 +1220,27 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
       <div
         class="c1"
         data-blade-component="base-box"
-      >
-        <div
-          class="c2"
-          data-blade-component="base-box"
-        >
-          <p
-            class="c3"
-            data-blade-component="text"
-          >
-            20%
-          </p>
-        </div>
-      </div>
+      />
       <div
         aria-valuemax="100"
         aria-valuemin="0"
-        aria-valuenow="20"
-        aria-valuetext="20%"
+        aria-valuenow="70"
+        aria-valuetext="70"
         class=""
         data-blade-component="base-box"
-        id="progress-28"
-        role="progressbar"
+        id="meter-12"
+        role="meter"
       >
         <div
-          class="c4"
+          class="c2"
           data-blade-component="base-box"
         >
           <div
-            class="c5 c6 c7"
+            class="c3 c4 c5"
             data-blade-component="base-box"
           >
             <div
-              class=" c8 c9"
+              class=" c6"
               data-blade-component="base-box"
             />
           </div>
@@ -1348,7 +1251,7 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
 </div>
 `;
 
-exports[`<ProgressBar /> should render low contrast negative intent ProgressBar 1`] = `
+exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1368,13 +1271,13 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c2.c2.c2.c2.c2 {
+.c3.c3.c3.c3.c3 {
   margin-bottom: 4px;
 }
 
@@ -1382,11 +1285,11 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c5.c5.c5.c5.c5 {
-  background-color: hsla(8,73%,47%,1);
+  background-color: hsla(227,100%,59%,1);
 }
 
 .c6.c6.c6.c6.c6 {
@@ -1406,7 +1309,7 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(8,73%,47%,1);
+  background-color: hsla(227,100%,59%,1);
   height: 100%;
   width: 20%;
 }
@@ -1422,15 +1325,19 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
   animation-delay: 3000ms;
 }
 
-.c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c2.c2.c2.c2.c2 {
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -1448,12 +1355,18 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
         class="c1"
         data-blade-component="base-box"
       >
-        <div
+        <label
           class="c2"
+          data-blade-component="text"
+        >
+          Label
+        </label>
+        <div
+          class="c3"
           data-blade-component="base-box"
         >
           <p
-            class="c3"
+            class="c2"
             data-blade-component="text"
           >
             20%
@@ -1461,13 +1374,14 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
         </div>
       </div>
       <div
+        aria-label="Label"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
         aria-valuetext="20%"
         class=""
         data-blade-component="base-box"
-        id="progress-20"
+        id="progress-6"
         role="progressbar"
       >
         <div
@@ -1490,8 +1404,30 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
 </div>
 `;
 
-exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1`] = `
-.c0.c0.c0.c0.c0 {
+exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
+.c1.c1.c1.c1.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.c4.c4.c4.c4.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1502,7 +1438,7 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
   width: 100%;
 }
 
-.c1.c1.c1.c1.c1 {
+.c5.c5.c5.c5.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1510,35 +1446,35 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
-.c2.c2.c2.c2.c2 {
+.c7.c7.c7.c7.c7 {
   margin-bottom: 4px;
 }
 
-.c4.c4.c4.c4.c4 {
+.c8.c8.c8.c8.c8 {
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
-.c5.c5.c5.c5.c5 {
-  background-color: hsla(216,33%,29%,1);
+.c9.c9.c9.c9.c9 {
+  background-color: hsla(227,100%,59%,1);
 }
 
-.c6.c6.c6.c6.c6 {
+.c10.c10.c10.c10.c10 {
   -webkit-transition-property: width;
   transition-property: width;
   -webkit-transition-duration: 900ms;
   transition-duration: 900ms;
 }
 
-.c8.c8.c8.c8.c8 {
+.c12.c12.c12.c12.c12 {
   -webkit-transition-property: width;
   transition-property: width;
   -webkit-transition-duration: 900ms;
@@ -1547,13 +1483,13 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
   transition-timing-function: cubic-bezier(0.5,0,0,1);
 }
 
-.c7.c7.c7.c7.c7 {
-  background-color: hsla(216,33%,29%,1);
+.c11.c11.c11.c11.c11 {
+  background-color: hsla(227,100%,59%,1);
   height: 100%;
-  width: 20%;
+  width: 0%;
 }
 
-.c9.c9.c9.c9.c9 {
+.c13.c13.c13.c13.c13 {
   height: 100%;
   width: 100%;
   opacity: 0;
@@ -1565,1138 +1501,48 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.c6.c6.c6.c6.c6 {
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-<div>
-  <div
-    class=""
-    data-blade-component="progress-bar"
-  >
-    <div
-      class="c0"
-      data-blade-component="base-box"
-    >
-      <div
-        class="c1"
-        data-blade-component="base-box"
-      >
-        <div
-          class="c2"
-          data-blade-component="base-box"
-        >
-          <p
-            class="c3"
-            data-blade-component="text"
-          >
-            20%
-          </p>
-        </div>
-      </div>
-      <div
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="20"
-        aria-valuetext="20%"
-        class=""
-        data-blade-component="base-box"
-        id="progress-32"
-        role="progressbar"
-      >
-        <div
-          class="c4"
-          data-blade-component="base-box"
-        >
-          <div
-            class="c5 c6 c7"
-            data-blade-component="base-box"
-          >
-            <div
-              class=" c8 c9"
-              data-blade-component="base-box"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`] = `
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2.c2.c2.c2.c2 {
-  margin-bottom: 4px;
-}
-
-.c4.c4.c4.c4.c4 {
-  overflow: hidden;
-  position: relative;
-  height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
-}
-
-.c5.c5.c5.c5.c5 {
-  background-color: hsla(38,97%,38%,1);
-}
-
-.c6.c6.c6.c6.c6 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-}
-
-.c8.c8.c8.c8.c8 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-  -webkit-transition-timing-function: cubic-bezier(0.5,0,0,1);
-  transition-timing-function: cubic-bezier(0.5,0,0,1);
-}
-
-.c7.c7.c7.c7.c7 {
-  background-color: hsla(38,97%,38%,1);
-  height: 100%;
-  width: 20%;
-}
-
-.c9.c9.c9.c9.c9 {
-  height: 100%;
-  width: 100%;
-  opacity: 0;
-  background-color: white;
-  -webkit-animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  -webkit-animation-delay: 3000ms;
-  animation-delay: 3000ms;
-}
-
-.c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <div
-    class=""
-    data-blade-component="progress-bar"
-  >
-    <div
-      class="c0"
-      data-blade-component="base-box"
-    >
-      <div
-        class="c1"
-        data-blade-component="base-box"
-      >
-        <div
-          class="c2"
-          data-blade-component="base-box"
-        >
-          <p
-            class="c3"
-            data-blade-component="text"
-          >
-            20%
-          </p>
-        </div>
-      </div>
-      <div
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="20"
-        aria-valuetext="20%"
-        class=""
-        data-blade-component="base-box"
-        id="progress-24"
-        role="progressbar"
-      >
-        <div
-          class="c4"
-          data-blade-component="base-box"
-        >
-          <div
-            class="c5 c6 c7"
-            data-blade-component="base-box"
-          >
-            <div
-              class=" c8 c9"
-              data-blade-component="base-box"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProgressBar /> should render low contrast positive intent ProgressBar 1`] = `
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2.c2.c2.c2.c2 {
-  margin-bottom: 4px;
-}
-
-.c4.c4.c4.c4.c4 {
-  overflow: hidden;
-  position: relative;
-  height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
-}
-
-.c5.c5.c5.c5.c5 {
-  background-color: hsla(160,100%,26%,1);
-}
-
-.c6.c6.c6.c6.c6 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-}
-
-.c8.c8.c8.c8.c8 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-  -webkit-transition-timing-function: cubic-bezier(0.5,0,0,1);
-  transition-timing-function: cubic-bezier(0.5,0,0,1);
-}
-
-.c7.c7.c7.c7.c7 {
-  background-color: hsla(160,100%,26%,1);
-  height: 100%;
-  width: 20%;
-}
-
-.c9.c9.c9.c9.c9 {
-  height: 100%;
-  width: 100%;
-  opacity: 0;
-  background-color: white;
-  -webkit-animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  -webkit-animation-delay: 3000ms;
-  animation-delay: 3000ms;
-}
-
-.c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <div
-    class=""
-    data-blade-component="progress-bar"
-  >
-    <div
-      class="c0"
-      data-blade-component="base-box"
-    >
-      <div
-        class="c1"
-        data-blade-component="base-box"
-      >
-        <div
-          class="c2"
-          data-blade-component="base-box"
-        >
-          <p
-            class="c3"
-            data-blade-component="text"
-          >
-            20%
-          </p>
-        </div>
-      </div>
-      <div
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="20"
-        aria-valuetext="20%"
-        class=""
-        data-blade-component="base-box"
-        id="progress-16"
-        role="progressbar"
-      >
-        <div
-          class="c4"
-          data-blade-component="base-box"
-        >
-          <div
-            class="c5 c6 c7"
-            data-blade-component="base-box"
-          >
-            <div
-              class=" c8 c9"
-              data-blade-component="base-box"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c2.c2.c2.c2.c2 {
-  margin-bottom: 4px;
-}
-
-.c3.c3.c3.c3.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  max-height: 36px;
-  gap: 0px;
-}
-
-.c8.c8.c8.c8.c8 {
-  overflow: hidden;
-  position: relative;
-  height: 4px;
-  background-color: hsla(216,15%,54%,0.18);
-}
-
-.c9.c9.c9.c9.c9 {
-  background-color: hsla(218,89%,51%,1);
-}
-
-.c10.c10.c10.c10.c10 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-}
-
-.c12.c12.c12.c12.c12 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-  -webkit-transition-timing-function: cubic-bezier(0.5,0,0,1);
-  transition-timing-function: cubic-bezier(0.5,0,0,1);
-}
-
-.c11.c11.c11.c11.c11 {
-  background-color: hsla(218,89%,51%,1);
-  height: 100%;
-  width: 20%;
-}
-
-.c13.c13.c13.c13.c13 {
-  height: 100%;
-  width: 100%;
-  opacity: 0;
-  background-color: white;
-  -webkit-animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  -webkit-animation-delay: 3000ms;
-  animation-delay: 3000ms;
-}
-
-.c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c7.c7.c7.c7.c7 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c5.c5.c5.c5.c5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: 0 -1px -1px 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  left: -10000px;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-
-<div>
-  <div
-    class=""
-    data-blade-component="progress-bar"
-  >
-    <div
-      class="c0"
-      data-blade-component="base-box"
-    >
-      <div
-        class="c1"
-        data-blade-component="base-box"
-      >
-        <label
-          data-blade-component="form-label"
-          for="progress-8"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
-        >
-          <div
-            class="c2"
-            data-blade-component="base-box"
-          >
-            <div
-              class="c3"
-              data-blade-component="base-box"
-            >
-              <p
-                class="c4"
-                data-blade-component="text"
-              >
-                Label
-              </p>
-              <div
-                class="c5"
-                data-blade-component="visually-hidden"
-              >
-                <p
-                  class="c6"
-                  data-blade-component="text"
-                />
-              </div>
-            </div>
-          </div>
-        </label>
-        <div
-          class="c2"
-          data-blade-component="base-box"
-        >
-          <p
-            class="c7"
-            data-blade-component="text"
-          >
-            20%
-          </p>
-        </div>
-      </div>
-      <div
-        aria-label="Label"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="20"
-        aria-valuetext="20%"
-        class=""
-        data-blade-component="base-box"
-        id="progress-8"
-        role="progressbar"
-      >
-        <div
-          class="c8"
-          data-blade-component="base-box"
-        >
-          <div
-            class="c9 c10 c11"
-            data-blade-component="base-box"
-          >
-            <div
-              class=" c12 c13"
-              data-blade-component="base-box"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-}
-
-.c2.c2.c2.c2.c2 {
-  overflow: hidden;
-  position: relative;
-  height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
-}
-
-.c3.c3.c3.c3.c3 {
-  background-color: hsla(218,89%,51%,1);
-}
-
-.c4.c4.c4.c4.c4 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-}
-
-.c6.c6.c6.c6.c6 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-  -webkit-transition-timing-function: cubic-bezier(0.5,0,0,1);
-  transition-timing-function: cubic-bezier(0.5,0,0,1);
-}
-
-.c5.c5.c5.c5.c5 {
-  background-color: hsla(218,89%,51%,1);
-  height: 100%;
-  width: 70%;
-}
-
-<div>
-  <div
-    class=""
-    data-blade-component="progress-bar"
-  >
-    <div
-      class="c0"
-      data-blade-component="base-box"
-    >
-      <div
-        class="c1"
-        data-blade-component="base-box"
-      />
-      <div
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="70"
-        aria-valuetext="70"
-        class=""
-        data-blade-component="base-box"
-        id="meter-12"
-        role="meter"
-      >
-        <div
-          class="c2"
-          data-blade-component="base-box"
-        >
-          <div
-            class="c3 c4 c5"
-            data-blade-component="base-box"
-          >
-            <div
-              class=" c6"
-              data-blade-component="base-box"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c2.c2.c2.c2.c2 {
-  margin-bottom: 4px;
-}
-
-.c3.c3.c3.c3.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  max-height: 36px;
-  gap: 0px;
-}
-
-.c8.c8.c8.c8.c8 {
-  overflow: hidden;
-  position: relative;
-  height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
-}
-
-.c9.c9.c9.c9.c9 {
-  background-color: hsla(218,89%,51%,1);
-}
-
-.c10.c10.c10.c10.c10 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-}
-
-.c12.c12.c12.c12.c12 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-  -webkit-transition-timing-function: cubic-bezier(0.5,0,0,1);
-  transition-timing-function: cubic-bezier(0.5,0,0,1);
-}
-
-.c11.c11.c11.c11.c11 {
-  background-color: hsla(218,89%,51%,1);
-  height: 100%;
-  width: 20%;
-}
-
-.c13.c13.c13.c13.c13 {
-  height: 100%;
-  width: 100%;
-  opacity: 0;
-  background-color: white;
-  -webkit-animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  -webkit-animation-delay: 3000ms;
-  animation-delay: 3000ms;
-}
-
-.c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c7.c7.c7.c7.c7 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c5.c5.c5.c5.c5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: 0 -1px -1px 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  left: -10000px;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-
-<div>
-  <div
-    class=""
-    data-blade-component="progress-bar"
-  >
-    <div
-      class="c0"
-      data-blade-component="base-box"
-    >
-      <div
-        class="c1"
-        data-blade-component="base-box"
-      >
-        <label
-          data-blade-component="form-label"
-          for="progress-6"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
-        >
-          <div
-            class="c2"
-            data-blade-component="base-box"
-          >
-            <div
-              class="c3"
-              data-blade-component="base-box"
-            >
-              <p
-                class="c4"
-                data-blade-component="text"
-              >
-                Label
-              </p>
-              <div
-                class="c5"
-                data-blade-component="visually-hidden"
-              >
-                <p
-                  class="c6"
-                  data-blade-component="text"
-                />
-              </div>
-            </div>
-          </div>
-        </label>
-        <div
-          class="c2"
-          data-blade-component="base-box"
-        >
-          <p
-            class="c7"
-            data-blade-component="text"
-          >
-            20%
-          </p>
-        </div>
-      </div>
-      <div
-        aria-label="Label"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="20"
-        aria-valuetext="20%"
-        class=""
-        data-blade-component="base-box"
-        id="progress-6"
-        role="progressbar"
-      >
-        <div
-          class="c8"
-          data-blade-component="base-box"
-        >
-          <div
-            class="c9 c10 c11"
-            data-blade-component="base-box"
-          >
-            <div
-              class=" c12 c13"
-              data-blade-component="base-box"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
-.c1.c1.c1.c1.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c4.c4.c4.c4.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
-}
-
-.c5.c5.c5.c5.c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c6.c6.c6.c6.c6 {
-  margin-bottom: 4px;
-}
-
-.c7.c7.c7.c7.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  max-height: 36px;
-  gap: 0px;
-}
-
-.c12.c12.c12.c12.c12 {
-  overflow: hidden;
-  position: relative;
-  height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
-}
-
-.c13.c13.c13.c13.c13 {
-  background-color: hsla(218,89%,51%,1);
-}
-
-.c14.c14.c14.c14.c14 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-}
-
-.c16.c16.c16.c16.c16 {
-  -webkit-transition-property: width;
-  transition-property: width;
-  -webkit-transition-duration: 900ms;
-  transition-duration: 900ms;
-  -webkit-transition-timing-function: cubic-bezier(0.5,0,0,1);
-  transition-timing-function: cubic-bezier(0.5,0,0,1);
-}
-
-.c15.c15.c15.c15.c15 {
-  background-color: hsla(218,89%,51%,1);
-  height: 100%;
-  width: 0%;
-}
-
-.c17.c17.c17.c17.c17 {
-  height: 100%;
-  width: 100%;
-  opacity: 0;
-  background-color: white;
-  -webkit-animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  animation: iUKfkR-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
-  -webkit-animation-delay: 3000ms;
-  animation-delay: 3000ms;
-}
-
-.c3.c3.c3.c3.c3 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  text-align: center;
-  margin: 0;
-  padding: 0;
-}
-
-.c8.c8.c8.c8.c8 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.c10.c10.c10.c10.c10 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c11.c11.c11.c11.c11 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c9.c9.c9.c9.c9 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: 0 -1px -1px 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  left: -10000px;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -2712,6 +1558,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2726,25 +1573,25 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -2787,42 +1634,17 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
         data-blade-component="base-box"
       >
         <label
-          data-blade-component="form-label"
-          for="progress-3"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          class="c6"
+          data-blade-component="text"
         >
-          <div
-            class="c6"
-            data-blade-component="base-box"
-          >
-            <div
-              class="c7"
-              data-blade-component="base-box"
-            >
-              <p
-                class="c8"
-                data-blade-component="text"
-              >
-                Label
-              </p>
-              <div
-                class="c9"
-                data-blade-component="visually-hidden"
-              >
-                <p
-                  class="c10"
-                  data-blade-component="text"
-                />
-              </div>
-            </div>
-          </div>
+          Label
         </label>
         <div
-          class="c6"
+          class="c7"
           data-blade-component="base-box"
         >
           <p
-            class="c11"
+            class="c6"
             data-blade-component="text"
           >
             0%
@@ -2841,15 +1663,15 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
         role="progressbar"
       >
         <div
-          class="c12"
+          class="c8"
           data-blade-component="base-box"
         >
           <div
-            class="c13 c14 c15"
+            class="c9 c10 c11"
             data-blade-component="base-box"
           >
             <div
-              class=" c16 c17"
+              class=" c12 c13"
               data-blade-component="base-box"
             />
           </div>
@@ -2880,6 +1702,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c4.c4.c4.c4.c4 {
@@ -2907,48 +1730,29 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
   justify-content: space-between;
 }
 
-.c6.c6.c6.c6.c6 {
-  margin-bottom: 4px;
-}
-
 .c7.c7.c7.c7.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  max-height: 36px;
-  gap: 0px;
+  margin-bottom: 4px;
 }
 
-.c12.c12.c12.c12.c12 {
+.c8.c8.c8.c8.c8 {
   overflow: hidden;
   position: relative;
   height: 2px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
-.c13.c13.c13.c13.c13 {
-  background-color: hsla(218,89%,51%,1);
+.c9.c9.c9.c9.c9 {
+  background-color: hsla(227,100%,59%,1);
 }
 
-.c14.c14.c14.c14.c14 {
+.c10.c10.c10.c10.c10 {
   -webkit-transition-property: width;
   transition-property: width;
   -webkit-transition-duration: 900ms;
   transition-duration: 900ms;
 }
 
-.c16.c16.c16.c16.c16 {
+.c12.c12.c12.c12.c12 {
   -webkit-transition-property: width;
   transition-property: width;
   -webkit-transition-duration: 900ms;
@@ -2957,13 +1761,13 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
   transition-timing-function: cubic-bezier(0.5,0,0,1);
 }
 
-.c15.c15.c15.c15.c15 {
-  background-color: hsla(218,89%,51%,1);
+.c11.c11.c11.c11.c11 {
+  background-color: hsla(227,100%,59%,1);
   height: 100%;
   width: 0%;
 }
 
-.c17.c17.c17.c17.c17 {
+.c13.c13.c13.c13.c13 {
   height: 100%;
   width: 100%;
   opacity: 0;
@@ -2976,87 +1780,47 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
-.c8.c8.c8.c8.c8 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.c10.c10.c10.c10.c10 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c11.c11.c11.c11.c11 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c6.c6.c6.c6.c6 {
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c9.c9.c9.c9.c9 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: 0 -1px -1px 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  left: -10000px;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-
 .c0.c0.c0.c0.c0 {
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3072,6 +1836,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3086,25 +1851,25 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3147,42 +1912,17 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
         data-blade-component="base-box"
       >
         <label
-          data-blade-component="form-label"
-          for="progress-3"
-          style="width: auto; flex-shrink: 0; margin-right: 16px;"
+          class="c6"
+          data-blade-component="text"
         >
-          <div
-            class="c6"
-            data-blade-component="base-box"
-          >
-            <div
-              class="c7"
-              data-blade-component="base-box"
-            >
-              <p
-                class="c8"
-                data-blade-component="text"
-              >
-                Label
-              </p>
-              <div
-                class="c9"
-                data-blade-component="visually-hidden"
-              >
-                <p
-                  class="c10"
-                  data-blade-component="text"
-                />
-              </div>
-            </div>
-          </div>
+          Label
         </label>
         <div
-          class="c6"
+          class="c7"
           data-blade-component="base-box"
         >
           <p
-            class="c11"
+            class="c6"
             data-blade-component="text"
           >
             0%
@@ -3201,15 +1941,15 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
         role="progressbar"
       >
         <div
-          class="c12"
+          class="c8"
           data-blade-component="base-box"
         >
           <div
-            class="c13 c14 c15"
+            class="c9 c10 c11"
             data-blade-component="base-box"
           >
             <div
-              class=" c16 c17"
+              class=" c12 c13"
               data-blade-component="base-box"
             />
           </div>
diff --git a/packages/blade/src/components/Radio/Radio.stories.tsx b/packages/blade/src/components/Radio/Radio.stories.tsx
index 2e952884088..84cca2ac83e 100644
--- a/packages/blade/src/components/Radio/Radio.stories.tsx
+++ b/packages/blade/src/components/Radio/Radio.stories.tsx
@@ -18,12 +18,7 @@ const Page = (): React.ReactElement => {
       componentDescription="Radio & RadioGroup can be used in forms when a user needs to single value from several options."
       componentName="Radio"
       imports={`import { Radio, RadioGroup } from '@razorpay/blade/components';\nimport type { RadioProps, RadioGroupProps } from '@razorpay/blade/components';`}
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13133%3A160709',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=11314%3A278927',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13133%3A160709"
     >
       <Title>Usage</Title>
       <Sandbox showConsole editorHeight={400}>
diff --git a/packages/blade/src/components/Radio/Radio.tsx b/packages/blade/src/components/Radio/Radio.tsx
index 699ce1d09f3..f88daada639 100644
--- a/packages/blade/src/components/Radio/Radio.tsx
+++ b/packages/blade/src/components/Radio/Radio.tsx
@@ -127,7 +127,9 @@ const _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (
           </BaseBox>
           {showHelpText && (
             <BaseBox marginLeft={isSmall ? 'spacing.6' : 'spacing.7'}>
-              <SelectorSupportText id={ids?.helpTextId}>{helpText}</SelectorSupportText>
+              <SelectorSupportText isNegative={true} id={ids?.helpTextId}>
+                {helpText}
+              </SelectorSupportText>
             </BaseBox>
           )}
         </BaseBox>
diff --git a/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx b/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx
index 82e2579d72f..a00546b176d 100644
--- a/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx
+++ b/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx
@@ -41,7 +41,8 @@ const RadioIcon = ({ isChecked, isDisabled, isNegative, size }: RadioIconProps)
   let variant: 'default' | 'disabled' | 'negative' = 'default';
   if (isDisabled) variant = 'disabled';
   if (isNegative) variant = 'negative';
-  const dotColor = getIn(theme, radioIconColors.variants[variant].dot[state]);
+  const dotColorToken = radioIconColors.variants[variant].dot[state];
+  const dotColor = getIn(theme, dotColorToken);
 
   return (
     <RadioIconWrapper
diff --git a/packages/blade/src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts b/packages/blade/src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts
index b61147fae0c..d1790db552c 100644
--- a/packages/blade/src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts
+++ b/packages/blade/src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts
@@ -25,8 +25,8 @@ const getRadioIconWrapperStyles = ({
   const checked = isChecked ? 'checked' : 'unchecked';
   const background = radioIconColors.variants[variant].background[checked];
   const border = radioIconColors.variants[variant].border[checked];
-  const backgroundColor = background === 'transparent' ? background : getIn(theme, background);
-  const borderColor = border === 'transparent' ? border : getIn(theme, border);
+  const backgroundColor = getIn(theme, background);
+  const borderColor = getIn(theme, border);
 
   return {
     position: 'relative',
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.native.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.native.test.tsx.snap
index 3177a1bb5b8..6973d5352d1 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.native.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.native.test.tsx.snap
@@ -66,23 +66,24 @@ exports[`<Radio /> should render radio with label 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
-            fontWeight="bold"
-            lineHeight={50}
+            fontWeight="semibold"
+            lineHeight={75}
             numberOfLines={2}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
-                  "lineHeight": 16,
+                  "fontWeight": "600",
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -129,7 +130,7 @@ exports[`<Radio /> should render radio with label 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -139,11 +140,12 @@ exports[`<Radio /> should render radio with label 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -285,8 +287,8 @@ exports[`<Radio /> should render radio with label 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 9999,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -315,20 +317,22 @@ exports[`<Radio /> should render radio with label 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -423,23 +427,24 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
-            fontWeight="bold"
-            lineHeight={50}
+            fontWeight="semibold"
+            lineHeight={75}
             numberOfLines={2}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
-                  "lineHeight": 16,
+                  "fontWeight": "600",
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -486,7 +491,7 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -496,11 +501,12 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -642,8 +648,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(216, 15%, 54%, 0.18)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(214, 40%, 92%, 1)",
                             "borderRadius": 9999,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -672,20 +678,22 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.placeholder.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.disabled"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(214, 18%, 69%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 20%, 52%, 0.32)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap
index 8ce6f22f80a..df6402ab66d 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Radio /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:16px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">,Select One</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 efVmwY" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 jdeAPG"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><div class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="base-text">Apple</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx ewfYUx"><span class="StyledBaseText-dVBfTO dgnvqQ" id="radio-undefined-helptext-undefined" data-blade-component="base-text">Apple Help</span></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 efVmwY" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 jdeAPG"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><div class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="base-text">Mango</div></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO dgnvqQ" data-blade-component="base-text">Select One</span></span></div></div></div></div></div>"`;
+exports[`<Radio /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:16px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">,Select One</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx ewfYUx"><div id="radio-undefined-helptext-undefined" data-blade-component="box" class="BaseBox-bmPWx kTMxBD"><span class="StyledBaseText-dVBfTO mgsbJ" data-blade-component="text">Apple Help</span></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Mango</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO fGDeRG" data-blade-component="text">Select One</span></span></div></div></div></div></div>"`;
 
 exports[`<Radio /> should render with help text 2`] = `
 .c9.c9.c9.c9.c9 {
@@ -23,8 +23,8 @@ exports[`<Radio /> should render with help text 2`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 9999px;
-  background-color: transparent;
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(211,27%,76%,1);
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1);
@@ -95,23 +95,31 @@ exports[`<Radio /> should render with help text 2`] = `
   margin-left: 24px;
 }
 
-.c14.c14.c14.c14.c14 {
-  margin-bottom: 0px;
+.c13.c13.c13.c13.c13 {
+  display: contents;
 }
 
 .c15.c15.c15.c15.c15 {
+  margin-bottom: 0px;
+}
+
+.c16.c16.c16.c16.c16 {
   margin-top: 4px;
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -122,40 +130,69 @@ exports[`<Radio /> should render with help text 2`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c13.c13.c13.c13.c13 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c14.c14.c14.c14.c14 {
+  color: hsla(4,74%,49%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 400;
+  font-style: italic;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c17.c17.c17.c17.c17 {
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -195,13 +232,19 @@ exports[`<Radio /> should render with help text 2`] = `
 }
 
 .c8.c8.c8.c8.c8:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c8.c8.c8.c8.c8:hover + div {
-  border-color: hsla(214,18%,69%,1);
-  background-color: hsla(216,15%,54%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -302,31 +345,36 @@ exports[`<Radio /> should render with help text 2`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Apple
-                    </div>
+                    </p>
                   </div>
                   <div
                     class="c12"
                     data-blade-component="base-box"
                   >
-                    <span
+                    <div
                       class="c13"
-                      data-blade-component="base-text"
+                      data-blade-component="box"
                       id="radio-1-helptext-2"
                     >
-                      Apple Help
-                    </span>
+                      <span
+                        class="c14"
+                        data-blade-component="text"
+                      >
+                        Apple Help
+                      </span>
+                    </div>
                   </div>
                 </div>
               </label>
             </div>
           </div>
           <div
-            class="c14"
+            class="c15"
             data-blade-component="base-box"
           >
             <div
@@ -365,12 +413,12 @@ exports[`<Radio /> should render with help text 2`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Mango
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -378,7 +426,7 @@ exports[`<Radio /> should render with help text 2`] = `
           </div>
         </div>
         <div
-          class="c15"
+          class="c16"
           data-blade-component="base-box"
         >
           <span
@@ -387,8 +435,8 @@ exports[`<Radio /> should render with help text 2`] = `
             style="word-break:break-all"
           >
             <span
-              class="c13"
-              data-blade-component="base-text"
+              class="c17"
+              data-blade-component="text"
             >
               Select One
             </span>
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap
index 933b1e2420d..c260916e5c8 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap
@@ -21,8 +21,8 @@ exports[`<Radio /> should render radio with label 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 9999px;
-  background-color: transparent;
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(211,27%,76%,1);
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1);
@@ -94,14 +94,18 @@ exports[`<Radio /> should render radio with label 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -112,27 +116,35 @@ exports[`<Radio /> should render radio with label 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -172,13 +184,19 @@ exports[`<Radio /> should render radio with label 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9:hover + div {
-  border-color: hsla(214,18%,69%,1);
-  background-color: hsla(216,15%,54%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -275,12 +293,12 @@ exports[`<Radio /> should render radio with label 1`] = `
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Apple
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -314,8 +332,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 9999px;
-  background-color: transparent;
-  border-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(214,40%,92%,1);
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1);
@@ -387,14 +405,18 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -405,27 +427,35 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,20%,52%,0.32);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -465,8 +495,14 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 <div>
@@ -560,12 +596,12 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                       class="c11"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c12"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Apple
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap
index 3bb676799be..95694bda28d 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap
@@ -66,23 +66,24 @@ exports[`<RadioGroup /> should render with help text 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
-            fontWeight="bold"
-            lineHeight={50}
+            fontWeight="semibold"
+            lineHeight={75}
             numberOfLines={2}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
-                  "lineHeight": 16,
+                  "fontWeight": "600",
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -129,7 +130,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -139,11 +140,12 @@ exports[`<RadioGroup /> should render with help text 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -287,8 +289,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 9999,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -317,20 +319,22 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -455,8 +459,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 9999,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -485,20 +489,22 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -623,8 +629,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 9999,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -653,20 +659,22 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -716,20 +724,22 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.muted.lowContrast"
-              data-blade-component="base-text"
+              color="surface.text.gray.muted"
+              data-blade-component="text"
               fontFamily="text"
               fontSize={50}
               fontStyle="italic"
+              fontWeight="regular"
               lineHeight={50}
               style={
                 [
                   {
-                    "color": "hsla(216, 16%, 60%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(211, 22%, 56%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 11,
                     "fontStyle": "italic",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 16,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -820,23 +830,24 @@ exports[`<RadioGroup /> should render with label 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.subdued.lowContrast"
+            color="surface.text.gray.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
-            fontWeight="bold"
-            lineHeight={50}
+            fontWeight="semibold"
+            lineHeight={75}
             numberOfLines={2}
             style={
               [
                 {
-                  "color": "hsla(217, 18%, 45%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(211, 26%, 34%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
-                  "lineHeight": 16,
+                  "fontWeight": "600",
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -883,7 +894,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
           >
             <Text
               accessible={true}
-              color="surface.text.normal.lowContrast"
+              color="surface.text.gray.normal"
               data-blade-component="text"
               fontFamily="text"
               fontSize={100}
@@ -893,11 +904,12 @@ exports[`<RadioGroup /> should render with label 1`] = `
               style={
                 [
                   {
-                    "color": "hsla(217, 56%, 17%, 1)",
-                    "fontFamily": "Lato",
+                    "color": "hsla(212, 39%, 16%, 1)",
+                    "fontFamily": "Inter",
                     "fontSize": 14,
                     "fontStyle": "normal",
                     "fontWeight": "400",
+                    "letterSpacing": 0,
                     "lineHeight": 20,
                     "marginBottom": 0,
                     "marginLeft": 0,
@@ -1039,8 +1051,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 9999,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -1069,20 +1081,22 @@ exports[`<RadioGroup /> should render with label 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -1207,8 +1221,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 9999,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -1237,20 +1251,22 @@ exports[`<RadioGroup /> should render with label 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
@@ -1375,8 +1391,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "hsla(214, 18%, 69%, 1)",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                            "borderColor": "hsla(211, 27%, 76%, 1)",
                             "borderRadius": 9999,
                             "borderStyle": "solid",
                             "borderWidth": 1.5,
@@ -1405,20 +1421,22 @@ exports[`<RadioGroup /> should render with label 1`] = `
                     />
                     <Text
                       accessible={true}
-                      color="surface.text.subtle.lowContrast"
-                      data-blade-component="base-text"
+                      color="surface.text.gray.subtle"
+                      data-blade-component="text"
                       fontFamily="text"
                       fontSize={100}
+                      fontStyle="normal"
                       fontWeight="regular"
                       lineHeight={100}
                       style={
                         [
                           {
-                            "color": "hsla(216, 27%, 36%, 1)",
-                            "fontFamily": "Lato",
+                            "color": "hsla(211, 26%, 34%, 1)",
+                            "fontFamily": "Inter",
                             "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
+                            "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
                             "marginLeft": 0,
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap
index 1b916e520b2..139704ec2f1 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RadioGroup /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:16px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO karMJT" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">,Select one</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 efVmwY" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 jdeAPG"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><div class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="base-text">Apple</div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 efVmwY" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 jdeAPG"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><div class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="base-text">Mango</div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 efVmwY" value="orange"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 jdeAPG"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><div class="StyledBaseText-dVBfTO kMtjEL" data-blade-component="base-text">Orange</div></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO dgnvqQ" data-blade-component="base-text">Select one</span></span></div></div></div></div></div>"`;
+exports[`<RadioGroup /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:16px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">,Select one</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Apple</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Mango</p></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eECVtI" value="orange"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kSiWkh"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Orange</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO fGDeRG" data-blade-component="text">Select one</span></span></div></div></div></div></div>"`;
 
 exports[`<RadioGroup /> should render with help text 2`] = `
 .c9.c9.c9.c9.c9 {
@@ -23,8 +23,8 @@ exports[`<RadioGroup /> should render with help text 2`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 9999px;
-  background-color: transparent;
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(211,27%,76%,1);
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1);
@@ -100,14 +100,18 @@ exports[`<RadioGroup /> should render with help text 2`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -118,40 +122,52 @@ exports[`<RadioGroup /> should render with help text 2`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -191,13 +207,19 @@ exports[`<RadioGroup /> should render with help text 2`] = `
 }
 
 .c8.c8.c8.c8.c8:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c8.c8.c8.c8.c8:hover + div {
-  border-color: hsla(214,18%,69%,1);
-  background-color: hsla(216,15%,54%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -298,12 +320,12 @@ exports[`<RadioGroup /> should render with help text 2`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Apple
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -349,12 +371,12 @@ exports[`<RadioGroup /> should render with help text 2`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Mango
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -400,12 +422,12 @@ exports[`<RadioGroup /> should render with help text 2`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Orange
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -423,7 +445,7 @@ exports[`<RadioGroup /> should render with help text 2`] = `
           >
             <span
               class="c14"
-              data-blade-component="base-text"
+              data-blade-component="text"
             >
               Select one
             </span>
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap
index e74bd0c2256..6acc521d6ef 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.web.test.tsx.snap
@@ -21,8 +21,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 9999px;
-  background-color: transparent;
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(211,27%,76%,1);
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1);
@@ -98,14 +98,18 @@ exports[`<RadioGroup /> should render with help text 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -116,40 +120,52 @@ exports[`<RadioGroup /> should render with help text 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -189,13 +205,19 @@ exports[`<RadioGroup /> should render with help text 1`] = `
 }
 
 .c8.c8.c8.c8.c8:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c8.c8.c8.c8.c8:hover + div {
-  border-color: hsla(214,18%,69%,1);
-  background-color: hsla(216,15%,54%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -294,12 +316,12 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Apple
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -345,12 +367,12 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Mango
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -396,12 +418,12 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Orange
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -419,7 +441,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           >
             <span
               class="c14"
-              data-blade-component="base-text"
+              data-blade-component="text"
             >
               Select one
             </span>
@@ -452,8 +474,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
   border-style: solid;
   margin: 2px;
   border-radius: 9999px;
-  background-color: transparent;
-  border-color: hsla(214,18%,69%,1);
+  background-color: hsla(0,0%,100%,0);
+  border-color: hsla(211,27%,76%,1);
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1);
@@ -525,14 +547,18 @@ exports[`<RadioGroup /> should render with label 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -543,27 +569,35 @@ exports[`<RadioGroup /> should render with label 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -603,13 +637,19 @@ exports[`<RadioGroup /> should render with label 1`] = `
 }
 
 .c8.c8.c8.c8.c8:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c8.c8.c8.c8.c8:hover + div {
-  border-color: hsla(214,18%,69%,1);
-  background-color: hsla(216,15%,54%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -706,12 +746,12 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Apple
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -757,12 +797,12 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Mango
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
@@ -808,12 +848,12 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       class="c10"
                       data-blade-component="base-box"
                     />
-                    <div
+                    <p
                       class="c11"
-                      data-blade-component="base-text"
+                      data-blade-component="text"
                     >
                       Orange
-                    </div>
+                    </p>
                   </div>
                 </div>
               </label>
diff --git a/packages/blade/src/components/Radio/radioTokens.ts b/packages/blade/src/components/Radio/radioTokens.ts
index 1e31853ef2b..ce439e18130 100644
--- a/packages/blade/src/components/Radio/radioTokens.ts
+++ b/packages/blade/src/components/Radio/radioTokens.ts
@@ -1,6 +1,6 @@
 import type { Theme } from '~components/BladeProvider';
-import type { DotNotationColorStringToken } from '~utils/types';
 import type { SelectorInputHoverTokens } from '~components/Form/Selector/types';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 import { size } from '~tokens/global';
 
 const radioSizes = {
@@ -30,7 +30,7 @@ const radioSizes = {
   },
 } as const;
 
-type ColorTokens = `colors.${DotNotationColorStringToken<Theme['colors']>}` | 'transparent';
+type ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;
 type Variant = {
   dot: {
     checked: ColorTokens;
@@ -58,44 +58,44 @@ const radioIconColors: RadioIconColors = {
   variants: {
     default: {
       dot: {
-        checked: 'colors.brand.gray.200.lowContrast',
-        unchecked: 'colors.brand.gray.200.lowContrast',
+        checked: 'colors.interactive.icon.onPrimary.normal',
+        unchecked: 'colors.transparent',
       },
       border: {
-        checked: 'colors.brand.primary.500',
-        unchecked: 'colors.brand.gray.500.lowContrast',
+        checked: 'colors.interactive.border.primary.default',
+        unchecked: 'colors.interactive.border.gray.default',
       },
       background: {
-        checked: 'colors.brand.primary.500',
-        unchecked: 'transparent',
+        checked: 'colors.interactive.background.primary.default',
+        unchecked: 'colors.transparent',
       },
     },
     disabled: {
       dot: {
-        checked: 'colors.brand.gray.200.lowContrast',
-        unchecked: 'colors.brand.gray.200.lowContrast',
+        checked: 'colors.interactive.icon.onPrimary.normal',
+        unchecked: 'colors.interactive.icon.onPrimary.normal',
       },
       border: {
-        checked: 'transparent',
-        unchecked: 'colors.brand.gray.a100.lowContrast',
+        checked: 'colors.transparent',
+        unchecked: 'colors.interactive.border.gray.disabled',
       },
       background: {
-        checked: 'colors.brand.gray.a100.lowContrast',
-        unchecked: 'transparent',
+        checked: 'colors.interactive.background.primary.disabled',
+        unchecked: 'colors.transparent',
       },
     },
     negative: {
       dot: {
-        checked: 'colors.brand.gray.200.lowContrast',
-        unchecked: 'colors.brand.gray.200.lowContrast',
+        checked: 'colors.interactive.icon.onPrimary.normal',
+        unchecked: 'colors.transparent',
       },
       border: {
-        checked: 'colors.feedback.border.negative.highContrast',
-        unchecked: 'colors.feedback.border.negative.highContrast',
+        checked: 'colors.interactive.border.negative.default',
+        unchecked: 'colors.interactive.border.negative.default',
       },
       background: {
-        checked: 'colors.feedback.background.negative.highContrast',
-        unchecked: 'colors.feedback.background.negative.lowContrast',
+        checked: 'colors.interactive.background.negative.default',
+        unchecked: 'colors.transparent',
       },
     },
   },
@@ -104,12 +104,12 @@ const radioIconColors: RadioIconColors = {
 const radioHoverTokens: SelectorInputHoverTokens = {
   default: {
     background: {
-      checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.a50.lowContrast',
+      checked: 'colors.interactive.background.primary.highlighted',
+      unchecked: 'colors.interactive.background.gray.faded',
     },
     border: {
-      checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.500.lowContrast',
+      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color
+      unchecked: 'colors.interactive.border.gray.default',
     },
   },
 };
diff --git a/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx b/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx
index a2c82f780aa..ecebd076f75 100644
--- a/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx
+++ b/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx
@@ -17,10 +17,7 @@ import { useTheme } from '~components/BladeProvider';
 
 const AnimatedBox = Animated.createAnimatedComponent(BaseBox);
 
-const PulseAnimation = ({
-  contrast,
-  ...props
-}: { contrast: 'low' | 'high' } & SkeletonProps): React.ReactElement => {
+const PulseAnimation = (props: SkeletonProps): React.ReactElement => {
   const { theme } = useTheme();
   const durationPluseOff = theme.motion.duration.xmoderate;
   const durationPluseOn = theme.motion.duration['2xgentle'];
@@ -68,8 +65,8 @@ const PulseAnimation = ({
         progress.value,
         [1, 0],
         [
-          theme.colors.brand.gray.a50[`${contrast}Contrast`],
-          theme.colors.brand.gray.a100[`${contrast}Contrast`],
+          theme.colors.interactive.background.gray.highlighted,
+          theme.colors.interactive.background.gray.default,
         ],
       ),
     };
diff --git a/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx b/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx
index b48dcdaa93a..1352ed59b5d 100644
--- a/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx
+++ b/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx
@@ -4,21 +4,15 @@ import styled, { css, keyframes } from 'styled-components';
 import BaseBox from '~components/Box/BaseBox';
 import { castWebType, makeMotionTime } from '~utils';
 
-const pulseKeyframes = ({
-  theme,
-  contrast,
-}: {
-  theme: DefaultTheme;
-  contrast: 'low' | 'high';
-}): Keyframes => keyframes`
+const pulseKeyframes = ({ theme }: { theme: DefaultTheme }): Keyframes => keyframes`
   0% {
-    background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]};
+    background-color: ${theme.colors.interactive.background.gray.default};
   }
   25% {
-    background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]};
+    background-color: ${theme.colors.interactive.background.gray.default};
   }
   100% {
-    background-color: ${theme.colors.brand.gray.a50[`${contrast}Contrast`]};
+    background-color: ${theme.colors.interactive.background.gray.highlighted};
   }
 `;
 
@@ -31,7 +25,7 @@ const fadeInKeyframes = (): Keyframes => keyframes`
   }
 `;
 
-const PulseAnimation = styled(BaseBox)<{ contrast: 'low' | 'high' }>(({ theme, contrast }) => {
+const PulseAnimation = styled(BaseBox)(({ theme }) => {
   // We need to delay the animation in between keyframes
   // Since we also offset the animation to have 300ms delay in 25% keyframe
   // https://css-tricks.com/css-keyframe-animation-delay-iterations/
@@ -43,8 +37,8 @@ const PulseAnimation = styled(BaseBox)<{ contrast: 'low' | 'high' }>(({ theme, c
 
   return css`
     opacity: 0;
-    background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]};
-    animation-name: ${fadeInKeyframes()}, ${pulseKeyframes({ contrast, theme })};
+    background-color: ${theme.colors.interactive.background.gray.default};
+    animation-name: ${fadeInKeyframes()}, ${pulseKeyframes({ theme })};
     animation-duration: ${duration}, ${totalDuration};
     animation-delay: 0ms, ${duration};
     animation-timing-function: ${easing}, ${easing};
diff --git a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx
index c09701070e6..9b88e731d59 100644
--- a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx
+++ b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx
@@ -11,7 +11,7 @@ import {
   CardHeaderTrailing,
 } from '~components/Card';
 import { Box } from '~components/Box';
-import { Code, Heading, Text, Title } from '~components/Typography';
+import { Code, Heading, Text } from '~components/Typography';
 import { Amount } from '~components/Amount';
 import { Button } from '~components/Button';
 import { Alert } from '~components/Alert';
@@ -27,16 +27,11 @@ import { kebabCase } from '~utils/lodashButBetter/kebabCase';
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=16508%3A258522',
-        bankingTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=16508%3A258522',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=16508%3A258522"
       componentName="Skeleton"
       componentDescription="Skeleton Loader is a static / animated placeholder for the information that is still loading. It mimic the structure and look of the entire view."
     >
-      <Title>Usage</Title>
+      <Heading size="large">Usage</Heading>{' '}
       <Sandbox>
         {`
         import { Skeleton } from '@razorpay/blade/components';
@@ -146,7 +141,7 @@ const BasicSkeleton = (): React.ReactElement => {
       width="100%"
       padding="spacing.5"
       borderRadius="medium"
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
     >
       <Box display="flex" flexDirection="row" alignItems="center">
         <SkeletonComponent
@@ -208,7 +203,7 @@ const LoadableCard = ({ isLoading }: { isLoading: boolean }): React.ReactElement
           <Box
             display="flex"
             flexDirection="column"
-            backgroundColor="surface.background.level2.lowContrast"
+            backgroundColor="surface.background.gray.intense"
           >
             <Box display="flex" flexDirection="column" marginBottom="spacing.3">
               <Skeleton
@@ -237,18 +232,18 @@ const LoadableCard = ({ isLoading }: { isLoading: boolean }): React.ReactElement
             display="flex"
             flexDirection="column"
             gap="spacing.3"
-            backgroundColor="surface.background.level2.lowContrast"
+            backgroundColor="surface.background.gray.intense"
           >
             <Box display="flex" flexDirection="column" gap="spacing.3">
               <Heading size="medium">Total Repayable Amount</Heading>
-              <Amount size="title-medium" value={160000} />
+              <Amount size="large" value={160000} />
               <Text>
                 Principal:{' '}
-                <Text as="span" weight="bold">
+                <Text as="span" weight="semibold">
                   ₹16000
                 </Text>{' '}
                 Interest:{' '}
-                <Text as="span" weight="bold">
+                <Text as="span" weight="semibold">
                   ₹450
                 </Text>
               </Text>
@@ -331,7 +326,7 @@ const SkeletonCardTemplate: StoryFn<typeof SkeletonComponent> = () => {
             display="flex"
             gap="spacing.2"
             flexDirection="column"
-            backgroundColor="surface.background.level2.lowContrast"
+            backgroundColor="surface.background.gray.intense"
             elevation="lowRaised"
             borderRadius="medium"
           >
@@ -346,9 +341,7 @@ const SkeletonCardTemplate: StoryFn<typeof SkeletonComponent> = () => {
           <Card>
             <CardHeader>
               <CardHeaderLeading title="Payment Pages" subtitle="Automated Receipts Enabled" />
-              <CardHeaderTrailing
-                visual={<CardHeaderBadge variant="neutral">UPI</CardHeaderBadge>}
-              />
+              <CardHeaderTrailing visual={<CardHeaderBadge color="neutral">UPI</CardHeaderBadge>} />
             </CardHeader>
             <CardBody>
               <Text>
@@ -415,7 +408,7 @@ const SkeletonAccessibilityTemplate: StoryFn<typeof SkeletonComponent> = () => {
             display="flex"
             gap="spacing.2"
             flexDirection="column"
-            backgroundColor="surface.background.level2.lowContrast"
+            backgroundColor="surface.background.gray.intense"
             elevation="lowRaised"
             borderRadius="medium"
           >
@@ -430,9 +423,7 @@ const SkeletonAccessibilityTemplate: StoryFn<typeof SkeletonComponent> = () => {
           <Card>
             <CardHeader>
               <CardHeaderLeading title="Payment Pages" subtitle="Automated Receipts Enabled" />
-              <CardHeaderTrailing
-                visual={<CardHeaderBadge variant="neutral">UPI</CardHeaderBadge>}
-              />
+              <CardHeaderTrailing visual={<CardHeaderBadge color="neutral">UPI</CardHeaderBadge>} />
             </CardHeader>
             <CardBody>
               <Text>
diff --git a/packages/blade/src/components/Skeleton/Skeleton.tsx b/packages/blade/src/components/Skeleton/Skeleton.tsx
index e5c5f7b482f..bc66ed9330d 100644
--- a/packages/blade/src/components/Skeleton/Skeleton.tsx
+++ b/packages/blade/src/components/Skeleton/Skeleton.tsx
@@ -6,7 +6,6 @@ import { makeAccessible } from '~utils/makeAccessible';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 
 const Skeleton = ({
-  contrast = 'low',
   width,
   maxWidth,
   minWidth,
@@ -54,7 +53,6 @@ const Skeleton = ({
       placeSelf={placeSelf}
       placeItems={placeItems}
       order={order}
-      contrast={contrast}
       {...getStyledProps(props)}
       {...makeAccessible({ hidden: true })}
       {...metaAttribute({ name: MetaConstants.Skeleton, testID })}
diff --git a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap
index 175b9e7f04f..3f22e847c34 100644
--- a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Skeleton /> should render 1`] = `"<div id="root"><div aria-hidden="true" data-blade-component="skeleton" class="BaseBox-bmPWx PulseAnimationweb__PulseAnimation-sc-184soy3-0 kTtuUt fBLkgZ"></div></div>"`;
+exports[`<Skeleton /> should render 1`] = `"<div id="root"><div aria-hidden="true" data-blade-component="skeleton" class="BaseBox-bmPWx PulseAnimationweb__PulseAnimation-sc-184soy3-0 kTtuUt dpEKoA"></div></div>"`;
 
 exports[`<Skeleton /> should render 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -11,9 +11,9 @@ exports[`<Skeleton /> should render 2`] = `
 
 .c1.c1.c1.c1.c1 {
   opacity: 0;
-  background-color: hsla(216,15%,54%,0.18);
-  -webkit-animation-name: lbWRkT-450290765,fZZrNN-450290765;
-  animation-name: lbWRkT-450290765,fZZrNN-450290765;
+  background-color: hsla(211,20%,52%,0.09);
+  -webkit-animation-name: lbWRkT-450290765,iRXnvq-450290765;
+  animation-name: lbWRkT-450290765,iRXnvq-450290765;
   -webkit-animation-duration: 900ms,1200ms;
   animation-duration: 900ms,1200ms;
   -webkit-animation-delay: 0ms,900ms;
diff --git a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap
index 76802b22ffd..396cac9f835 100644
--- a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap
+++ b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap
@@ -8,9 +8,9 @@ exports[`<Skeleton /> should render skeleton 1`] = `
 
 .c1.c1.c1.c1.c1 {
   opacity: 0;
-  background-color: hsla(216,15%,54%,0.18);
-  -webkit-animation-name: lbWRkT-450290765,fZZrNN-450290765;
-  animation-name: lbWRkT-450290765,fZZrNN-450290765;
+  background-color: hsla(211,20%,52%,0.09);
+  -webkit-animation-name: lbWRkT-450290765,iRXnvq-450290765;
+  animation-name: lbWRkT-450290765,iRXnvq-450290765;
   -webkit-animation-duration: 900ms,1200ms;
   animation-duration: 900ms,1200ms;
   -webkit-animation-delay: 0ms,900ms;
@@ -50,9 +50,9 @@ exports[`<Skeleton /> should support margin and other layout props 1`] = `
 
 .c2.c2.c2.c2.c2 {
   opacity: 0;
-  background-color: hsla(216,15%,54%,0.18);
-  -webkit-animation-name: lbWRkT-450290765,fZZrNN-450290765;
-  animation-name: lbWRkT-450290765,fZZrNN-450290765;
+  background-color: hsla(211,20%,52%,0.09);
+  -webkit-animation-name: lbWRkT-450290765,iRXnvq-450290765;
+  animation-name: lbWRkT-450290765,iRXnvq-450290765;
   -webkit-animation-duration: 900ms,1200ms;
   animation-duration: 900ms,1200ms;
   -webkit-animation-delay: 0ms,900ms;
diff --git a/packages/blade/src/components/Skeleton/types.ts b/packages/blade/src/components/Skeleton/types.ts
index 08383defb7b..be14d384492 100644
--- a/packages/blade/src/components/Skeleton/types.ts
+++ b/packages/blade/src/components/Skeleton/types.ts
@@ -8,7 +8,6 @@ type SkeletonProps = StyledPropsBlade &
     'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'borderRadius'
   > &
   Partial<FlexboxProps> & {
-    contrast?: 'low' | 'high';
     testID?: string;
   };
 
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx b/packages/blade/src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx
index 806749c4733..96dcb843d5c 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx
+++ b/packages/blade/src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx
@@ -4,32 +4,19 @@ import { Link } from '@storybook/design-system';
 import type { ReactElement } from 'react';
 import type { BaseSpinnerProps } from './BaseSpinner';
 import { BaseSpinner as BaseSpinnerComponent } from './BaseSpinner';
-import useMakeFigmaURL from '~utils/storybook/useMakeFigmaURL';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 
 const Page = (): ReactElement => {
-  const figmaURL = useMakeFigmaURL([
-    {
-      themeTokenName: 'paymentTheme',
-      lightModeURL:
-        'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=14825%3A203592',
-      darkModeURL:
-        'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=14825%3A203592',
-    },
-    {
-      themeTokenName: 'bankingTheme',
-      lightModeURL:
-        'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=11506%3A284715',
-      darkModeURL:
-        'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=11506%3A284715',
-    },
-  ]);
-
   return (
     <>
       <Title />
       <Subtitle>This is the BaseSpinner Internal component.</Subtitle>
-      <Link withArrow={true} href={figmaURL} target="_blank" rel="noreferrer noopener">
+      <Link
+        withArrow={true}
+        href="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=14825%3A203592"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
         View in Figma
       </Link>
       <br />
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/BaseSpinner.tsx b/packages/blade/src/components/Spinner/BaseSpinner/BaseSpinner.tsx
index 673b4de4635..2cfeaf93837 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/BaseSpinner.tsx
+++ b/packages/blade/src/components/Spinner/BaseSpinner/BaseSpinner.tsx
@@ -8,7 +8,7 @@ import { useTheme } from '~components/BladeProvider';
 import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
-import type { ColorContrastTypes, Feedback } from '~tokens/theme/theme';
+import type { FeedbackColors } from '~tokens/theme/theme';
 import BaseBox from '~components/Box/BaseBox';
 import { Text } from '~components/Typography';
 import type { TestID } from '~utils/types';
@@ -21,7 +21,7 @@ type BaseSpinnerProps = {
    *
    * @default 'default'
    */
-  color?: 'default' | 'white' | Feedback;
+  color?: 'primary' | 'white' | FeedbackColors;
   /**
    * Sets the label of the spinner.
    *
@@ -33,13 +33,6 @@ type BaseSpinnerProps = {
    *
    */
   labelPosition?: 'right' | 'bottom';
-  /**
-   * This is deprecated in favor of the `color` prop.
-   *
-   * @deprecated Use `color="white"` for high contrast and `color="default"` for low contrast
-   * @default 'low'
-   */
-  contrast?: ColorContrastTypes;
   /**
    * Sets the size of the spinner.
    *
@@ -54,30 +47,21 @@ type BaseSpinnerProps = {
 } & TestID &
   StyledPropsBlade;
 
-const getColor = ({
-  contrast,
-  color,
-  theme,
-}: {
-  contrast: NonNullable<BaseSpinnerProps['contrast']>;
-  color: BaseSpinnerProps['color'];
-  theme: Theme;
-}): string => {
-  if (contrast === 'high' || (color && color === 'white')) {
-    return getIn(theme.colors, 'static.white');
+const getColor = ({ color, theme }: { color: BaseSpinnerProps['color']; theme: Theme }): string => {
+  if (color && color === 'white') {
+    return getIn(theme.colors, 'surface.background.gray.intense');
   }
-  if (color && color !== 'default') {
-    return getIn(theme.colors, `feedback.${color}.action.icon.primary.disabled.lowContrast`);
+  if (color && color !== 'primary') {
+    return getIn(theme.colors, `feedback.background.${color}.intense`);
   }
-  return getIn(theme.colors, 'brand.gray.700.lowContrast');
+  return getIn(theme.colors, 'surface.background.primary.intense');
 };
 
 const BaseSpinner = ({
   label,
   labelPosition = 'right',
   accessibilityLabel,
-  contrast = 'low',
-  color = 'default',
+  color = 'neutral',
   size = 'medium',
   testID,
   ...styledProps
@@ -98,17 +82,14 @@ const BaseSpinner = ({
         })}
       >
         <SpinningBox>
-          <SpinnerIcon
-            dimensions={makeSize(dimensions[size])}
-            color={getColor({ contrast, color, theme })}
-          />
+          <SpinnerIcon dimensions={makeSize(dimensions[size])} color={getColor({ color, theme })} />
         </SpinningBox>
         {label && label.trim().length > 0 ? (
           <BaseBox
             marginLeft={labelPosition === 'right' ? 'spacing.3' : 'spacing.0'}
             marginTop={labelPosition === 'bottom' ? 'spacing.3' : 'spacing.0'}
           >
-            <Text variant="body" weight="regular" type="subdued" size="small" contrast={contrast}>
+            <Text variant="body" weight="regular" size="small" color="surface.text.gray.muted">
               {label}
             </Text>
           </BaseBox>
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/SpinningBox.d.ts b/packages/blade/src/components/Spinner/BaseSpinner/SpinningBox.d.ts
deleted file mode 100644
index 092cff2d190..00000000000
--- a/packages/blade/src/components/Spinner/BaseSpinner/SpinningBox.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SpinningBox.web';
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.native.test.tsx b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.native.test.tsx
index dcd76e27c4a..c456aabeca7 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.native.test.tsx
+++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.native.test.tsx
@@ -3,7 +3,7 @@ import { BaseSpinner } from '../BaseSpinner';
 import renderWithTheme from '~utils/testing/renderWithTheme.native';
 
 const colors: BaseSpinnerProps['color'][] = [
-  'default',
+  'primary',
   'white',
   'positive',
   'negative',
@@ -33,38 +33,16 @@ describe('<BaseSpinner />', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render low contrast BaseSpinner', () => {
-    const { toJSON } = renderWithTheme(<BaseSpinner accessibilityLabel="Loading" contrast="low" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render high contrast BaseSpinner', () => {
-    const { toJSON } = renderWithTheme(
-      <BaseSpinner accessibilityLabel="Loading" contrast="high" />,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
   it('should render low contrast BaseSpinner with right label', () => {
     const { toJSON } = renderWithTheme(
-      <BaseSpinner
-        accessibilityLabel="Loading"
-        contrast="low"
-        label="Loading"
-        labelPosition="right"
-      />,
+      <BaseSpinner accessibilityLabel="Loading" label="Loading" labelPosition="right" />,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('should render high contrast BaseSpinner with bottom label', () => {
     const { toJSON } = renderWithTheme(
-      <BaseSpinner
-        accessibilityLabel="Loading"
-        contrast="high"
-        label="Loading"
-        labelPosition="bottom"
-      />,
+      <BaseSpinner accessibilityLabel="Loading" label="Loading" labelPosition="bottom" />,
     );
     expect(toJSON()).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.ssr.test.tsx b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.ssr.test.tsx
index ab9cde6dbb5..9ac2bf1fabc 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.ssr.test.tsx
+++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.ssr.test.tsx
@@ -4,12 +4,7 @@ import renderWithSSR from '~utils/testing/renderWithSSR.web';
 describe('<BaseSpinner />', () => {
   it('should render low contrast BaseSpinner with right label', () => {
     const { container, getByText } = renderWithSSR(
-      <BaseSpinner
-        accessibilityLabel="Loading"
-        contrast="low"
-        label="Loading"
-        labelPosition="right"
-      />,
+      <BaseSpinner accessibilityLabel="Loading" label="Loading" labelPosition="right" />,
     );
     expect(getByText('Loading')).toBeInTheDocument();
     expect(container).toMatchSnapshot();
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.web.test.tsx b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.web.test.tsx
index 8793361b7f6..f6c66a1662a 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.web.test.tsx
+++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/BaseSpinner.web.test.tsx
@@ -4,7 +4,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 import assertAccessible from '~utils/testing/assertAccessible.web';
 
 const colors: BaseSpinnerProps['color'][] = [
-  'default',
+  'primary',
   'white',
   'positive',
   'negative',
@@ -40,40 +40,16 @@ describe('<BaseSpinner />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should render low contrast BaseSpinner', () => {
-    const { container } = renderWithTheme(
-      <BaseSpinner accessibilityLabel="Loading" contrast="low" />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render high contrast BaseSpinner', () => {
-    const { container } = renderWithTheme(
-      <BaseSpinner accessibilityLabel="Loading" contrast="high" />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
   it('should render low contrast BaseSpinner with right label', () => {
     const { container } = renderWithTheme(
-      <BaseSpinner
-        accessibilityLabel="Loading"
-        contrast="low"
-        label="Loading"
-        labelPosition="right"
-      />,
+      <BaseSpinner accessibilityLabel="Loading" label="Loading" labelPosition="right" />,
     );
     expect(container).toMatchSnapshot();
   });
 
   it('should render high contrast BaseSpinner with bottom label', () => {
     const { container } = renderWithTheme(
-      <BaseSpinner
-        accessibilityLabel="Loading"
-        contrast="high"
-        label="Loading"
-        labelPosition="bottom"
-      />,
+      <BaseSpinner accessibilityLabel="Loading" label="Loading" labelPosition="bottom" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap
index 5a93d1b086a..e35bb753d96 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -110,7 +110,7 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -119,277 +119,7 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
-                propList={
-                  [
-                    "fill",
-                  ]
-                }
-              />
-            </RNSVGGroup>
-          </RNSVGSvgView>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<BaseSpinner /> should render default color BaseSpinner 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="spinner"
-    style={
-      [
-        {},
-      ]
-    }
-  >
-    <View
-      accessibilityLabel="Loading"
-      accessibilityRole="progressbar"
-      accessible={true}
-      alignItems="center"
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="row"
-      style={
-        [
-          {
-            "alignItems": "center",
-            "display": "flex",
-            "flexDirection": "row",
-          },
-        ]
-      }
-    >
-      <View
-        alignSelf="center"
-        data-blade-component="base-box"
-        style={
-          [
-            {
-              "alignSelf": "center",
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            {
-              "transform": [
-                {
-                  "rotateZ": "0deg",
-                },
-              ],
-            }
-          }
-        >
-          <RNSVGSvgView
-            accessibilityElementsHidden={true}
-            align="xMidYMid"
-            bbHeight="16px"
-            bbWidth="16px"
-            data-blade-component="icon"
-            fill="none"
-            focusable={false}
-            height="16px"
-            importantForAccessibility="no-hide-descendants"
-            meetOrSlice={0}
-            minX={0}
-            minY={0}
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "borderWidth": 0,
-                },
-                [
-                  {},
-                ],
-                {
-                  "flex": 0,
-                  "height": 16,
-                  "width": 16,
-                },
-              ]
-            }
-            vbHeight={24}
-            vbWidth={24}
-            width="16px"
-          >
-            <RNSVGGroup
-              fill={null}
-              propList={
-                [
-                  "fill",
-                ]
-              }
-            >
-              <RNSVGPath
-                d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
-                fillOpacity={0.2}
-                propList={
-                  [
-                    "fill",
-                    "fillOpacity",
-                  ]
-                }
-              />
-              <RNSVGPath
-                d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
-                propList={
-                  [
-                    "fill",
-                  ]
-                }
-              />
-              <RNSVGPath
-                d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
-                propList={
-                  [
-                    "fill",
-                  ]
-                }
-              />
-            </RNSVGGroup>
-          </RNSVGSvgView>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    data-blade-component="spinner"
-    style={
-      [
-        {},
-      ]
-    }
-  >
-    <View
-      accessibilityLabel="Loading"
-      accessibilityRole="progressbar"
-      accessible={true}
-      alignItems="center"
-      data-blade-component="base-box"
-      display="flex"
-      flexDirection="row"
-      style={
-        [
-          {
-            "alignItems": "center",
-            "display": "flex",
-            "flexDirection": "row",
-          },
-        ]
-      }
-    >
-      <View
-        alignSelf="center"
-        data-blade-component="base-box"
-        style={
-          [
-            {
-              "alignSelf": "center",
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            {
-              "transform": [
-                {
-                  "rotateZ": "0deg",
-                },
-              ],
-            }
-          }
-        >
-          <RNSVGSvgView
-            accessibilityElementsHidden={true}
-            align="xMidYMid"
-            bbHeight="16px"
-            bbWidth="16px"
-            data-blade-component="icon"
-            fill="none"
-            focusable={false}
-            height="16px"
-            importantForAccessibility="no-hide-descendants"
-            meetOrSlice={0}
-            minX={0}
-            minY={0}
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "borderWidth": 0,
-                },
-                [
-                  {},
-                ],
-                {
-                  "flex": 0,
-                  "height": 16,
-                  "width": 16,
-                },
-              ]
-            }
-            vbHeight={24}
-            vbWidth={24}
-            width="16px"
-          >
-            <RNSVGGroup
-              fill={null}
-              propList={
-                [
-                  "fill",
-                ]
-              }
-            >
-              <RNSVGPath
-                d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4294967295}
-                fillOpacity={0.2}
-                propList={
-                  [
-                    "fill",
-                    "fillOpacity",
-                  ]
-                }
-              />
-              <RNSVGPath
-                d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4294967295}
-                propList={
-                  [
-                    "fill",
-                  ]
-                }
-              />
-              <RNSVGPath
-                d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4294967295}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -504,7 +234,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4294967295}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -515,7 +245,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4294967295}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -524,7 +254,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4294967295}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -548,22 +278,23 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
       >
         <Text
           accessible={true}
-          color="surface.text.subdued.highContrast"
+          color="surface.text.gray.muted"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
           fontWeight="regular"
-          lineHeight={50}
+          lineHeight={75}
           style={
             [
               {
-                "color": "hsla(216, 19%, 89%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 22%, 56%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
                 "fontWeight": "400",
-                "lineHeight": 16,
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -684,7 +415,7 @@ exports[`<BaseSpinner /> should render information color BaseSpinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={1375767731}
+                fill={4279406798}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -695,7 +426,7 @@ exports[`<BaseSpinner /> should render information color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={1375767731}
+                fill={4279406798}
                 propList={
                   [
                     "fill",
@@ -704,7 +435,7 @@ exports[`<BaseSpinner /> should render information color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={1375767731}
+                fill={4279406798}
                 propList={
                   [
                     "fill",
@@ -819,7 +550,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -830,7 +561,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -839,7 +570,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -855,7 +586,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
 </View>
 `;
 
-exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `
 <View
   style={
     {
@@ -954,7 +685,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -965,7 +696,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -974,7 +705,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -985,12 +716,58 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
           </RNSVGSvgView>
         </View>
       </View>
+      <View
+        data-blade-component="base-box"
+        style={
+          [
+            {
+              "marginLeft": 8,
+              "marginTop": 0,
+            },
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          color="surface.text.gray.muted"
+          data-blade-component="text"
+          fontFamily="text"
+          fontSize={75}
+          fontStyle="normal"
+          fontWeight="regular"
+          lineHeight={75}
+          style={
+            [
+              {
+                "color": "hsla(211, 22%, 56%, 1)",
+                "fontFamily": "Inter",
+                "fontSize": 12,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "letterSpacing": 0,
+                "lineHeight": 18,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
+                "paddingBottom": 0,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 0,
+                "textDecorationLine": "none",
+              },
+            ]
+          }
+        >
+          Loading
+        </Text>
+      </View>
     </View>
   </View>
 </View>
 `;
 
-exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `
+exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
 <View
   style={
     {
@@ -1089,7 +866,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -1100,7 +877,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -1109,7 +886,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -1120,57 +897,12 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
           </RNSVGSvgView>
         </View>
       </View>
-      <View
-        data-blade-component="base-box"
-        style={
-          [
-            {
-              "marginLeft": 8,
-              "marginTop": 0,
-            },
-          ]
-        }
-      >
-        <Text
-          accessible={true}
-          color="surface.text.subdued.lowContrast"
-          data-blade-component="text"
-          fontFamily="text"
-          fontSize={75}
-          fontStyle="normal"
-          fontWeight="regular"
-          lineHeight={50}
-          style={
-            [
-              {
-                "color": "hsla(217, 18%, 45%, 1)",
-                "fontFamily": "Lato",
-                "fontSize": 12,
-                "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 16,
-                "marginBottom": 0,
-                "marginLeft": 0,
-                "marginRight": 0,
-                "marginTop": 0,
-                "paddingBottom": 0,
-                "paddingLeft": 0,
-                "paddingRight": 0,
-                "paddingTop": 0,
-                "textDecorationLine": "none",
-              },
-            ]
-          }
-        >
-          Loading
-        </Text>
-      </View>
     </View>
   </View>
 </View>
 `;
 
-exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
 <View
   style={
     {
@@ -1269,7 +1001,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4292422944}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -1280,7 +1012,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4292422944}
                 propList={
                   [
                     "fill",
@@ -1289,7 +1021,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4292422944}
                 propList={
                   [
                     "fill",
@@ -1305,7 +1037,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
 </View>
 `;
 
-exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
 <View
   style={
     {
@@ -1404,7 +1136,7 @@ exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={1391806249}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -1415,7 +1147,7 @@ exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={1391806249}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -1424,7 +1156,7 @@ exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={1391806249}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -1440,7 +1172,7 @@ exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
 </View>
 `;
 
-exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
 <View
   style={
     {
@@ -1539,7 +1271,7 @@ exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={1383630491}
+                fill={4293486604}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -1550,7 +1282,7 @@ exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={1383630491}
+                fill={4293486604}
                 propList={
                   [
                     "fill",
@@ -1559,7 +1291,7 @@ exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={1383630491}
+                fill={4293486604}
                 propList={
                   [
                     "fill",
@@ -1575,7 +1307,7 @@ exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
 </View>
 `;
 
-exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render positive color BaseSpinner 1`] = `
 <View
   style={
     {
@@ -1674,7 +1406,7 @@ exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={1390446336}
+                fill={4278231890}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -1685,7 +1417,7 @@ exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={1390446336}
+                fill={4278231890}
                 propList={
                   [
                     "fill",
@@ -1694,7 +1426,7 @@ exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={1390446336}
+                fill={4278231890}
                 propList={
                   [
                     "fill",
@@ -1710,7 +1442,7 @@ exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
 </View>
 `;
 
-exports[`<BaseSpinner /> should render positive color BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render primary color BaseSpinner 1`] = `
 <View
   style={
     {
@@ -1809,7 +1541,7 @@ exports[`<BaseSpinner /> should render positive color BaseSpinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={1375772252}
+                fill={4281228287}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -1820,7 +1552,7 @@ exports[`<BaseSpinner /> should render positive color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={1375772252}
+                fill={4281228287}
                 propList={
                   [
                     "fill",
@@ -1829,7 +1561,7 @@ exports[`<BaseSpinner /> should render positive color BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={1375772252}
+                fill={4281228287}
                 propList={
                   [
                     "fill",
@@ -2079,7 +1811,7 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -2090,7 +1822,7 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -2099,7 +1831,7 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.ssr.test.tsx.snap b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.ssr.test.tsx.snap
index 083d5060dae..b1b11ff9026 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `"<div id="root"><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  jQoaqB"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(217, 18%, 45%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(217, 18%, 45%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(217, 18%, 45%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx kgcqKG"><p class="StyledBaseText-dVBfTO krDqnr" data-blade-component="text">Loading</p></div></div></div></div>"`;
+exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `"<div id="root"><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  jQoaqB"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(211, 29%, 26%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(211, 29%, 26%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(211, 29%, 26%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx kgcqKG"><p class="StyledBaseText-dVBfTO bcGqUR" data-blade-component="text">Loading</p></div></div></div></div>"`;
 
 exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -36,14 +36,18 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -77,18 +81,18 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.web.test.tsx.snap b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.web.test.tsx.snap
index d6d3ce49be2..a96f98103b5 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.web.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.web.test.tsx.snap
@@ -55,168 +55,18 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
-          />
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<BaseSpinner /> should render default color BaseSpinner 1`] = `
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1.c1.c1.c1.c1 {
-  padding: 1px;
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
-  animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
-}
-
-<div>
-  <div
-    class=""
-    data-blade-component="spinner"
-  >
-    <div
-      aria-label="Loading"
-      class="c0"
-      data-blade-component="base-box"
-      role="progressbar"
-    >
-      <div
-        class=" c1"
-        data-blade-component="base-box"
-      >
-        <svg
-          aria-hidden="true"
-          class="Svgweb__StyledSvg-vcmjs8-0"
-          data-blade-component="icon"
-          fill="none"
-          height="16px"
-          viewBox="0 0 24 24"
-          width="16px"
-        >
-          <path
-            d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-            data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
-            fill-opacity="0.2"
-          />
-          <path
-            d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-            data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
-          />
-          <path
-            d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-            data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
-          />
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
-.c0.c0.c0.c0.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1.c1.c1.c1.c1 {
-  padding: 1px;
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
-  animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
-}
-
-<div>
-  <div
-    class=""
-    data-blade-component="spinner"
-  >
-    <div
-      aria-label="Loading"
-      class="c0"
-      data-blade-component="base-box"
-      role="progressbar"
-    >
-      <div
-        class=" c1"
-        data-blade-component="base-box"
-      >
-        <svg
-          aria-hidden="true"
-          class="Svgweb__StyledSvg-vcmjs8-0"
-          data-blade-component="icon"
-          fill="none"
-          height="16px"
-          viewBox="0 0 24 24"
-          width="16px"
-        >
-          <path
-            d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-            data-blade-component="svg-path"
-            fill="hsla(0, 0%, 100%, 1)"
-            fill-opacity="0.2"
-          />
-          <path
-            d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-            data-blade-component="svg-path"
-            fill="hsla(0, 0%, 100%, 1)"
-          />
-          <path
-            d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-            data-blade-component="svg-path"
-            fill="hsla(0, 0%, 100%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
@@ -259,14 +109,18 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,19%,89%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -298,18 +152,18 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(0, 0%, 100%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(0, 0%, 100%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(0, 0%, 100%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
@@ -384,18 +238,18 @@ exports[`<BaseSpinner /> should render information color BaseSpinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(193, 100%, 35%, 0.32)"
+            fill="hsla(200, 84%, 44%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(193, 100%, 35%, 0.32)"
+            fill="hsla(200, 84%, 44%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(193, 100%, 35%, 0.32)"
+            fill="hsla(200, 84%, 44%, 1)"
           />
         </svg>
       </div>
@@ -459,18 +313,18 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
@@ -479,7 +333,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
 </div>
 `;
 
-exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -494,6 +348,11 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
   align-items: center;
 }
 
+.c2.c2.c2.c2.c2 {
+  margin-top: 0px;
+  margin-left: 8px;
+}
+
 .c1.c1.c1.c1.c1 {
   padding: 1px;
   width: -webkit-max-content;
@@ -507,6 +366,23 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
   animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
 }
 
+.c3.c3.c3.c3.c3 {
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
 <div>
   <div
     class=""
@@ -534,27 +410,38 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
+      <div
+        class="c2"
+        data-blade-component="base-box"
+      >
+        <p
+          class="c3"
+          data-blade-component="text"
+        >
+          Loading
+        </p>
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `
+exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -569,11 +456,6 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
   align-items: center;
 }
 
-.c2.c2.c2.c2.c2 {
-  margin-top: 0px;
-  margin-left: 8px;
-}
-
 .c1.c1.c1.c1.c1 {
   padding: 1px;
   width: -webkit-max-content;
@@ -587,19 +469,6 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
   animation: eoUyJr-450290765 900ms cubic-bezier(0.5,0,0.3,1.5) infinite;
 }
 
-.c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-}
-
 <div>
   <div
     class=""
@@ -627,38 +496,27 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
-      <div
-        class="c2"
-        data-blade-component="base-box"
-      >
-        <p
-          class="c3"
-          data-blade-component="text"
-        >
-          Loading
-        </p>
-      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -713,18 +571,18 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(4, 74%, 49%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(4, 74%, 49%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(4, 74%, 49%, 1)"
           />
         </svg>
       </div>
@@ -733,7 +591,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
 </div>
 `;
 
-exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -788,18 +646,18 @@ exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(9, 91%, 56%, 0.32)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(9, 91%, 56%, 0.32)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(9, 91%, 56%, 0.32)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
@@ -808,7 +666,7 @@ exports[`<BaseSpinner /> should render negative color BaseSpinner 1`] = `
 </div>
 `;
 
-exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -863,18 +721,18 @@ exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(216, 15%, 54%, 0.32)"
+            fill="hsla(25, 90%, 48%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(216, 15%, 54%, 0.32)"
+            fill="hsla(25, 90%, 48%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(216, 15%, 54%, 0.32)"
+            fill="hsla(25, 90%, 48%, 1)"
           />
         </svg>
       </div>
@@ -883,7 +741,7 @@ exports[`<BaseSpinner /> should render neutral color BaseSpinner 1`] = `
 </div>
 `;
 
-exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render positive color BaseSpinner 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -938,18 +796,18 @@ exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(36, 100%, 44%, 0.32)"
+            fill="hsla(150, 100%, 32%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(36, 100%, 44%, 0.32)"
+            fill="hsla(150, 100%, 32%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(36, 100%, 44%, 0.32)"
+            fill="hsla(150, 100%, 32%, 1)"
           />
         </svg>
       </div>
@@ -958,7 +816,7 @@ exports[`<BaseSpinner /> should render notice color BaseSpinner 1`] = `
 </div>
 `;
 
-exports[`<BaseSpinner /> should render positive color BaseSpinner 1`] = `
+exports[`<BaseSpinner /> should render primary color BaseSpinner 1`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1013,18 +871,18 @@ exports[`<BaseSpinner /> should render positive color BaseSpinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(155, 100%, 31%, 0.32)"
+            fill="hsla(227, 100%, 59%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(155, 100%, 31%, 0.32)"
+            fill="hsla(227, 100%, 59%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(155, 100%, 31%, 0.32)"
+            fill="hsla(227, 100%, 59%, 1)"
           />
         </svg>
       </div>
@@ -1163,18 +1021,18 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
diff --git a/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx b/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx
index 0647f5e6cd6..37adce137af 100644
--- a/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx
+++ b/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx
@@ -15,12 +15,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentDescription="A spinner is an element with a looping animation that indicates loading is in process."
       componentName="Spinner"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=14825%3A203592',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=11506%3A284715',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=14825%3A203592"
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -104,11 +99,11 @@ const SpinnerColorTemplate: StoryFn<typeof SpinnerComponent> = ({ ...args }) =>
         paddingTop="spacing.3"
         paddingBottom="spacing.3"
         paddingLeft="spacing.3"
-        backgroundColor={theme.colors.surface.background.level2.lowContrast}
+        backgroundColor={theme.colors.surface.background.gray.subtle}
       >
-        <Text>Default Color</Text>
+        <Text>Primary Color</Text>
         <BaseBox marginBottom="spacing.2" />
-        <SpinnerComponent {...args} color="default" />
+        <SpinnerComponent {...args} color="primary" />
       </BaseBox>
       <BaseBox
         marginBottom="spacing.3"
@@ -116,7 +111,7 @@ const SpinnerColorTemplate: StoryFn<typeof SpinnerComponent> = ({ ...args }) =>
         paddingTop="spacing.3"
         paddingBottom="spacing.3"
         paddingLeft="spacing.3"
-        backgroundColor={theme.colors.surface.background.level1.highContrast}
+        backgroundColor={theme.colors.surface.background.gray.subtle}
       >
         <Text contrast="high">White Color</Text>
         <BaseBox marginBottom="spacing.2" />
diff --git a/packages/blade/src/components/Spinner/Spinner/Spinner.tsx b/packages/blade/src/components/Spinner/Spinner/Spinner.tsx
index d7d6479671a..b7a0186117a 100644
--- a/packages/blade/src/components/Spinner/Spinner/Spinner.tsx
+++ b/packages/blade/src/components/Spinner/Spinner/Spinner.tsx
@@ -1,22 +1,20 @@
 import { BaseSpinner } from '../BaseSpinner';
 import type { BaseSpinnerProps } from '../BaseSpinner';
 
-type SpinnerProps = Omit<BaseSpinnerProps, 'intent'> & {
+type SpinnerProps = BaseSpinnerProps & {
   /**
    * Sets the color of the spinner.
    *
    * @default 'default'
    */
-  color?: 'default' | 'white';
+  color?: 'primary' | 'neutral' | 'white';
 };
 
 const Spinner = ({
   label,
   labelPosition,
   accessibilityLabel,
-  color = 'default',
-  // TODO: Remove contrast prop in favor of color in the next major release
-  contrast = 'low',
+  color = 'neutral',
   size = 'medium',
   testID,
   ...styledProps
@@ -26,7 +24,6 @@ const Spinner = ({
       label={label}
       labelPosition={labelPosition}
       accessibilityLabel={accessibilityLabel ?? label ?? 'Loading'}
-      contrast={contrast}
       color={color}
       size={size}
       testID={testID}
diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.native.test.tsx b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.native.test.tsx
index ce6a21e96ea..45ecb6a6762 100644
--- a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.native.test.tsx
+++ b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.native.test.tsx
@@ -23,7 +23,7 @@ describe('<Spinner />', () => {
   });
 
   it('should render default color Spinner', () => {
-    const { toJSON } = renderWithTheme(<Spinner accessibilityLabel="Loading" color="default" />);
+    const { toJSON } = renderWithTheme(<Spinner accessibilityLabel="Loading" color="primary" />);
     expect(toJSON()).toMatchSnapshot();
   });
 
diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.ssr.test.tsx b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.ssr.test.tsx
index a73392614b8..b7a40033a69 100644
--- a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.ssr.test.tsx
+++ b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.ssr.test.tsx
@@ -2,9 +2,9 @@ import { Spinner } from '../Spinner';
 import renderWithSSR from '~utils/testing/renderWithSSR.web';
 
 describe('<Spinner />', () => {
-  it('should render default color Spinner', () => {
+  it('should render primary color Spinner', () => {
     const { container, getByText } = renderWithSSR(
-      <Spinner accessibilityLabel="Loading" color="default" label="Loading" />,
+      <Spinner accessibilityLabel="Loading" color="primary" label="Loading" />,
     );
     expect(getByText('Loading')).toBeInTheDocument();
     expect(container).toMatchSnapshot();
diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.web.test.tsx b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.web.test.tsx
index 1bacf0bb8b5..664448063b7 100644
--- a/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.web.test.tsx
+++ b/packages/blade/src/components/Spinner/Spinner/__tests__/Spinner.web.test.tsx
@@ -23,7 +23,7 @@ describe('<Spinner />', () => {
   });
 
   it('should render default color Spinner', () => {
-    const { container } = renderWithTheme(<Spinner accessibilityLabel="Loading" color="default" />);
+    const { container } = renderWithTheme(<Spinner accessibilityLabel="Loading" color="primary" />);
     expect(container).toMatchSnapshot();
   });
 
diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap
index b4f66506784..cfe1374eeb5 100644
--- a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -110,7 +110,7 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -119,7 +119,7 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -234,7 +234,7 @@ exports[`<Spinner /> should render default color Spinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281228287}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -245,7 +245,7 @@ exports[`<Spinner /> should render default color Spinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281228287}
                 propList={
                   [
                     "fill",
@@ -254,7 +254,7 @@ exports[`<Spinner /> should render default color Spinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4281228287}
                 propList={
                   [
                     "fill",
@@ -369,7 +369,7 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -380,7 +380,7 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -389,7 +389,7 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -504,7 +504,7 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -515,7 +515,7 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -524,7 +524,7 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -774,7 +774,7 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
             >
               <RNSVGPath
                 d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
-                fill={4284378759}
+                fill={4281287254}
                 fillOpacity={0.2}
                 propList={
                   [
@@ -785,7 +785,7 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
               />
               <RNSVGPath
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
@@ -794,7 +794,7 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
               />
               <RNSVGPath
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
-                fill={4284378759}
+                fill={4281287254}
                 propList={
                   [
                     "fill",
diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.ssr.test.tsx.snap b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.ssr.test.tsx.snap
index 56a22afd3d4..d90a11788f3 100644
--- a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.ssr.test.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Spinner /> should render default color Spinner 1`] = `"<div id="root"><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  jQoaqB"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(217, 18%, 45%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(217, 18%, 45%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(217, 18%, 45%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx kgcqKG"><p class="StyledBaseText-dVBfTO krDqnr" data-blade-component="text">Loading</p></div></div></div></div>"`;
+exports[`<Spinner /> should render primary color Spinner 1`] = `"<div id="root"><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  jQoaqB"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(227, 100%, 59%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(227, 100%, 59%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(227, 100%, 59%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx kgcqKG"><p class="StyledBaseText-dVBfTO bcGqUR" data-blade-component="text">Loading</p></div></div></div></div>"`;
 
-exports[`<Spinner /> should render default color Spinner 2`] = `
+exports[`<Spinner /> should render primary color Spinner 2`] = `
 .c0.c0.c0.c0.c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -36,14 +36,18 @@ exports[`<Spinner /> should render default color Spinner 2`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -77,18 +81,18 @@ exports[`<Spinner /> should render default color Spinner 2`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(227, 100%, 59%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(227, 100%, 59%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(227, 100%, 59%, 1)"
           />
         </svg>
       </div>
@@ -108,7 +112,7 @@ exports[`<Spinner /> should render default color Spinner 2`] = `
 </div>
 `;
 
-exports[`<Spinner /> should render white color Spinner 1`] = `"<div id="root"><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  jQoaqB"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(0, 0%, 100%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(0, 0%, 100%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(0, 0%, 100%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx kgcqKG"><p class="StyledBaseText-dVBfTO krDqnr" data-blade-component="text">Loading</p></div></div></div></div>"`;
+exports[`<Spinner /> should render white color Spinner 1`] = `"<div id="root"><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  jQoaqB"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(0, 0%, 100%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(0, 0%, 100%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(0, 0%, 100%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx kgcqKG"><p class="StyledBaseText-dVBfTO bcGqUR" data-blade-component="text">Loading</p></div></div></div></div>"`;
 
 exports[`<Spinner /> should render white color Spinner 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -144,14 +148,18 @@ exports[`<Spinner /> should render white color Spinner 2`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.web.test.tsx.snap b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.web.test.tsx.snap
index 5d7c7b697f3..5dc8619ccf8 100644
--- a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.web.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.web.test.tsx.snap
@@ -55,18 +55,18 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
@@ -130,18 +130,18 @@ exports[`<Spinner /> should render default color Spinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(227, 100%, 59%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(227, 100%, 59%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(227, 100%, 59%, 1)"
           />
         </svg>
       </div>
@@ -205,18 +205,18 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
@@ -280,18 +280,18 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
@@ -430,18 +430,18 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
           <path
             d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
             fill-opacity="0.2"
           />
           <path
             d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
           <path
             d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
             data-blade-component="svg-path"
-            fill="hsla(217, 18%, 45%, 1)"
+            fill="hsla(211, 29%, 26%, 1)"
           />
         </svg>
       </div>
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourFooter.web.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourFooter.web.tsx
index 20a4ab4a1d0..ee2d0ba6529 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/TourFooter.web.tsx
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourFooter.web.tsx
@@ -34,7 +34,7 @@ const SpotlightPopoverTourFooter = ({
 
   return (
     <Box display="flex" justifyContent="space-between" alignItems="center" gap="spacing.7">
-      <Text size="small" weight="bold">
+      <Text size="small" weight="semibold">
         {activeStep + 1} / {totalSteps}
       </Text>
       <Box display="flex" gap={isBothIcon ? 'spacing.3' : 'spacing.4'}>
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourMask.web.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourMask.web.tsx
index adcecbc8969..314266da37c 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/TourMask.web.tsx
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourMask.web.tsx
@@ -152,7 +152,7 @@ const _SpotlightPopoverTourMask = ({
         y={y + borderWidth / 2}
         width={width - borderWidth}
         height={height - borderWidth}
-        stroke={theme.colors.brand.primary[500]}
+        stroke={theme.colors.surface.background.primary.intense}
         strokeWidth={makeSpace(borderWidth)}
         rx={borderRadius - 1}
         ry={borderRadius - 1}
@@ -179,7 +179,7 @@ const _SpotlightPopoverTourMask = ({
         height="100%"
         width="100%"
         mask="url(#tour-mask)"
-        fill={theme.colors.surface.overlay.background[800]}
+        fill={theme.colors.overlay.background.subtle}
       />
     </svg>
   );
diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourPopover.web.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourPopover.web.tsx
index 7de5df4334e..f86db010c9e 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/TourPopover.web.tsx
+++ b/packages/blade/src/components/SpotlightPopoverTour/TourPopover.web.tsx
@@ -160,8 +160,8 @@ const TourPopover = ({
                     context={context}
                     width={ARROW_WIDTH}
                     height={ARROW_HEIGHT}
-                    fillColor={theme.colors.surface.popup.background}
-                    strokeColor={theme.colors.brand.gray[400].lowContrast}
+                    fillColor={theme.colors.popup.background.subtle}
+                    strokeColor={theme.colors.popup.border.subtle}
                   />
                 }
               >
diff --git a/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.web.test.tsx b/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.web.test.tsx
index b142dd2aba7..a60627020f2 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.web.test.tsx
+++ b/packages/blade/src/components/SpotlightPopoverTour/__tests__/Tour.web.test.tsx
@@ -7,13 +7,13 @@ import { SpotlightPopoverTourStep } from '../TourStep.web';
 import type { SpotlightPopoverStepRenderProps, SpotlightPopoverTourSteps } from '../types';
 import { SpotlightPopoverTourFooter } from '../TourFooter.web';
 import { Button } from '~components/Button';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 import renderWithTheme from '~utils/testing/renderWithTheme.web';
 import { Box } from '~components/Box';
 import { Text } from '~components/Typography';
 import assertAccessible from '~utils/testing/assertAccessible.web';
 
-const animationDuration = paymentTheme.motion.duration.gentle;
+const animationDuration = bladeTheme.motion.duration.gentle;
 const nextButtonText = 'Next';
 const prevButtonText = 'Prev';
 const doneButtonText = 'Done';
diff --git a/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.ssr.test.tsx.snap b/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.ssr.test.tsx.snap
index f2447fe65f0..a9a68a5b053 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.ssr.test.tsx.snap
+++ b/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tour /> should render Tour ssr 1`] = `"<div id="root"><div data-blade-component="box" class="BaseBox-bmPWx"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 hviyGE"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div class="StyledBaseText-dVBfTO hcXerP" data-blade-component="base-text">Open Tour</div></div></button><div data-blade-component="box" class="BaseBox-bmPWx">Some other content inside</div><div data-blade-component="box" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Trigger 1</p></div><div data-blade-component="box" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Trigger 2</p></div></div></div>"`;
+exports[`<Tour /> should render Tour ssr 1`] = `"<div id="root"><div data-blade-component="box" class="BaseBox-bmPWx"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 gWxRWW"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO bewYNq" data-blade-component="base-text">Open Tour</div></div></button><div data-blade-component="box" class="BaseBox-bmPWx">Some other content inside</div><div data-blade-component="box" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Trigger 1</p></div><div data-blade-component="box" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Trigger 2</p></div></div></div>"`;
 
 exports[`<Tour /> should render Tour ssr 2`] = `
 .c1.c1.c1.c1.c1 {
@@ -22,31 +22,40 @@ exports[`<Tour /> should render Tour ssr 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -55,10 +64,10 @@ exports[`<Tour /> should render Tour ssr 2`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -74,6 +83,7 @@ exports[`<Tour /> should render Tour ssr 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -89,25 +99,25 @@ exports[`<Tour /> should render Tour ssr 2`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
diff --git a/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.web.test.tsx.snap b/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.web.test.tsx.snap
index 196f0ac6aae..f660de392fa 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.web.test.tsx.snap
+++ b/packages/blade/src/components/SpotlightPopoverTour/__tests__/__snapshots__/Tour.web.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`<Tour /> should render 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c6.c6.c6.c6.c6 {
@@ -78,9 +79,9 @@ exports[`<Tour /> should render 1`] = `
   background-color: hsla(0,0%,100%,1);
   border-width: 1px;
   border-radius: 8px;
-  border-color: hsla(216,19%,89%,1);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
-  box-shadow: 0 12px 16px -4px hsla(217,56%,17%,0.08),0 4px 6px -2px hsla(217,56%,17%,0.03);
+  box-shadow: 0px 8px 24px 0px hsla(217,56%,17%,0.12);
   opacity: 0;
   -webkit-transform: translateY(-4px);
   -ms-transform: translateY(-4px);
@@ -105,7 +106,7 @@ exports[`<Tour /> should render 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -115,68 +116,90 @@ exports[`<Tour /> should render 1`] = `
 }
 
 .c10.c10.c10.c10.c10:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c10.c10.c10.c10.c10:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c10.c10.c10.c10.c10:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c15.c15.c15.c15.c15 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -195,10 +218,10 @@ exports[`<Tour /> should render 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -214,6 +237,7 @@ exports[`<Tour /> should render 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -229,25 +253,25 @@ exports[`<Tour /> should render 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -258,10 +282,10 @@ exports[`<Tour /> should render 1`] = `
   min-height: 32px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -277,6 +301,7 @@ exports[`<Tour /> should render 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -291,25 +316,25 @@ exports[`<Tour /> should render 1`] = `
 }
 
 .c14.c14.c14.c14.c14:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c14.c14.c14.c14.c14:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c14.c14.c14.c14.c14:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c14.c14.c14.c14.c14 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -393,7 +418,7 @@ exports[`<Tour /> should render 1`] = `
         opacity="0"
         rx="3"
         ry="3"
-        stroke="hsla(218, 89%, 51%, 1)"
+        stroke="hsla(227, 100%, 59%, 1)"
         stroke-width="2px"
         width="10"
         x="-5"
@@ -414,7 +439,7 @@ exports[`<Tour /> should render 1`] = `
         />
       </mask>
       <rect
-        fill="hsla(214, 15%, 18%, 0.64)"
+        fill="hsla(0, 0%, 0%, 0.56)"
         height="100%"
         mask="url(#tour-mask)"
         width="100%"
@@ -543,7 +568,7 @@ exports[`<Tour /> should render 1`] = `
             clip-path="url(#:r7:)"
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
             fill="none"
-            stroke="hsla(216, 19%, 89%, 1)"
+            stroke="hsla(211, 20%, 52%, 0.18)"
             stroke-width="3"
           />
           <path
diff --git a/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.tsx b/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.tsx
index 09494edc771..a680f591b1e 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.tsx
+++ b/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.tsx
@@ -29,12 +29,7 @@ const Page = (): React.ReactElement => {
       showDefaultExample={false}
       componentName="SpotlightPopoverTour"
       componentDescription="The SpotlightPopoverTour component is used to provide context as well as enable users to take certain actions on it. These are used to highlight a new feature or provide a guided tour to a new user."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev',
-        bankingTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev"
     >
       <Title>Usage</Title>
       <Sandbox>{BasicExample}</Sandbox>
@@ -55,7 +50,7 @@ const Page = (): React.ReactElement => {
       <Title>Examples</Title>
       <Text marginY="spacing.5">
         To see examples properly, switch to the{' '}
-        <Text as="span" weight="bold">
+        <Text as="span" weight="semibold">
           story view
         </Text>
       </Text>
@@ -250,8 +245,8 @@ const TourTemplate: StoryFn<(props: StoryControlProps) => React.ReactElement> =
         content: () => {
           return (
             <Box>
-              <Text>{args.tourStepsContent}</Text>
-              <Text marginTop="spacing.2">
+              <Text color="surface.text.gray.subtle">{args.tourStepsContent}</Text>
+              <Text color="surface.text.gray.subtle" marginTop="spacing.2">
                 You can also issue partial refunds - for example, if a customer purchased multiple
                 items.
               </Text>
@@ -267,7 +262,7 @@ const TourTemplate: StoryFn<(props: StoryControlProps) => React.ReactElement> =
         content: () => {
           return (
             <Box>
-              <Text>
+              <Text color="surface.text.gray.subtle">
                 Disputes are raised by customers when they have a problem with a transaction.
               </Text>
             </Box>
@@ -281,7 +276,7 @@ const TourTemplate: StoryFn<(props: StoryControlProps) => React.ReactElement> =
         title: 'Dispute Statuses',
         content: () => {
           return (
-            <Text>
+            <Text color="surface.text.gray.subtle">
               Disputes which are open or under review will be shown here. You can also review them
               by clicking on the button.
             </Text>
@@ -335,10 +330,10 @@ const TourTemplate: StoryFn<(props: StoryControlProps) => React.ReactElement> =
                   <Box display="flex" flexDirection="column" gap="spacing.3">
                     <Box display="flex" alignItems="center" gap="spacing.3">
                       <Text>Refunds</Text>
-                      <InfoIcon color="surface.text.subdued.lowContrast" />
+                      <InfoIcon color="surface.icon.gray.muted" />
                     </Box>
-                    <Amount value={40000} size="title-small" />
-                    <Text type="subdued">3 Processed</Text>
+                    <Amount value={40000} type="heading" size="large" />
+                    <Text color="surface.text.gray.muted">3 Processed</Text>
                   </Box>
                 </CardBody>
               </Card>
@@ -351,9 +346,9 @@ const TourTemplate: StoryFn<(props: StoryControlProps) => React.ReactElement> =
                   <Box display="flex" flexDirection="column" gap="spacing.3">
                     <Box display="flex" alignItems="center" gap="spacing.3">
                       <Text>Disputes</Text>
-                      <InfoIcon color="surface.text.subdued.lowContrast" />
+                      <InfoIcon color="interactive.icon.gray.muted" />
                     </Box>
-                    <Amount value={0} size="title-small" />
+                    <Amount value={0} type="heading" size="large" />
                     <SpotlightPopoverTourStep name="step-3">
                       <Box
                         display="flex"
@@ -361,7 +356,7 @@ const TourTemplate: StoryFn<(props: StoryControlProps) => React.ReactElement> =
                         alignItems="center"
                         gap="spacing.3"
                       >
-                        <Text type="subdued">0 Open | 0 Under review</Text>
+                        <Text color="surface.text.gray.muted">0 Open | 0 Under review</Text>
                         <Button size="small" variant="tertiary">
                           Review
                         </Button>
@@ -396,7 +391,7 @@ export const CustomPlacement = () => {
         content: () => {
           return (
             <Box>
-              <Text>Top</Text>
+              <Text color="surface.text.gray.subtle">Top</Text>
             </Box>
           );
         },
@@ -408,7 +403,7 @@ export const CustomPlacement = () => {
         content: () => {
           return (
             <Box>
-              <Text>Bottom</Text>
+              <Text color="surface.text.gray.subtle">Bottom</Text>
             </Box>
           );
         },
@@ -420,7 +415,7 @@ export const CustomPlacement = () => {
         content: () => {
           return (
             <Box>
-              <Text>Left</Text>
+              <Text color="surface.text.gray.subtle">Left</Text>
             </Box>
           );
         },
@@ -432,7 +427,7 @@ export const CustomPlacement = () => {
         content: () => {
           return (
             <Box>
-              <Text>Right</Text>
+              <Text color="surface.text.gray.subtle">Right</Text>
             </Box>
           );
         },
@@ -479,22 +474,22 @@ export const CustomPlacement = () => {
         <Center>
           <Box display="flex" gap="spacing.4" alignItems="stretch">
             <SpotlightPopoverTourStep name="top">
-              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+              <Box padding="spacing.4" backgroundColor="surface.background.gray.intense">
                 top
               </Box>
             </SpotlightPopoverTourStep>
             <SpotlightPopoverTourStep name="bottom">
-              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+              <Box padding="spacing.4" backgroundColor="surface.background.gray.intense">
                 bottom
               </Box>
             </SpotlightPopoverTourStep>
             <SpotlightPopoverTourStep name="left">
-              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+              <Box padding="spacing.4" backgroundColor="surface.background.gray.intense">
                 left
               </Box>
             </SpotlightPopoverTourStep>
             <SpotlightPopoverTourStep name="right">
-              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+              <Box padding="spacing.4" backgroundColor="surface.background.gray.intense">
                 right
               </Box>
             </SpotlightPopoverTourStep>
@@ -521,7 +516,7 @@ export const WithScrollablePage = () => {
         content: () => {
           return (
             <Box>
-              <Text>
+              <Text color="surface.text.gray.subtle">
                 Razorpay provides a Powerful Dashboard for you to get reports and detailed
                 statistics on payments, settlements, refunds and much more for you to take better
                 business decisions.
@@ -538,7 +533,7 @@ export const WithScrollablePage = () => {
         content: () => {
           return (
             <Box>
-              <Text>
+              <Text color="surface.text.gray.subtle">
                 With Amazon AWS, we are built for scale. To ensure that products built with Razorpay
                 are always available, we have a highly scalable and reliable infrastructure.
               </Text>
@@ -554,7 +549,7 @@ export const WithScrollablePage = () => {
         content: () => {
           return (
             <Box>
-              <Text>
+              <Text color="surface.text.gray.subtle">
                 With SDKs and documentation for all major languages and platforms, Razorpay is built
                 for developers.
               </Text>
@@ -735,7 +730,7 @@ const InterruptibleTourFooter = ({
   const isFirst = activeStep === 0;
   return (
     <Box display="flex" justifyContent="space-between" alignItems="center" gap="spacing.7">
-      <Text size="small" weight="bold">
+      <Text size="small" weight="semibold">
         {activeStep + 1} / {totalSteps}
       </Text>
       <Box display="flex" gap="spacing.4">
@@ -797,7 +792,7 @@ export const InterruptibleTour = () => {
         content: () => {
           return (
             <Box>
-              <Text>This is step 1, press skip</Text>
+              <Text color="surface.text.gray.subtle">This is step 1, press skip</Text>
             </Box>
           );
         },
@@ -812,7 +807,7 @@ export const InterruptibleTour = () => {
         content: () => {
           return (
             <Box>
-              <Text>This is step 2</Text>
+              <Text color="surface.text.gray.subtle">This is step 2</Text>
             </Box>
           );
         },
@@ -827,7 +822,7 @@ export const InterruptibleTour = () => {
             title: 'Tour Incomplete!',
             content: () => {
               return (
-                <Text>
+                <Text color="surface.text.gray.subtle">
                   We reccommend that you complete the tour to make the most of the new features. You
                   can find it here when you want to take it.
                 </Text>
@@ -851,7 +846,7 @@ export const InterruptibleTour = () => {
             title: 'Tour Complete!',
             content: () => {
               return (
-                <Text>
+                <Text color="surface.text.gray.subtle">
                   You have completed the tour. You can find it here when you want to take it.
                 </Text>
               );
@@ -916,12 +911,12 @@ export const InterruptibleTour = () => {
         <Center>
           <Box display="flex" gap="spacing.4" alignItems="stretch">
             <SpotlightPopoverTourStep name="step-1">
-              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+              <Box padding="spacing.4" backgroundColor="surface.background.gray.intense">
                 Step 1
               </Box>
             </SpotlightPopoverTourStep>
             <SpotlightPopoverTourStep name="step-2">
-              <Box padding="spacing.4" backgroundColor="surface.background.level2.lowContrast">
+              <Box padding="spacing.4" backgroundColor="surface.background.gray.intense">
                 Step 2
               </Box>
             </SpotlightPopoverTourStep>
diff --git a/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx b/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx
index c235dc5b5db..7c9dbebeaf0 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx
+++ b/packages/blade/src/components/SpotlightPopoverTour/docs/TourDocs.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { BasicExample } from './examples';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
-import { Code, Heading, Text, Title } from '~components/Typography';
+import { Code, Heading, Text } from '~components/Typography';
 import { Box } from '~components/Box';
 import type { TableData } from '~components/Table';
 import {
@@ -186,10 +186,7 @@ const BladeArgTable = ({ data }: { data: TableData<Item> }): React.ReactElement
                   <Text>
                     {tableItem.prop}{' '}
                     {tableItem.required && (
-                      <Text
-                        as="span"
-                        color="feedback.negative.action.text.primary.default.lowContrast"
-                      >
+                      <Text as="span" color="interactive.text.negative.subtle">
                         *
                       </Text>
                     )}
@@ -232,16 +229,11 @@ const TourDocs = (): React.ReactElement => {
       showArgsTable={false}
       componentName="SpotlightPopoverTour"
       componentDescription="The SpotlightPopoverTour component is used to provide context as well as enable users to take certain actions on it. These are used to highlight a new feature or provide a guided tour to a new user."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev',
-        bankingTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev"
     >
-      <Title>Usage</Title>
+      <Heading size="large">Usage</Heading>
       <Sandbox>{BasicExample}</Sandbox>
-      <Title>iOS Safari Specific Setup</Title>
+      <Heading size="large">iOS Safari Specific Setup</Heading>
       <Text marginTop="spacing.5">
         When using BottomSheet or SpotlightPopoverTour, Make sure to set a width/height to the
         `body` otherwise when they open, the page will get clipped. This happens due to a bug in iOS
@@ -255,18 +247,18 @@ const TourDocs = (): React.ReactElement => {
           }
         `}
       </SandboxHighlighter>
-      <Title>Examples</Title>
+      <Heading size="large">Examples</Heading>
       <Text marginY="spacing.5">
         To see examples properly, switch to the{' '}
-        <Text as="span" weight="bold">
+        <Text as="span" weight="semibold">
           story view
         </Text>
       </Text>
 
-      <Title>API</Title>
+      <Heading size="large">API</Heading>
 
       <Box
-        backgroundColor="surface.background.level2.lowContrast"
+        backgroundColor="surface.background.gray.intense"
         overflow={castWebType('auto')}
         minHeight="400px"
         display="flex"
@@ -274,12 +266,12 @@ const TourDocs = (): React.ReactElement => {
         gap="spacing.5"
       >
         <Box paddingBottom="spacing.4">
-          <Heading>SpotlightPopoverTour props</Heading>
+          <Text size="large">SpotlightPopoverTour props</Text>
         </Box>
         <BladeArgTable data={tourProps} />
 
         <Box paddingBottom="spacing.4" id="step-props">
-          <Heading>Step type</Heading>
+          <Text size="large">Step type</Text>
           <Text>
             Step type defines each step of the tour, and passed to the{' '}
             <Code size="medium">steps</Code> prop in the SpotlightPopoverTour component.
diff --git a/packages/blade/src/components/SpotlightPopoverTour/docs/examples.ts b/packages/blade/src/components/SpotlightPopoverTour/docs/examples.ts
index 73076680c98..910b5cbc435 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/docs/examples.ts
+++ b/packages/blade/src/components/SpotlightPopoverTour/docs/examples.ts
@@ -110,12 +110,12 @@ export const BasicExample = `
         >
           <Box width="100%" display="flex" gap="spacing.4">
             <SpotlightPopoverTourStep name="step-1">
-              <Box padding="spacing.4" backgroundColor="brand.gray.400.lowContrast">
+              <Box padding="spacing.4" backgroundColor="interactive.border.gray.faded">
                 <Text>Step 1 </Text>
               </Box>
             </SpotlightPopoverTourStep>
             <SpotlightPopoverTourStep name="step-2">
-              <Box padding="spacing.4" backgroundColor="brand.gray.400.lowContrast">
+              <Box padding="spacing.4" backgroundColor="interactive.border.gray.faded">
                 <Text>Step 2 </Text>
               </Box>
             </SpotlightPopoverTourStep>
diff --git a/packages/blade/src/components/Switch/Switch.stories.tsx b/packages/blade/src/components/Switch/Switch.stories.tsx
index d60a851aaf7..3bec689fc2f 100644
--- a/packages/blade/src/components/Switch/Switch.stories.tsx
+++ b/packages/blade/src/components/Switch/Switch.stories.tsx
@@ -23,12 +23,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Switch"
       componentDescription="A switch component is used to quickly switch between two possible states. These are only used for binary actions that occur immediately after the user turn the switch on/off."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=11169%3A230354',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026"
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -141,7 +136,7 @@ const WithLabelTemplate: StoryFn<typeof SwitchComponent> = () => {
       <Box width="350px">
         <Card>
           <CardBody>
-            <Text size="small" weight="bold" marginBottom="spacing.4">
+            <Text size="small" weight="semibold" marginBottom="spacing.4">
               Activate/lock the below methods for card transactions
             </Text>
             <Box display="flex" flexDirection="column" gap="spacing.3">
@@ -153,7 +148,7 @@ const WithLabelTemplate: StoryFn<typeof SwitchComponent> = () => {
                 gap="spacing.2"
               >
                 <Box display="flex" alignItems="center" gap="spacing.2">
-                  <MapPinIcon color="surface.text.subdued.lowContrast" size="small" />
+                  <MapPinIcon color="surface.icon.gray.subtle" size="small" />
                   <Text weight="regular" variant="body" size="medium">
                     International transaction
                   </Text>
@@ -168,7 +163,7 @@ const WithLabelTemplate: StoryFn<typeof SwitchComponent> = () => {
                 gap="spacing.2"
               >
                 <Box display="flex" alignItems="center" gap="spacing.2">
-                  <GlobeIcon color="surface.text.subdued.lowContrast" size="small" />
+                  <GlobeIcon color="surface.icon.gray.muted" size="small" />
                   <Text weight="regular" variant="body" size="medium">
                     Online transaction
                   </Text>
@@ -183,7 +178,7 @@ const WithLabelTemplate: StoryFn<typeof SwitchComponent> = () => {
                 gap="spacing.2"
               >
                 <Box display="flex" alignItems="center" gap="spacing.2">
-                  <WifiIcon color="surface.text.subdued.lowContrast" size="small" />
+                  <WifiIcon color="surface.icon.gray.muted" size="small" />
                   <Text weight="regular" variant="body" size="medium">
                     Contactless Transaction
                   </Text>
diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
index 49567a699b0..d31a8e11ca4 100644
--- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
+++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`<Switch /> should render switch with label 1`] = `
           [
             {
               "alignItems": "center",
-              "backgroundColor": "hsla(214, 18%, 69%, 1)",
+              "backgroundColor": "hsla(211, 20%, 52%, 0.12)",
               "borderRadius": 9999,
               "display": "flex",
               "height": 24,
@@ -127,7 +127,7 @@ exports[`<Switch /> should render switch with label 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "hsla(220, 30%, 96%, 1)",
+                  "backgroundColor": "hsla(0, 0%, 100%, 1)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -199,7 +199,7 @@ exports[`<Switch /> should render switch with label 1`] = `
                   <RNSVGPath
                     clipRule={0}
                     d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z"
-                    fill={4281484642}
+                    fill={4278190080}
                     fillRule={0}
                     propList={
                       [
@@ -294,7 +294,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
           [
             {
               "alignItems": "center",
-              "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+              "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
               "borderRadius": 9999,
               "display": "flex",
               "height": 24,
@@ -347,7 +347,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "hsla(220, 27%, 98%, 1)",
+                  "backgroundColor": "hsla(0, 0%, 100%, 0.18)",
                   "borderRadius": 9999,
                   "display": "flex",
                   "flexShrink": 0,
@@ -419,7 +419,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
                   <RNSVGPath
                     clipRule={0}
                     d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z"
-                    fill={4288851646}
+                    fill={1375731712}
                     fillRule={0}
                     propList={
                       [
diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.ssr.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.ssr.test.tsx.snap
index c0904a02774..0ae466e529a 100644
--- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Switch /> should render switch ssr 1`] = `"<div id="root"><div data-blade-component="switch" class="BaseBox-bmPWx diLchY"><label style="cursor:pointer" data-blade-component="switch-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><input type="checkbox" role="switch" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-label="Toggle Darkmode" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 gJRfuo"/><div aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx SwitchTrackweb__SwitchTrack-t4l0ax-0  iDpCCo"><div data-blade-component="base-box" class="BaseBox-bmPWx Thumb-jf4wbz-0  iVfsLD"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedThumbweb__AnimatedThumb-i5qu0o-0  fbAEFX"><svg aria-hidden="true" data-blade-component="icon" height="8px" viewBox="0 0 11 8" width="8px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 AnimatedThumbIconweb__AnimatedThumbIcon-sc-3hk5w7-0 fYQKxF"><path d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z" clip-rule="evenodd" fill="hsla(216, 33%, 29%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div></label></div></div>"`;
+exports[`<Switch /> should render switch ssr 1`] = `"<div id="root"><div data-blade-component="switch" class="BaseBox-bmPWx diLchY"><label style="cursor:pointer" data-blade-component="switch-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><input type="checkbox" role="switch" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-label="Toggle Darkmode" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 gjyBTr"/><div aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx SwitchTrackweb__SwitchTrack-t4l0ax-0  eCfGty"><div data-blade-component="base-box" class="BaseBox-bmPWx Thumb-jf4wbz-0  iVfsLD"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedThumbweb__AnimatedThumb-i5qu0o-0  ebxSki"><svg aria-hidden="true" data-blade-component="icon" height="8px" viewBox="0 0 11 8" width="8px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 AnimatedThumbIconweb__AnimatedThumbIcon-sc-3hk5w7-0 fYQKxF"><path d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z" clip-rule="evenodd" fill="hsla(0, 0%, 0%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div></label></div></div>"`;
 
 exports[`<Switch /> should render switch ssr 2`] = `
 .c6.c6.c6.c6.c6 {
@@ -64,7 +64,7 @@ exports[`<Switch /> should render switch ssr 2`] = `
   border-radius: 9999px;
   -webkit-animation-duration: 150ms;
   animation-duration: 150ms;
-  background-color: hsla(220,30%,96%,1);
+  background-color: hsla(0,0%,100%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -83,7 +83,7 @@ exports[`<Switch /> should render switch ssr 2`] = `
   width: 36px;
   height: 20px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -108,12 +108,18 @@ exports[`<Switch /> should render switch ssr 2`] = `
 }
 
 .c2.c2.c2.c2.c2:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c2.c2.c2.c2.c2:hover + div {
-  background-color: hsla(216,16%,60%,1);
+  background-color: hsla(211,20%,52%,0.18);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -178,7 +184,7 @@ exports[`<Switch /> should render switch ssr 2`] = `
                 clip-rule="evenodd"
                 d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 33%, 29%, 1)"
+                fill="hsla(0, 0%, 0%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap
index 7440885b825..3b038adf3f0 100644
--- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap
+++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<Switch /> should render switch 1`] = `
   border-radius: 9999px;
   -webkit-animation-duration: 150ms;
   animation-duration: 150ms;
-  background-color: hsla(220,30%,96%,1);
+  background-color: hsla(0,0%,100%,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -81,7 +81,7 @@ exports[`<Switch /> should render switch 1`] = `
   width: 36px;
   height: 20px;
   border-radius: 9999px;
-  background-color: hsla(214,18%,69%,1);
+  background-color: hsla(211,20%,52%,0.12);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -106,12 +106,18 @@ exports[`<Switch /> should render switch 1`] = `
 }
 
 .c2.c2.c2.c2.c2:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c2.c2.c2.c2.c2:hover + div {
-  background-color: hsla(216,16%,60%,1);
+  background-color: hsla(211,20%,52%,0.18);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -174,7 +180,7 @@ exports[`<Switch /> should render switch 1`] = `
                 clip-rule="evenodd"
                 d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 33%, 29%, 1)"
+                fill="hsla(0, 0%, 0%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
@@ -248,7 +254,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
   border-radius: 9999px;
   -webkit-animation-duration: 150ms;
   animation-duration: 150ms;
-  background-color: hsla(220,27%,98%,1);
+  background-color: hsla(0,0%,100%,0.18);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -267,7 +273,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
   width: 36px;
   height: 20px;
   border-radius: 9999px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
   -webkit-transition-duration: 70ms;
@@ -292,8 +298,14 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
 }
 
 .c2.c2.c2.c2.c2:focus-visible + div {
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c1.c1.c1.c1.c1 {
@@ -353,7 +365,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
                 clip-rule="evenodd"
                 d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z"
                 data-blade-component="svg-path"
-                fill="hsla(214, 18%, 69%, 1)"
+                fill="hsla(0, 0%, 0%, 0.32)"
                 fill-rule="evenodd"
               />
             </svg>
diff --git a/packages/blade/src/components/Switch/switchTokens.ts b/packages/blade/src/components/Switch/switchTokens.ts
index e249abf192b..0e474fe5d43 100644
--- a/packages/blade/src/components/Switch/switchTokens.ts
+++ b/packages/blade/src/components/Switch/switchTokens.ts
@@ -1,19 +1,4 @@
-import type { Theme } from '~components/BladeProvider';
-import type { SelectorInputHoverTokens } from '~components/Form/Selector/types';
-import type { DurationString, EasingString } from '~tokens/global/motion';
 import { size } from '~tokens/global';
-import type { DotNotationColorStringToken } from '~utils/types';
-
-type ColorTokens = `colors.${DotNotationColorStringToken<Theme['colors']>}` | 'transparent';
-type State = {
-  checked: ColorTokens;
-  unchecked: ColorTokens;
-};
-type SwitchColors = {
-  track: Record<'default' | 'disabled', Record<string, State>>;
-  thumb: Record<'default' | 'disabled', Record<string, ColorTokens>>;
-  thumbIcon: Record<'default' | 'disabled', Record<string, ColorTokens>>;
-};
 
 const switchSizes = {
   track: {
@@ -62,40 +47,40 @@ const switchSizes = {
   },
 } as const;
 
-const switchColors: SwitchColors = {
+const switchColors = {
   track: {
     default: {
       background: {
-        checked: 'colors.brand.primary.500',
-        unchecked: 'colors.brand.gray.500.lowContrast',
+        checked: 'colors.interactive.background.primary.default',
+        unchecked: 'colors.interactive.background.gray.faded',
       },
     },
     disabled: {
       background: {
-        checked: 'colors.brand.primary.400',
-        unchecked: 'colors.brand.gray.a100.lowContrast',
+        checked: 'colors.interactive.background.primary.faded',
+        unchecked: 'colors.interactive.background.gray.disabled',
       },
     },
   },
   thumb: {
     default: {
-      background: 'colors.brand.gray.700.highContrast',
+      background: 'colors.interactive.background.staticWhite.default',
     },
     disabled: {
-      background: 'colors.brand.gray.200.lowContrast',
+      background: 'colors.interactive.background.staticWhite.disabled',
     },
   },
   thumbIcon: {
     default: {
-      fill: 'colors.brand.gray.200.highContrast',
+      fill: 'colors.interactive.icon.staticBlack.normal',
     },
     disabled: {
-      fill: 'colors.surface.text.placeholder.lowContrast',
+      fill: 'colors.interactive.icon.staticBlack.disabled',
     },
   },
-};
+} as const;
 
-const switchMotion: Record<string, Record<string, `motion.${EasingString | DurationString}`>> = {
+const switchMotion = {
   easing: {
     thumb: 'motion.easing.standard.effective',
     thumbIcon: 'motion.easing.standard.effective',
@@ -106,15 +91,15 @@ const switchMotion: Record<string, Record<string, `motion.${EasingString | Durat
     thumbIcon: 'motion.duration.xquick',
     track: 'motion.duration.xquick',
   },
-};
+} as const;
 
-const switchHoverTokens: SelectorInputHoverTokens = {
+const switchHoverTokens = {
   default: {
     background: {
-      checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.600.lowContrast',
+      checked: 'colors.interactive.background.primary.highlighted',
+      unchecked: 'colors.interactive.background.gray.fadedHighlighted',
     },
   },
-};
+} as const;
 
 export { switchColors, switchSizes, switchHoverTokens, switchMotion };
diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx
index 6f1ca055b70..637a1dc5994 100644
--- a/packages/blade/src/components/Table/Table.web.tsx
+++ b/packages/blade/src/components/Table/Table.web.tsx
@@ -14,6 +14,7 @@ import {
   checkboxCellWidth,
   firstColumnStickyHeaderFooterZIndex,
   refreshWrapperZIndex,
+  tableBackgroundColor,
   tablePagination,
 } from './tokens';
 import type { TableProps, TableNode, Identifier } from './types';
@@ -28,6 +29,7 @@ import { getStyledProps } from '~components/Box/styledProps';
 import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { useTheme } from '~components/BladeProvider';
+import getIn from '~utils/lodashButBetter/get';
 
 const rowSelectType: Record<
   NonNullable<TableProps<unknown>['selectionType']>,
@@ -121,7 +123,6 @@ const _Table = <Item,>({
   height,
   showStripedRows,
   gridTemplateColumns,
-  surfaceLevel = 2,
   isLoading = false,
   isRefreshing = false,
   ...styledProps
@@ -132,6 +133,7 @@ const _Table = <Item,>({
   const [totalItems, setTotalItems] = React.useState(data.nodes.length || 0);
   // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky
   const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky;
+  const backgroundColor = tableBackgroundColor;
 
   const {
     isEntering: isRefreshSpinnerEntering,
@@ -198,7 +200,7 @@ const _Table = <Item,>({
     Table: `
     height:${isFooterSticky ? `100%` : undefined};
     border: ${makeBorderSize(theme.border.width.thin)} solid ${
-      theme.colors.surface.border.normal.lowContrast
+      theme.colors.surface.border.gray.muted
     };
     --data-table-library_grid-template-columns: ${
       gridTemplateColumns ??
@@ -206,7 +208,7 @@ const _Table = <Item,>({
         selectionType === 'multiple' ? 'min-content' : ''
       } repeat(${columnCount},minmax(100px, 1fr)) !important;`
     } !important;
-    background-color: ${theme.colors.surface.background[`level${surfaceLevel}`].lowContrast};
+    background-color: ${getIn(theme.colors, backgroundColor)};
     `,
     HeaderCell: `
     position: ${shouldHeaderBeSticky ? 'sticky' : 'relative'};
@@ -372,9 +374,9 @@ const _Table = <Item,>({
       setPaginationRowSize,
       currentPaginationState,
       showStripedRows,
-      surfaceLevel,
       disabledRows,
       setDisabledRows,
+      backgroundColor,
     }),
     [
       selectionType,
@@ -390,9 +392,9 @@ const _Table = <Item,>({
       setPaginationRowSize,
       currentPaginationState,
       showStripedRows,
-      surfaceLevel,
       disabledRows,
       setDisabledRows,
+      backgroundColor,
     ],
   );
 
@@ -423,7 +425,7 @@ const _Table = <Item,>({
               width="100%"
               height="100%"
               zIndex={refreshWrapperZIndex}
-              backgroundColor={theme.colors.surface.overlay.background[800]}
+              backgroundColor="overlay.background.subtle"
               justifyContent="center"
               alignItems="center"
               display="flex"
diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
index 43011edf30e..2e171209bca 100644
--- a/packages/blade/src/components/Table/TableBody.web.tsx
+++ b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -4,7 +4,13 @@ import styled from 'styled-components';
 import { useTableContext } from './TableContext';
 import { checkboxCellWidth, tableRow } from './tokens';
 import { ComponentIds } from './componentIds';
-import type { TableProps, TableBodyProps, TableRowProps, TableCellProps } from './types';
+import type {
+  TableProps,
+  TableBodyProps,
+  TableRowProps,
+  TableCellProps,
+  TableBackgroundColors,
+} from './types';
 import getIn from '~utils/lodashButBetter/get';
 import { Text } from '~components/Typography';
 import type { CheckboxProps } from '~components/Checkbox';
@@ -12,8 +18,8 @@ import { Checkbox } from '~components/Checkbox';
 import { makeMotionTime, makeSize, makeSpace } from '~utils';
 import BaseBox from '~components/Box/BaseBox';
 import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
-import type { SurfaceLevels } from '~tokens/theme/theme';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 
 const StyledBody = styled(Body)<{ $isSelectable: boolean; $showStripedRows: boolean }>(
   ({ theme, $showStripedRows, $isSelectable }) => {
@@ -138,18 +144,15 @@ const TableBody = assignWithoutSideEffects(_TableBody, {
 });
 
 const StyledCell = styled(Cell)<{
-  $surfaceLevel: SurfaceLevels;
-}>(({ theme, $surfaceLevel }) => ({
+  $backgroundColor: TableBackgroundColors;
+}>(({ theme, $backgroundColor }) => ({
   '&&&': {
     height: '100%',
-    backgroundColor: getIn(theme.colors, `surface.background.level${$surfaceLevel}.lowContrast`),
+    backgroundColor: getIn(theme.colors, $backgroundColor),
     '& > div:first-child': {
       alignSelf: 'stretch',
     },
-    '&:focus-visible': {
-      outline: 'none',
-      boxShadow: `0px 0px 0px 4px ${getIn(theme.colors, tableRow.focusRingColor)} inset`,
-    },
+    '&:focus-visible': getFocusRingStyles({ theme, negativeOffset: true }),
   },
 }));
 
@@ -181,14 +184,14 @@ const CellWrapper = styled(BaseBox)<{
 
 const _TableCell = ({ children }: TableCellProps): React.ReactElement => {
   const isChildrenString = typeof children === 'string';
-  const { selectionType, rowDensity, showStripedRows, surfaceLevel } = useTableContext();
+  const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext();
   const isSelectable = selectionType !== 'none';
 
   return (
     <StyledCell
       tabIndex={0}
       role="cell"
-      $surfaceLevel={surfaceLevel}
+      $backgroundColor={backgroundColor}
       {...metaAttribute({ name: MetaConstants.TableCell })}
     >
       <BaseBox className="cell-wrapper-base" display="flex" alignItems="center" height="100%">
@@ -266,10 +269,7 @@ const StyledRow = styled(Row)<{ $isSelectable: boolean; $isHoverable: boolean }>
             cursor: 'pointer',
           },
         }),
-        '&:focus': {
-          outline: 'none',
-          boxShadow: `0 0 0 2px ${getIn(theme.colors, 'brand.primary.300')}`,
-        },
+        '&:focus': getFocusRingStyles({ theme, negativeOffset: true }),
       },
     };
   },
diff --git a/packages/blade/src/components/Table/TableContext.tsx b/packages/blade/src/components/Table/TableContext.tsx
index 698f5692c67..06bee340e87 100644
--- a/packages/blade/src/components/Table/TableContext.tsx
+++ b/packages/blade/src/components/Table/TableContext.tsx
@@ -2,8 +2,7 @@
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 import React from 'react';
 import type { TableNode } from '@table-library/react-table-library/table';
-import type { TableProps } from './types';
-import type { SurfaceLevels } from '~tokens/theme/theme';
+import type { TableBackgroundColors, TableProps } from './types';
 
 export type TableContextType = {
   selectionType?: TableProps<unknown>['selectionType'];
@@ -26,9 +25,9 @@ export type TableContextType = {
     size: number;
   };
   showStripedRows?: boolean;
-  surfaceLevel: SurfaceLevels;
   disabledRows: TableNode['id'][];
   setDisabledRows: React.Dispatch<React.SetStateAction<TableNode['id'][]>>;
+  backgroundColor: TableBackgroundColors;
 };
 
 const TableContext = React.createContext<TableContextType>({
@@ -46,9 +45,9 @@ const TableContext = React.createContext<TableContextType>({
   },
   setPaginationPage: () => {},
   setPaginationRowSize: () => {},
-  surfaceLevel: 1,
   disabledRows: [],
   setDisabledRows: () => {},
+  backgroundColor: 'surface.background.gray.intense',
 });
 
 const useTableContext = (): TableContextType => {
diff --git a/packages/blade/src/components/Table/TableFooter.web.tsx b/packages/blade/src/components/Table/TableFooter.web.tsx
index 15e09519f5d..2d4648b4c55 100644
--- a/packages/blade/src/components/Table/TableFooter.web.tsx
+++ b/packages/blade/src/components/Table/TableFooter.web.tsx
@@ -2,13 +2,17 @@ import React from 'react';
 import { Footer, FooterRow, FooterCell } from '@table-library/react-table-library/table';
 import styled from 'styled-components';
 import { tableFooter } from './tokens';
-import { useTableContext } from './TableContext';
 import { ComponentIds } from './componentIds';
-import type { TableFooterProps, TableFooterRowProps, TableFooterCellProps } from './types';
+import type {
+  TableFooterProps,
+  TableFooterRowProps,
+  TableFooterCellProps,
+  TableBackgroundColors,
+} from './types';
+import { useTableContext } from './TableContext';
 import { Text } from '~components/Typography';
 import { makeSpace } from '~utils';
 import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
-import type { SurfaceLevels } from '~tokens/theme/theme';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import getIn from '~utils/lodashButBetter/get';
 
@@ -43,41 +47,42 @@ const TableFooterRow = assignWithoutSideEffects(_TableFooterRow, {
   componentId: ComponentIds.TableFooterRow,
 });
 
-const StyledFooterCell = styled(FooterCell)<{
-  $surfaceLevel: SurfaceLevels;
-}>(({ theme, $surfaceLevel }) => ({
-  '&&&': {
-    height: '100%',
-    backgroundColor: getIn(theme.colors, `surface.background.level${$surfaceLevel}.lowContrast`),
-    borderBottomWidth: makeSpace(getIn(theme.border.width, tableFooter.borderBottomAndTopWidth)),
-    borderTopWidth: makeSpace(getIn(theme.border.width, tableFooter.borderBottomAndTopWidth)),
-    borderBottomColor: getIn(theme.colors, tableFooter.borderBottomAndTopColor),
-    borderTopColor: getIn(theme.colors, tableFooter.borderBottomAndTopColor),
-    borderBottomStyle: 'solid',
-    borderTopStyle: 'solid',
-    '> div': {
-      backgroundColor: getIn(theme.colors, tableFooter.backgroundColor),
-      display: 'flex',
-      flexDirection: 'row',
+const StyledFooterCell = styled(FooterCell)<{ $backgroundColor: TableBackgroundColors }>(
+  ({ theme, $backgroundColor }) => ({
+    '&&&': {
       height: '100%',
-      paddingTop: makeSpace(getIn(theme, tableFooter.paddingTop)),
-      paddingBottom: makeSpace(getIn(theme, tableFooter.paddingBottom)),
-      paddingLeft: makeSpace(getIn(theme, tableFooter.paddingLeft)),
-      paddingRight: makeSpace(getIn(theme, tableFooter.paddingRight)),
+      backgroundColor: getIn(theme.colors, $backgroundColor),
+      borderBottomWidth: makeSpace(getIn(theme.border.width, tableFooter.borderBottomAndTopWidth)),
+      borderTopWidth: makeSpace(getIn(theme.border.width, tableFooter.borderBottomAndTopWidth)),
+      borderBottomColor: getIn(theme.colors, tableFooter.borderBottomAndTopColor),
+      borderTopColor: getIn(theme.colors, tableFooter.borderBottomAndTopColor),
+      borderBottomStyle: 'solid',
+      borderTopStyle: 'solid',
+      '> div': {
+        backgroundColor: getIn(theme.colors, tableFooter.backgroundColor),
+        display: 'flex',
+        flexDirection: 'row',
+        height: '100%',
+        paddingTop: makeSpace(getIn(theme, tableFooter.paddingTop)),
+        paddingBottom: makeSpace(getIn(theme, tableFooter.paddingBottom)),
+        paddingLeft: makeSpace(getIn(theme, tableFooter.paddingLeft)),
+        paddingRight: makeSpace(getIn(theme, tableFooter.paddingRight)),
+      },
     },
-  },
-}));
+  }),
+);
 
 const _TableFooterCell = ({ children }: TableFooterCellProps): React.ReactElement => {
-  const { surfaceLevel } = useTableContext();
   const isChildrenString = typeof children === 'string';
+  const { backgroundColor } = useTableContext();
+
   return (
     <StyledFooterCell
-      $surfaceLevel={surfaceLevel}
+      $backgroundColor={backgroundColor}
       {...metaAttribute({ name: MetaConstants.TableFooterCell })}
     >
       {isChildrenString ? (
-        <Text size="medium" weight="bold">
+        <Text size="medium" weight="medium">
           {children}
         </Text>
       ) : (
diff --git a/packages/blade/src/components/Table/TableHeader.web.tsx b/packages/blade/src/components/Table/TableHeader.web.tsx
index d872235c04f..24cc7a3b37a 100644
--- a/packages/blade/src/components/Table/TableHeader.web.tsx
+++ b/packages/blade/src/components/Table/TableHeader.web.tsx
@@ -4,7 +4,7 @@ import { Header, HeaderRow, HeaderCell } from '@table-library/react-table-librar
 import { tableHeader } from './tokens';
 import { useTableContext } from './TableContext';
 import { ComponentIds } from './componentIds';
-import type { TableHeaderRowProps, TableHeaderCellProps } from './types';
+import type { TableHeaderRowProps, TableHeaderCellProps, TableBackgroundColors } from './types';
 import type { CheckboxProps } from '~components/Checkbox';
 import { Checkbox } from '~components/Checkbox';
 import { Text } from '~components/Typography';
@@ -12,10 +12,10 @@ import { castWebType, makeMotionTime, makeSpace } from '~utils';
 import { makeAccessible } from '~utils/makeAccessible';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import BaseBox from '~components/Box/BaseBox';
-import type { SurfaceLevels } from '~tokens/theme/theme';
 import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
 import { useTheme } from '~components/BladeProvider';
 import getIn from '~utils/lodashButBetter/get';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 
 const SortButton = styled.button(({ theme }) => ({
   cursor: 'pointer',
@@ -30,10 +30,7 @@ const SortButton = styled.button(({ theme }) => ({
   transitionProperty: 'color, box-shadow',
   transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, 'duration.quick'))),
   transitionTimingFunction: (theme.motion.easing.standard as unknown) as string,
-  '&:focus-visible': {
-    boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,
-    outline: 'none',
-  },
+  '&:focus-visible': getFocusRingStyles({ theme }),
 }));
 
 const SortIcon = ({
@@ -44,8 +41,8 @@ const SortIcon = ({
   isSortReversed: boolean;
 }): React.ReactElement => {
   const { theme } = useTheme();
-  const defaultColor = getIn(theme.colors, 'surface.action.icon.default.lowContrast');
-  const activeColor = getIn(theme.colors, 'brand.primary.500');
+  const defaultColor = getIn(theme.colors, 'interactive.icon.gray.muted');
+  const activeColor = getIn(theme.colors, 'interactive.icon.primary.subtle');
   const upArrowColor = isSorted && isSortReversed ? activeColor : defaultColor;
   const downArrowColor = isSorted && !isSortReversed ? activeColor : defaultColor;
   return (
@@ -83,12 +80,12 @@ const TableHeader = assignWithoutSideEffects(_TableHeader, {
 });
 
 const StyledHeaderCell = styled(HeaderCell)<{
-  $surfaceLevel: SurfaceLevels;
   $isSortable: boolean;
-}>(({ theme, $surfaceLevel, $isSortable }) => ({
+  $backgroundColor: TableBackgroundColors;
+}>(({ theme, $isSortable, $backgroundColor }) => ({
   '&&&': {
-    backgroundColor: getIn(theme.colors, `surface.background.level${$surfaceLevel}.lowContrast`),
     height: '100%',
+    backgroundColor: getIn(theme.colors, $backgroundColor),
     borderBottomWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),
     borderTopWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),
     borderBottomColor: getIn(theme.colors, tableHeader.borderBottomAndTopColor),
@@ -108,23 +105,20 @@ const StyledHeaderCell = styled(HeaderCell)<{
       paddingLeft: makeSpace(getIn(theme, tableHeader.paddingLeft)),
       paddingRight: makeSpace(getIn(theme, tableHeader.paddingRight)),
     },
-    '&:focus-visible': {
-      boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]} inset`,
-      outline: 'none',
-    },
+    '&:focus-visible': getFocusRingStyles({ theme, negativeOffset: true }),
   },
 }));
 
 const _TableHeaderCell = ({ children, headerKey }: TableHeaderCellProps): React.ReactElement => {
-  const { toggleSort, currentSortedState, surfaceLevel } = useTableContext();
+  const { toggleSort, currentSortedState, backgroundColor } = useTableContext();
   const isChildrenString = typeof children === 'string';
   const isSortable =
     headerKey && Boolean(currentSortedState.sortableColumns?.find((key) => key === headerKey));
   return (
     <StyledHeaderCell
       tabIndex={0}
-      $surfaceLevel={surfaceLevel}
       $isSortable={isSortable}
+      $backgroundColor={backgroundColor}
       onClick={() => {
         if (isSortable) {
           toggleSort(headerKey);
@@ -133,7 +127,7 @@ const _TableHeaderCell = ({ children, headerKey }: TableHeaderCellProps): React.
       {...metaAttribute({ name: MetaConstants.TableHeaderCell })}
     >
       {isChildrenString ? (
-        <Text size="medium" weight="bold">
+        <Text size="medium" weight="medium" color="surface.text.gray.normal">
           {children}
         </Text>
       ) : (
diff --git a/packages/blade/src/components/Table/TablePagination.web.tsx b/packages/blade/src/components/Table/TablePagination.web.tsx
index b0dbe3b3ad8..8d175e1f6cb 100644
--- a/packages/blade/src/components/Table/TablePagination.web.tsx
+++ b/packages/blade/src/components/Table/TablePagination.web.tsx
@@ -23,6 +23,7 @@ import { Button } from '~components/Button';
 import { makeAccessible } from '~utils/makeAccessible';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { useTheme } from '~components/BladeProvider';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 
 const pageSizeOptions: NonNullable<TablePaginationProps['defaultPageSize']>[] = [10, 25, 50];
 
@@ -48,13 +49,7 @@ const PageSelectionButton = styled.button<{ isSelected?: boolean }>(({ theme, is
       ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelectedActive)
       : getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorActive),
     outline: 'none',
-    '&:focus-visible': {
-      outline: `1px solid ${theme.colors.surface.background.level1.lowContrast}`,
-      boxShadow: `0px 0px 0px 4px ${getIn(
-        theme.colors,
-        tablePagination.pageSelectionButton.focusRingColor,
-      )}`,
-    },
+    '&:focus-visible': getFocusRingStyles({ theme }),
   },
   '&:active': {
     backgroundColor: isSelected
@@ -234,7 +229,7 @@ const _TablePagination = ({
     >
       {showLabel && !onMobile && (
         <BaseBox display="flex" justifyContent="center" alignItems="center">
-          <Text size="medium" weight="bold">
+          <Text size="medium" weight="semibold">
             {label ?? defaultLabel}
           </Text>
         </BaseBox>
diff --git a/packages/blade/src/components/Table/TableToolbar.web.tsx b/packages/blade/src/components/Table/TableToolbar.web.tsx
index 8e27a7ac6eb..7536392674c 100644
--- a/packages/blade/src/components/Table/TableToolbar.web.tsx
+++ b/packages/blade/src/components/Table/TableToolbar.web.tsx
@@ -58,7 +58,7 @@ const _TableToolbar = ({
     deselectAllRows,
     currentPaginationState,
     totalItems,
-    surfaceLevel,
+    backgroundColor,
   } = useTableContext();
   const { platform } = useTheme();
   const isSelected = selectedRows && selectedRows.length > 0;
@@ -83,7 +83,7 @@ const _TableToolbar = ({
   );
 
   return (
-    <BaseBox backgroundColor={`surface.background.level${surfaceLevel}.lowContrast`}>
+    <BaseBox backgroundColor={backgroundColor}>
       <ToolbarWrapper
         display="flex"
         backgroundColor={
@@ -96,7 +96,11 @@ const _TableToolbar = ({
       >
         <BaseBox display="flex" alignItems="center" flex={1}>
           <BaseBox>
-            <Text size="medium" weight="bold">
+            <Text
+              size="medium"
+              weight="medium"
+              color={isSelected ? 'surface.text.gray.normal' : 'surface.text.gray.subtle'}
+            >
               {selectedTitle ?? title ?? defaultTitle}
             </Text>
           </BaseBox>
diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx
index 933931044aa..2d6e61a7f43 100644
--- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx
+++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx
@@ -387,50 +387,6 @@ describe('<Table />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should render table with surfaceLevel', () => {
-    const { container } = renderWithTheme(
-      <Table data={{ nodes: nodes.slice(0, 2) }} surfaceLevel={3}>
-        {(tableData) => (
-          <>
-            <TableHeader>
-              <TableHeaderRow>
-                <TableHeaderCell>Payment ID</TableHeaderCell>
-                <TableHeaderCell>Amount</TableHeaderCell>
-                <TableHeaderCell>Status</TableHeaderCell>
-                <TableHeaderCell>Type</TableHeaderCell>
-                <TableHeaderCell>Method</TableHeaderCell>
-                <TableHeaderCell>Name</TableHeaderCell>
-              </TableHeaderRow>
-            </TableHeader>
-            <TableBody>
-              {tableData.map((tableItem, index) => (
-                <TableRow item={tableItem} key={index}>
-                  <TableCell>{tableItem.paymentId}</TableCell>
-                  <TableCell>{tableItem.amount}</TableCell>
-                  <TableCell>{tableItem.status}</TableCell>
-                  <TableCell>{tableItem.type}</TableCell>
-                  <TableCell>{tableItem.method}</TableCell>
-                  <TableCell>{tableItem.name}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-            <TableFooter>
-              <TableFooterRow>
-                <TableFooterCell>-</TableFooterCell>
-                <TableFooterCell>-</TableFooterCell>
-                <TableFooterCell>-</TableFooterCell>
-                <TableFooterCell>-</TableFooterCell>
-                <TableFooterCell>-</TableFooterCell>
-                <TableFooterCell>-</TableFooterCell>
-              </TableFooterRow>
-            </TableFooter>
-          </>
-        )}
-      </Table>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
   it('should render table with isLoading', () => {
     const { container } = renderWithTheme(
       <Table data={{ nodes: nodes.slice(0, 2) }} isLoading={true}>
diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
index 13ba2a8b2f9..4e32a731b44 100644
--- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
+++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<Table /> should render table 1`] = `
   flex-direction: row;
   padding: 12px;
   gap: 16px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c4.c4.c4.c4.c4 {
@@ -42,7 +42,7 @@ exports[`<Table /> should render table 1`] = `
   align-items: center;
 }
 
-.c11.c11.c11.c11.c11 {
+.c12.c12.c12.c12.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -54,7 +54,7 @@ exports[`<Table /> should render table 1`] = `
   height: 100%;
 }
 
-.c12.c12.c12.c12.c12 {
+.c13.c13.c13.c13.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -70,78 +70,109 @@ exports[`<Table /> should render table 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c14.c14.c14.c14.c14 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+.c8.c8.c8.c8.c8 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c15.c15.c15.c15.c15 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 {
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 {
   border: none;
   -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 tr:last-child .cell-wrapper {
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 tr:last-child .cell-wrapper {
   border-bottom: none;
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-single-selected .cell-wrapper-base,
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-selected .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected .cell-wrapper-base,
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected .cell-wrapper-base {
+  background-color: hsla(227,100%,59%,0.09);
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
+  background-color: hsla(227,100%,59%,0.09);
 }
 
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
+.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 > div:first-child {
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 > div:first-child {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
 }
 
-.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
+.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11:focus-visible {
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 {
+.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14.c14 {
   -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
   transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
   background-color: transparent;
@@ -151,40 +182,46 @@ exports[`<Table /> should render table 1`] = `
   padding-right: 12px;
   height: 100%;
   border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 {
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
   background-color: transparent;
 }
 
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
+.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10:focus {
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 {
-  background-color: hsla(216,15%,54%,0.09);
+.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 {
+  background-color: hsla(211,20%,52%,0.09);
 }
 
-.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 tr:last-child th {
+.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 tr:last-child th {
   border-bottom: none;
 }
 
-.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 {
+.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17 {
   height: 100%;
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
 }
 
-.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 > div {
-  background-color: hsla(216,15%,54%,0.09);
+.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17.c17 > div {
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -204,19 +241,19 @@ exports[`<Table /> should render table 1`] = `
 }
 
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
-  background-color: hsla(0,0%,100%,1);
   height: 100%;
+  background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
   cursor: auto;
 }
 
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 > div {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -240,8 +277,14 @@ exports[`<Table /> should render table 1`] = `
 }
 
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
-  outline: none;
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -250,31 +293,31 @@ exports[`<Table /> should render table 1`] = `
 }
 
 @media screen and (min-width:320px) {
-  .c12.c12.c12.c12.c12 {
+  .c13.c13.c13.c13.c13 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c12.c12.c12.c12.c12 {
+  .c13.c13.c13.c13.c13 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c12.c12.c12.c12.c12 {
+  .c13.c13.c13.c13.c13 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c12.c12.c12.c12.c12 {
+  .c13.c13.c13.c13.c13 {
     pointer-events: auto;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c12.c12.c12.c12.c12 {
+  .c13.c13.c13.c13.c13 {
     pointer-events: auto;
   }
 }
@@ -311,7 +354,7 @@ exports[`<Table /> should render table 1`] = `
       </div>
     </div>
     <table
-      class="css-1ja8l55-Table"
+      class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
       role="table"
@@ -339,7 +382,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 Payment ID
@@ -357,7 +400,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 Amount
@@ -375,7 +418,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 Status
@@ -393,7 +436,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 Type
@@ -411,7 +454,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 Method
@@ -429,7 +472,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 Name
@@ -439,18 +482,18 @@ exports[`<Table /> should render table 1`] = `
         </tr>
       </thead>
       <tbody
-        class="c8 css-8eb0m3-Body"
+        class="c9 css-8eb0m3-Body"
         data-blade-component="table-body"
         data-table-library_body=""
       >
         <tr
-          class="tr tr-body c9 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -458,16 +501,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     rzp01
@@ -477,7 +520,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -485,11 +528,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -499,7 +542,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -507,16 +550,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     pending
@@ -526,7 +569,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -534,16 +577,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     credit
@@ -553,7 +596,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -561,16 +604,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -580,7 +623,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -588,16 +631,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     John Doe
@@ -608,13 +651,13 @@ exports[`<Table /> should render table 1`] = `
           </td>
         </tr>
         <tr
-          class="tr tr-body c9 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -622,16 +665,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     rzp02
@@ -641,7 +684,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -649,11 +692,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -663,7 +706,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -671,16 +714,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     pending
@@ -690,7 +733,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -698,16 +741,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     credit
@@ -717,7 +760,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -725,16 +768,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     UPI
@@ -744,7 +787,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -752,16 +795,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     Jane Doe
@@ -772,13 +815,13 @@ exports[`<Table /> should render table 1`] = `
           </td>
         </tr>
         <tr
-          class="tr tr-body c9 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -786,16 +829,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     rzp03
@@ -805,7 +848,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -813,11 +856,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -827,7 +870,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -835,16 +878,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     failed
@@ -854,7 +897,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -862,16 +905,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     debit
@@ -881,7 +924,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -889,16 +932,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     Debit Card
@@ -908,7 +951,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -916,16 +959,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     Alice Smith
@@ -936,13 +979,13 @@ exports[`<Table /> should render table 1`] = `
           </td>
         </tr>
         <tr
-          class="tr tr-body c9 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -950,16 +993,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     rzp04
@@ -969,7 +1012,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -977,11 +1020,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -991,7 +1034,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -999,16 +1042,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     completed
@@ -1018,7 +1061,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1026,16 +1069,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     credit
@@ -1045,7 +1088,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1053,16 +1096,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     Credit Card
@@ -1072,7 +1115,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1080,16 +1123,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     Bob Smith
@@ -1100,13 +1143,13 @@ exports[`<Table /> should render table 1`] = `
           </td>
         </tr>
         <tr
-          class="tr tr-body c9 clickable css-1rzx1gz-getRowContainerStyle-Row"
+          class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
           data-table-library_tr-body=""
           role="row"
         >
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1114,16 +1157,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     rzp05
@@ -1133,7 +1176,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1141,11 +1184,11 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
@@ -1155,7 +1198,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1163,16 +1206,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     completed
@@ -1182,7 +1225,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1190,16 +1233,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     credit
@@ -1209,7 +1252,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1217,16 +1260,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     Netbanking
@@ -1236,7 +1279,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </td>
           <td
-            class="td c10 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
+            class="td c11 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
             data-blade-component="table-cell"
             data-table-library_td=""
             role="cell"
@@ -1244,16 +1287,16 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <div
-                class="c11 cell-wrapper-base"
+                class="c12 cell-wrapper-base"
                 data-blade-component="base-box"
               >
                 <div
-                  class="c12 c13 cell-wrapper"
+                  class="c13 c14 cell-wrapper"
                   data-blade-component="base-box"
                   pointer-events="auto"
                 >
                   <p
-                    class="c14"
+                    class="c15"
                     data-blade-component="text"
                   >
                     John Doe
@@ -1265,7 +1308,7 @@ exports[`<Table /> should render table 1`] = `
         </tr>
       </tbody>
       <tfoot
-        class="c15 css-1a28xfp-Header"
+        class="c16 css-1a28xfp-Header"
         data-blade-component="table-footer"
         role="rowgroup"
       >
@@ -1276,7 +1319,7 @@ exports[`<Table /> should render table 1`] = `
           role="rowfooter"
         >
           <th
-            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c17 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -1285,7 +1328,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 -
@@ -1293,7 +1336,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c17 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -1302,7 +1345,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 -
@@ -1310,7 +1353,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c17 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -1319,7 +1362,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 -
@@ -1327,7 +1370,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c17 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -1336,7 +1379,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 -
@@ -1344,7 +1387,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c17 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -1353,7 +1396,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 -
@@ -1361,7 +1404,7 @@ exports[`<Table /> should render table 1`] = `
             </div>
           </th>
           <th
-            class="th c16 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
+            class="th c17 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
             data-blade-component="table-footer-cell"
             data-hide="false"
             data-resize-min-width="75"
@@ -1370,7 +1413,7 @@ exports[`<Table /> should render table 1`] = `
           >
             <div>
               <p
-                class="c5"
+                class="c8"
                 data-blade-component="text"
               >
                 -
@@ -1420,27 +1463,35 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -1457,22 +1508,22 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected .cell-wrapper-base,
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
@@ -1487,8 +1538,14 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 {
@@ -1501,7 +1558,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   padding-right: 12px;
   height: 100%;
   border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
 }
 
@@ -1510,12 +1567,18 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
 }
 
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 tr:last-child th {
@@ -1527,14 +1590,14 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
 }
 
 .c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 > div {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1554,19 +1617,19 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
 }
 
 .c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 {
-  background-color: hsla(0,0%,100%,1);
   height: 100%;
+  background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
   cursor: auto;
 }
 
 .c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 > div {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1590,8 +1653,14 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
 }
 
 .c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2:focus-visible {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
-  outline: none;
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 @media screen and (min-width:320px) {
@@ -1630,7 +1699,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
     data-blade-component="table"
   >
     <table
-      class="css-1ja8l55-Table"
+      class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
       role="table"
@@ -2288,18 +2357,18 @@ exports[`<Table /> should render table with isLoading 1`] = `
             <path
               d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
               data-blade-component="svg-path"
-              fill="hsla(217, 18%, 45%, 1)"
+              fill="hsla(211, 29%, 26%, 1)"
               fill-opacity="0.2"
             />
             <path
               d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
               data-blade-component="svg-path"
-              fill="hsla(217, 18%, 45%, 1)"
+              fill="hsla(211, 29%, 26%, 1)"
             />
             <path
               d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
               data-blade-component="svg-path"
-              fill="hsla(217, 18%, 45%, 1)"
+              fill="hsla(211, 29%, 26%, 1)"
             />
           </svg>
         </div>
@@ -2334,7 +2403,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   z-index: 3;
   height: 100%;
   width: 100%;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
 }
 
 .c3.c3.c3.c3.c3 {
@@ -2392,27 +2461,35 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c14.c14.c14.c14.c14 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -2435,22 +2512,22 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
 
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-single-selected .cell-wrapper-base,
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-selected .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
 .c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8.c8 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
@@ -2465,8 +2542,14 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
 }
 
 .c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 {
@@ -2479,7 +2562,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   padding-right: 12px;
   height: 100%;
   border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
 }
 
@@ -2488,12 +2571,18 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
 }
 
 .c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15.c15 tr:last-child th {
@@ -2505,14 +2594,14 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
 }
 
 .c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16.c16 > div {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2532,19 +2621,19 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
-  background-color: hsla(0,0%,100%,1);
   height: 100%;
+  background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
   cursor: auto;
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 > div {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2568,8 +2657,14 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus-visible {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
-  outline: none;
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 @media screen and (min-width:320px) {
@@ -2656,7 +2751,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
       </div>
     </div>
     <table
-      class="css-1ja8l55-Table"
+      class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
       role="table"
@@ -3273,27 +3368,35 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -3310,26 +3413,26 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected .cell-wrapper-base,
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 tr:nth-child(even) .cell-wrapper {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 tr:nth-child(even) .cell-wrapper-base {
@@ -3348,8 +3451,14 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 {
@@ -3368,12 +3477,18 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
 }
 
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 tr:last-child th {
@@ -3385,14 +3500,14 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
 }
 
 .c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 > div {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3412,19 +3527,19 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
 }
 
 .c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 {
-  background-color: hsla(0,0%,100%,1);
   height: 100%;
+  background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
   cursor: auto;
 }
 
 .c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 > div {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3448,8 +3563,14 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
 }
 
 .c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2:focus-visible {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
-  outline: none;
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 @media screen and (min-width:320px) {
@@ -3488,7 +3609,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
     data-blade-component="table"
   >
     <table
-      class="css-1ja8l55-Table"
+      class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
       role="table"
@@ -4105,27 +4226,35 @@ exports[`<Table /> should render table with sticky header, footer & first column
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -4146,22 +4275,22 @@ exports[`<Table /> should render table with sticky header, footer & first column
 
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected .cell-wrapper-base,
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
 .c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7 {
@@ -4176,8 +4305,14 @@ exports[`<Table /> should render table with sticky header, footer & first column
 }
 
 .c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7.c7:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10.c10 {
@@ -4190,7 +4325,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
   padding-right: 12px;
   height: 100%;
   border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
 }
 
@@ -4199,12 +4334,18 @@ exports[`<Table /> should render table with sticky header, footer & first column
 }
 
 .c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 .c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 tr:last-child th {
@@ -4216,14 +4357,14 @@ exports[`<Table /> should render table with sticky header, footer & first column
   background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
 }
 
 .c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13.c13 > div {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4243,19 +4384,19 @@ exports[`<Table /> should render table with sticky header, footer & first column
 }
 
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 {
-  background-color: hsla(0,0%,100%,1);
   height: 100%;
+  background-color: hsla(0,0%,100%,1);
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
+  border-top-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
   border-top-style: solid;
   cursor: auto;
 }
 
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3 > div {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4279,8 +4420,14 @@ exports[`<Table /> should render table with sticky header, footer & first column
 }
 
 .c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3.c3:focus-visible {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
-  outline: none;
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: -4px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
 @media screen and (min-width:320px) {
@@ -4319,7 +4466,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
     data-blade-component="table"
   >
     <table
-      class="c1 css-adg849-Table"
+      class="c1 css-j8ql1d-Table"
       data-blade-component="table"
       data-table-library_table=""
       role="table"
@@ -6211,830 +6358,3 @@ exports[`<Table /> should render table with sticky header, footer & first column
   </div>
 </div>
 `;
-
-exports[`<Table /> should render table with surfaceLevel 1`] = `
-.c0.c0.c0.c0.c0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-}
-
-.c7.c7.c7.c7.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 100%;
-}
-
-.c8.c8.c8.c8.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  pointer-events: auto;
-}
-
-.c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c10.c10.c10.c10.c10 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 {
-  border: none;
-  -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
-  transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
-}
-
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 tr:last-child .cell-wrapper {
-  border-bottom: none;
-}
-
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected .cell-wrapper-base,
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
-}
-
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base,
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
-}
-
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base,
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.09);
-}
-
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base,
-.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4.c4 .row-select-selected:active:not(.disabled-row) .cell-wrapper-base {
-  background-color: hsla(218,89%,51%,0.18);
-}
-
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 {
-  height: 100%;
-  background-color: hsla(220,27%,98%,1);
-}
-
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6 > div:first-child {
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-}
-
-.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6.c6:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
-}
-
-.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9.c9 {
-  -webkit-transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
-  transition: background-color 150ms cubic-bezier(0.3,0,0.2,1);
-  background-color: transparent;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  padding-left: 12px;
-  padding-right: 12px;
-  height: 100%;
-  border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-bottom-style: solid;
-}
-
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5 {
-  background-color: transparent;
-}
-
-.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5.c5:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px hsla(218,89%,51%,0.09);
-}
-
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 {
-  background-color: hsla(216,15%,54%,0.09);
-}
-
-.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11.c11 tr:last-child th {
-  border-bottom: none;
-}
-
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 {
-  height: 100%;
-  background-color: hsla(220,27%,98%,1);
-  border-bottom-width: 1px;
-  border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
-  border-bottom-style: solid;
-  border-top-style: solid;
-}
-
-.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12.c12 > div {
-  background-color: hsla(216,15%,54%,0.09);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  height: 100%;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1.c1 tr:first-child th {
-  border-top: none;
-}
-
-.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 {
-  background-color: hsla(220,27%,98%,1);
-  height: 100%;
-  border-bottom-width: 1px;
-  border-top-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  border-top-color: hsla(216,15%,54%,0.18);
-  border-bottom-style: solid;
-  border-top-style: solid;
-  cursor: auto;
-}
-
-.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2 > div {
-  background-color: hsla(216,15%,54%,0.09);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 100%;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2.c2:focus-visible {
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18) inset;
-  outline: none;
-}
-
-@media screen and (min-width:320px) {
-  .c8.c8.c8.c8.c8 {
-    pointer-events: auto;
-  }
-}
-
-@media screen and (min-width:480px) {
-  .c8.c8.c8.c8.c8 {
-    pointer-events: auto;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c8.c8.c8.c8.c8 {
-    pointer-events: auto;
-  }
-}
-
-@media screen and (min-width:1024px) {
-  .c8.c8.c8.c8.c8 {
-    pointer-events: auto;
-  }
-}
-
-@media screen and (min-width:1200px) {
-  .c8.c8.c8.c8.c8 {
-    pointer-events: auto;
-  }
-}
-
-<div>
-  <div
-    class="c0"
-    data-blade-component="table"
-  >
-    <table
-      class="css-1fddph5-Table"
-      data-blade-component="table"
-      data-table-library_table=""
-      role="table"
-      style="--data-table-library_grid-template-columns: 150px 150px 150px 150px 150px 150px;"
-    >
-      <thead
-        class="c1 css-1a28xfp-Header"
-        data-blade-component="table-header"
-        role="rowgroup"
-      >
-        <tr
-          class="tr tr-header css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
-          data-blade-component="table-header-row"
-          data-table-library_tr-header=""
-          role="rowheader"
-        >
-          <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-header-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnheader"
-            tabindex="0"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                Payment ID
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-header-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnheader"
-            tabindex="0"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                Amount
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-header-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnheader"
-            tabindex="0"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                Status
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-header-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnheader"
-            tabindex="0"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                Type
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-header-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnheader"
-            tabindex="0"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                Method
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c2 css-96zqc6-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-header-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnheader"
-            tabindex="0"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                Name
-              </p>
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="c4 css-8eb0m3-Body"
-        data-blade-component="table-body"
-        data-table-library_body=""
-      >
-        <tr
-          class="tr tr-body c5 clickable css-1rzx1gz-getRowContainerStyle-Row"
-          data-blade-component="table-row"
-          data-table-library_tr-body=""
-          role="row"
-        >
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    rzp01
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  100
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    pending
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    credit
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    Netbanking
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    John Doe
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-        <tr
-          class="tr tr-body c5 clickable css-1rzx1gz-getRowContainerStyle-Row"
-          data-blade-component="table-row"
-          data-table-library_tr-body=""
-          role="row"
-        >
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    rzp02
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  240
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    pending
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    credit
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    UPI
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-          <td
-            class="td c6 css-11eh3e4-CELL_CONTAINER_STYLE-Cell"
-            data-blade-component="table-cell"
-            data-table-library_td=""
-            role="cell"
-            tabindex="0"
-          >
-            <div>
-              <div
-                class="c7 cell-wrapper-base"
-                data-blade-component="base-box"
-              >
-                <div
-                  class="c8 c9 cell-wrapper"
-                  data-blade-component="base-box"
-                  pointer-events="auto"
-                >
-                  <p
-                    class="c10"
-                    data-blade-component="text"
-                  >
-                    Jane Doe
-                  </p>
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-      <tfoot
-        class="c11 css-1a28xfp-Header"
-        data-blade-component="table-footer"
-        role="rowgroup"
-      >
-        <tr
-          class="tr tr-footer css-19bs4cg-getHeaderRowContainerStyle-HeaderRow"
-          data-blade-component="table-footer-row"
-          data-table-library_tr-header=""
-          role="rowfooter"
-        >
-          <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-footer-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnfooter"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                -
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-footer-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnfooter"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                -
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-footer-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnfooter"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                -
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-footer-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnfooter"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                -
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-footer-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnfooter"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                -
-              </p>
-            </div>
-          </th>
-          <th
-            class="th c12 css-1mmxnzc-HEADER_CELL_CONTAINER_STYLE-HeaderCell"
-            data-blade-component="table-footer-cell"
-            data-hide="false"
-            data-resize-min-width="75"
-            data-table-library_th=""
-            role="columnfooter"
-          >
-            <div>
-              <p
-                class="c3"
-                data-blade-component="text"
-              >
-                -
-              </p>
-            </div>
-          </th>
-        </tr>
-      </tfoot>
-    </table>
-  </div>
-</div>
-`;
diff --git a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx
index 05c100ec5e1..49982307b9d 100644
--- a/packages/blade/src/components/Table/docs/BasicTable.stories.tsx
+++ b/packages/blade/src/components/Table/docs/BasicTable.stories.tsx
@@ -3,12 +3,16 @@ import type { TableData, TableProps } from '../types';
 import { Table as TableComponent } from '../Table';
 import { TableHeader, TableHeaderRow, TableHeaderCell } from '../TableHeader';
 import { TableBody, TableRow, TableCell } from '../TableBody';
+import { TableToolbar, TableToolbarActions } from '../TableToolbar';
+import { TableFooter, TableFooterRow, TableFooterCell } from '../TableFooter';
+import { TablePagination } from '../TablePagination';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { Box } from '~components/Box';
 import { Amount } from '~components/Amount';
 import { Code } from '~components/Typography';
 import { Badge } from '~components/Badge';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
+import { Button } from '~components/Button';
 
 export default {
   title: 'Components/Table',
@@ -54,7 +58,7 @@ export default {
 } as Meta<TableProps<unknown>>;
 
 const nodes: Item[] = [
-  ...Array.from({ length: 5 }, (_, i) => ({
+  ...Array.from({ length: 100 }, (_, i) => ({
     id: (i + 1).toString(),
     paymentId: `rzp${Math.floor(Math.random() * 1000000)}`,
     amount: Number((Math.random() * 10000).toFixed(2)),
@@ -96,12 +100,41 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor={args.backgroundColor ?? 'surface.background.gray.intense'}
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
     >
-      <TableComponent {...args} data={data} sortFunctions={{}}>
+      <TableComponent
+        {...args}
+        data={data}
+        toolbar={
+          <TableToolbar title="Showing 1-10 [Items]" selectedTitle="Showing 1-10 [Items]">
+            <TableToolbarActions>
+              <Button variant="secondary" marginRight="spacing.2">
+                Export
+              </Button>
+              <Button>Refund</Button>
+            </TableToolbarActions>
+          </TableToolbar>
+        }
+        sortFunctions={{
+          ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)),
+          AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount),
+          PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)),
+          DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()),
+          STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)),
+        }}
+        pagination={
+          <TablePagination
+            onPageChange={console.log}
+            defaultPageSize={10}
+            onPageSizeChange={console.log}
+            showPageSizePicker
+            showPageNumberSelector
+          />
+        }
+      >
         {(tableData) => (
           <>
             <TableHeader>
@@ -142,7 +175,7 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
                           ? 'notice'
                           : tableItem.status === 'Failed'
                           ? 'negative'
-                          : 'default'
+                          : 'primary'
                       }
                     >
                       {tableItem.status}
@@ -151,6 +184,19 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
                 </TableRow>
               ))}
             </TableBody>
+            <TableFooter>
+              <TableFooterRow>
+                <TableFooterCell>Total</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                {args.selectionType === 'multiple' ? <TableFooterCell>-</TableFooterCell> : null}
+                <TableFooterCell>
+                  <Amount value={10} />
+                </TableFooterCell>
+              </TableFooterRow>
+            </TableFooter>
           </>
         )}
       </TableComponent>
diff --git a/packages/blade/src/components/Table/docs/TableExamples.stories.tsx b/packages/blade/src/components/Table/docs/TableExamples.stories.tsx
index 7d55d25ae88..9a407a0a0d5 100644
--- a/packages/blade/src/components/Table/docs/TableExamples.stories.tsx
+++ b/packages/blade/src/components/Table/docs/TableExamples.stories.tsx
@@ -12,7 +12,7 @@ import {
   TableWithStickyFirstColumnStory,
   TableWithPaginationStory,
   TableWithDisabledRowsStory,
-  TableWithSurfaceLevelsStory,
+  TableWithBackgroundColorStory,
   TableWithIsLoadingStory,
   TableWithIsRefreshingStory,
 } from './stories';
@@ -117,10 +117,10 @@ export const TableWithDisabledRows = (): React.ReactElement => {
   );
 };
 
-export const TableWithSurfaceLevels = (): React.ReactElement => {
+export const TableWithBackgroundColor = (): React.ReactElement => {
   return (
     <Sandbox padding="spacing.0" editorHeight="90vh">
-      {TableWithSurfaceLevelsStory}
+      {TableWithBackgroundColorStory}
     </Sandbox>
   );
 };
diff --git a/packages/blade/src/components/Table/docs/stories.ts b/packages/blade/src/components/Table/docs/stories.ts
index ee894f8a02e..7e40cc96d2e 100644
--- a/packages/blade/src/components/Table/docs/stories.ts
+++ b/packages/blade/src/components/Table/docs/stories.ts
@@ -45,7 +45,7 @@ const data: TableData<Item> = {
 function App(): React.ReactElement {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -142,7 +142,7 @@ const data: TableData<Item> = {
 function App(): React.ReactElement {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -322,7 +322,7 @@ const data: TableData<Item> = {
 function App(): React.ReactElement {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -448,7 +448,7 @@ function App(): React.ReactElement {
   const [selectedItem, setSelectedItem] = useState<Item | undefined>(undefined);
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -582,7 +582,7 @@ function App(): React.ReactElement {
   const selectedItemsLength = selectedItems.length;
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -724,7 +724,7 @@ function App(): React.ReactElement {
   const onMobile = platform === 'onMobile';
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -859,7 +859,7 @@ function App(): React.ReactElement {
 
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -999,7 +999,7 @@ const data: TableData<Item> = {
 function App(): React.ReactElement {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -1126,7 +1126,7 @@ function App(): React.ReactElement {
 
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -1278,7 +1278,7 @@ function App(): React.ReactElement {
 
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -1362,7 +1362,7 @@ function App(): React.ReactElement {
 export default App;
 `;
 
-const TableWithSurfaceLevelsStory = `
+const TableWithBackgroundColorStory = `
 import {
   Table,
   Heading,
@@ -1411,38 +1411,38 @@ const data: TableData<Item> = {
   nodes,
 };
 
-type SurfaceLevels = 1 | 2 | 3;
+type Emphasis = 'subtle' | 'intense' | 'moderate'
 
 function App(): React.ReactElement {
-  const [surfaceLevel, setSurfaceLevel] = useState<SurfaceLevels>(1);
+  const [emphasis, setEmphasis] = useState<Emphasis>('subtle');
   return (
     <Box
-      backgroundColor={\`surface.background.level\${surfaceLevel}.lowContrast\`}
+      backgroundColor={\`surface.background.gray\${emphasis}\`}
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
     >
       <Box marginBottom="spacing.4">
         <Heading marginBottom="spacing.3">
-          Table on various Surface Levels
+          Table on various background colors
         </Heading>
         <RadioGroup
-          label="Select Surface Level"
+          label="Select Emphasis Level"
           onChange={({ value }) =>
-            setSurfaceLevel(Number(value) as SurfaceLevels)
+            setEmphasis(Number(value) as Emphasis)
           }
-          value={\`\${surfaceLevel}\`}
+          value={\`\${emphasis}\`}
         >
-          <Radio value="1">1</Radio>
-          <Radio value="2">2</Radio>
-          <Radio value="3">3</Radio>
+          <Radio value="subtle">subtle</Radio>
+          <Radio value="moderate">moderate</Radio>
+          <Radio value="intense">intense</Radio>
         </RadioGroup>
       </Box>
       <Table
         selectionType="multiple"
         showStripedRows={true}
         data={data}
-        surfaceLevel={surfaceLevel}
+        backgroundColor={emphasis}
       >
         {(tableData) => (
           <>
@@ -1552,7 +1552,7 @@ function App(): React.ReactElement {
 
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
     >
       <Heading>Table with initial isLoading state</Heading>
@@ -1720,7 +1720,7 @@ function App(): React.ReactElement {
 
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"
@@ -1828,7 +1828,7 @@ export {
   TableWithStickyFirstColumnStory,
   TableWithPaginationStory,
   TableWithDisabledRowsStory,
-  TableWithSurfaceLevelsStory,
+  TableWithBackgroundColorStory,
   TableWithIsLoadingStory,
   TableWithIsRefreshingStory,
 };
diff --git a/packages/blade/src/components/Table/tokens.ts b/packages/blade/src/components/Table/tokens.ts
index 2ec94685fd2..aaed2dc6950 100644
--- a/packages/blade/src/components/Table/tokens.ts
+++ b/packages/blade/src/components/Table/tokens.ts
@@ -6,15 +6,15 @@ const refreshWrapperZIndex = 3;
 
 const checkboxCellWidth = size['44'];
 
+const tableBackgroundColor = 'surface.background.gray.intense';
 const tableHeader = {
   paddingTop: 'spacing.5',
   paddingBottom: 'spacing.5',
   paddingLeft: 'spacing.4',
   paddingRight: 'spacing.4',
-  backgroundColor: 'brand.gray.a50.lowContrast',
+  backgroundColor: 'interactive.background.gray.default',
   borderBottomAndTopWidth: 'thin',
-  borderBottomAndTopColor: 'surface.border.normal.lowContrast',
-  focusRingColor: 'brand.primary.400',
+  borderBottomAndTopColor: 'surface.border.gray.muted',
 } as const;
 
 const tableFooter = {
@@ -23,9 +23,8 @@ const tableFooter = {
   paddingLeft: 'spacing.4',
   paddingRight: 'spacing.4',
   borderBottomAndTopWidth: 'thin',
-  borderBottomAndTopColor: 'surface.border.normal.lowContrast',
-  backgroundColor: 'brand.gray.a50.lowContrast',
-  focusRingColor: 'brand.primary.400',
+  borderBottomAndTopColor: 'surface.border.gray.muted',
+  backgroundColor: 'interactive.background.gray.default',
 } as const;
 
 const tableRow = {
@@ -47,20 +46,21 @@ const tableRow = {
   },
   nonStripe: {
     backgroundColor: 'transparent',
-    backgroundColorHover: 'brand.gray.a50.lowContrast',
+    backgroundColorHover: 'interactive.background.gray.default',
     backgroundColorFocus: 'transparent',
-    backgroundColorActive: 'brand.gray.a100.lowContrast',
-    backgroundColorSelected: 'brand.primary.300',
-    backgroundColorSelectedHover: 'brand.primary.400',
-    backgroundColorSelectedFocus: 'brand.primary.300',
-    backgroundColorSelectedActive: 'brand.primary.400',
+    // TODO: Rebranding - on design side: explore pressed state color change, right now both hover & active are same
+    backgroundColorActive: 'interactive.background.gray.default',
+    backgroundColorSelected: 'interactive.background.primary.faded',
+    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',
+    backgroundColorSelectedFocus: 'interactive.background.primary.faded',
+    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',
   },
   nonStripeWrapper: {
     // not used anywhere
     backgroundColor: 'transparent',
     backgroundColorHover: 'transparent',
     backgroundColorFocus: 'transparent',
-    backgroundColorActive: 'brand.gray.a50.lowContrast',
+    backgroundColorActive: 'interactive.background.gray.default',
     backgroundColorSelected: 'transparent',
     backgroundColorSelectedHover: 'transparent',
     backgroundColorSelectedFocus: 'transparent',
@@ -68,54 +68,52 @@ const tableRow = {
   },
   stripe: {
     backgroundColor: 'transparent',
-    backgroundColorHover: 'brand.gray.a50.lowContrast',
+    backgroundColorHover: 'interactive.background.gray.default',
     backgroundColorFocus: 'transparent',
-    backgroundColorActive: 'brand.gray.a100.lowContrast',
-    backgroundColorSelected: 'brand.primary.300',
-    backgroundColorSelectedHover: 'brand.primary.400',
-    backgroundColorSelectedFocus: 'brand.primary.300',
-    backgroundColorSelectedActive: 'brand.primary.400',
+    backgroundColorActive: 'interactive.background.gray.default',
+    backgroundColorSelected: 'interactive.background.primary.faded',
+    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',
+    backgroundColorSelectedFocus: 'interactive.background.primary.faded',
+    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',
   },
   stripeWrapper: {
-    backgroundColor: 'brand.gray.a50.lowContrast',
-    backgroundColorHover: 'brand.gray.a50.lowContrast',
-    backgroundColorFocus: 'brand.gray.a50.lowContrast',
-    backgroundColorActive: 'brand.gray.a100.lowContrast',
-    backgroundColorSelected: 'brand.primary.300',
-    backgroundColorSelectedHover: 'brand.primary.300',
-    backgroundColorSelectedFocus: 'brand.primary.300',
-    backgroundColorSelectedActive: 'brand.primary.400',
+    backgroundColor: 'interactive.background.gray.default',
+    backgroundColorHover: 'interactive.background.gray.default',
+    backgroundColorFocus: 'interactive.background.gray.default',
+    backgroundColorActive: 'interactive.background.gray.default',
+    backgroundColorSelected: 'interactive.background.primary.faded',
+    backgroundColorSelectedHover: 'interactive.background.primary.faded',
+    backgroundColorSelectedFocus: 'interactive.background.primary.faded',
+    backgroundColorSelectedActive: 'interactive.background.primary.faded',
   },
   borderBottomWidth: 'thin',
-  borderBottomColor: 'surface.border.normal.lowContrast',
+  borderBottomColor: 'surface.border.gray.muted',
   backgroundColorMotionEasing: 'easing.standard.effective',
   backgroundColorMotionDuration: 'duration.xquick',
-  focusRingColor: 'brand.primary.400',
 } as const;
 
 const tableToolbar = {
   backgroundColor: 'transparent',
-  backgroundColorSelected: 'brand.primary.300',
+  backgroundColorSelected: 'interactive.background.primary.faded',
   backgroundColorMotionEasing: 'easing.standard.effective',
   backgroundColorMotionDuration: 'duration.xquick',
 } as const;
 
 const tablePagination = {
-  backgroundColor: ' surface.background.level2.lowContrast',
+  backgroundColor: 'transparent',
   padding: 'spacing.4',
   pageSelectionButton: {
-    backgroundColor: 'surface.background.level2.lowContrast',
-    backgroundColorHover: 'brand.gray.a50.lowContrast',
-    backgroundColorActive: 'brand.gray.a100.lowContrast',
-    backgroundColorSelected: 'brand.primary.300',
-    backgroundColorSelectedHover: 'brand.primary.400',
-    backgroundColorSelectedActive: 'brand.primary.400',
-    backgroundColorDisabled: 'surface.background.level2.lowContrast',
+    backgroundColor: 'transparent',
+    backgroundColorHover: 'interactive.background.gray.default',
+    backgroundColorActive: 'interactive.background.gray.highlighted',
+    backgroundColorSelected: 'interactive.background.primary.faded',
+    backgroundColorSelectedHover: 'interactive.background.primary.fadedHighlighted',
+    backgroundColorSelectedActive: 'interactive.background.primary.fadedHighlighted',
     padding: 'spacing.2',
     borderRadius: 'small',
-    focusRingColor: 'brand.primary.400',
-    textColor: 'surface.text.subtle.lowContrast',
-    textColorSelected: 'brand.primary.500',
+    focusRingColor: 'surface.border.primary.muted',
+    textColor: 'surface.text.gray.subtle',
+    textColorSelected: 'surface.text.primary.normal',
     height: size['32'],
     width: size['32'],
   },
@@ -129,6 +127,7 @@ export {
   tableToolbar,
   tablePagination,
   refreshWrapperZIndex,
+  tableBackgroundColor,
   firstColumnStickyHeaderFooterZIndex,
   checkboxCellWidth,
 };
diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts
index f317670394e..50965363e4d 100644
--- a/packages/blade/src/components/Table/types.ts
+++ b/packages/blade/src/components/Table/types.ts
@@ -1,6 +1,7 @@
+import type { Theme } from '~components/BladeProvider';
 import type { BoxProps } from '~components/Box';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
-import type { SurfaceLevels } from '~tokens/theme/theme';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 
 type TableNode<Item> = Item & {
   id: Identifier;
@@ -10,6 +11,10 @@ type TableData<Item> = {
   nodes: TableNode<Item>[];
 };
 
+type TableBackgroundColors = `surface.background.gray.${DotNotationToken<
+  Theme['colors']['surface']['background']['gray']
+>}`;
+
 type TableHeaderProps = {
   /**
    * The children of TableHeader should be TableHeaderRow
@@ -135,12 +140,6 @@ type TableProps<Item> = {
    * The default value is `repeat(${columnCount},minmax(100px, 1fr))`.
    **/
   gridTemplateColumns?: string;
-  /**
-   * The surfaceLevel prop determines the surface level of the table.
-   * The surfaceLevel prop can be 1, 2, 3, 4 or 5.
-   * The default value is `2`.
-   **/
-  surfaceLevel?: SurfaceLevels;
   /**
    * The isLoading prop determines whether the table is loading or not.
    * The default value is `false`.
@@ -334,4 +333,5 @@ export type {
   TablePaginationProps,
   TableToolbarProps,
   TableToolbarActionsProps,
+  TableBackgroundColors,
 };
diff --git a/packages/blade/src/components/Tabs/TabIndicator.native.tsx b/packages/blade/src/components/Tabs/TabIndicator.native.tsx
index d5f9c17124e..fd94ad301d3 100644
--- a/packages/blade/src/components/Tabs/TabIndicator.native.tsx
+++ b/packages/blade/src/components/Tabs/TabIndicator.native.tsx
@@ -26,15 +26,15 @@ const TabIndicator = (props: TabBarIndicatorProps<any>): React.ReactElement => {
         pointerEvents: 'none',
         ...(isFilled
           ? {
-              height: props.layout.height - theme.border.width.thick - theme.spacing[2] * 2,
+              height: props.layout.height - theme.border.width.thicker - theme.spacing[2] * 2,
               left: theme.spacing[2],
               bottom: theme.spacing[2],
-              backgroundColor: theme.colors.brand.primary[300],
+              backgroundColor: theme.colors.interactive.background.primary.faded,
               borderRadius: theme.border.radius.small,
             }
           : {
-              height: theme.border.width.thick,
-              backgroundColor: theme.colors.brand.primary[500],
+              height: theme.border.width.thicker,
+              backgroundColor: theme.colors.interactive.border.primary.default,
             }),
       }}
     />
diff --git a/packages/blade/src/components/Tabs/TabIndicator.web.tsx b/packages/blade/src/components/Tabs/TabIndicator.web.tsx
index 48ba69a207d..76806f9a3b9 100644
--- a/packages/blade/src/components/Tabs/TabIndicator.web.tsx
+++ b/packages/blade/src/components/Tabs/TabIndicator.web.tsx
@@ -14,7 +14,7 @@ const StyledTabIndicator = styled(BaseBox)(({ theme }) => {
   return {
     cursor: 'pointer',
     '&:hover': {
-      backgroundColor: theme.colors.brand.primary[400],
+      backgroundColor: theme.colors.interactive.background.primary.fadedHighlighted,
     },
   };
 });
@@ -48,7 +48,7 @@ const TabIndicator = ({
         variant === 'filled'
           ? // on filled variant the indicator is positioned on top of the tab item
             // so no need to add offsetHeight
-            activeTabItem.offsetTop - 1
+            activeTabItem.offsetTop
           : activeTabItem.offsetTop + activeTabItem.offsetHeight - 1.5,
     });
   }, [baseId, selectedValue, tabListContainerRef, variant]);
@@ -106,11 +106,12 @@ const TabIndicator = ({
   if (variant === 'filled') {
     return (
       <StyledTabIndicator
+        pointerEvents="none"
         position="absolute"
         left="0px"
         top="0px"
         borderRadius="small"
-        backgroundColor="brand.primary.300"
+        backgroundColor="interactive.background.primary.faded"
         style={{
           ...transitionProps,
           width: `${activeElementDimensions.width}px`,
@@ -127,9 +128,9 @@ const TabIndicator = ({
       pointerEvents="none"
       position="absolute"
       left="0%"
-      top="0px"
-      height="1.5px"
-      backgroundColor="brand.primary.500"
+      top="-0.5px"
+      height="2px"
+      backgroundColor="interactive.background.primary.default"
       style={{
         ...transitionProps,
         width: `${activeElementDimensions.width}px`,
diff --git a/packages/blade/src/components/Tabs/TabItem.web.tsx b/packages/blade/src/components/Tabs/TabItem.web.tsx
index 8103e3b53a5..464400439b2 100644
--- a/packages/blade/src/components/Tabs/TabItem.web.tsx
+++ b/packages/blade/src/components/Tabs/TabItem.web.tsx
@@ -4,15 +4,15 @@ import React from 'react';
 import { CompositeItem } from '@floating-ui/react';
 import type { TabItemProps, TabsProps } from './types';
 import { useTabsContext } from './TabsContext';
-import { backgroundColor, paddingY, paddingX, textColor } from './tabTokens';
+import { backgroundColor, paddingY, paddingX, textColor, iconColor } from './tabTokens';
 import { iconSizeMap, useTabsItemPropRestriction } from './utils';
-import get from '~utils/lodashButBetter/get';
 import { Text } from '~components/Typography';
 import { castWebType, getMediaQuery, makeBorderSize, makeMotionTime, makeSpace } from '~utils';
 import useInteraction from '~utils/useInteraction';
 import { makeAccessible } from '~utils/makeAccessible';
 import { breakpoints } from '~tokens/global';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
+import getIn from '~utils/lodashButBetter/get';
 
 const StyledTabButton = styled.button<{
   size: TabsProps['size'];
@@ -24,15 +24,10 @@ const StyledTabButton = styled.button<{
   const isFilled = variant === 'filled';
   const orientation = isVertical ? 'vertical' : 'horizontal';
   const border = isVertical ? 'borderLeft' : 'borderBottom';
-  const selectedState = isSelected ? 'selected' : 'unselected';
+  const selectedState: 'selected' | 'unselected' = isSelected ? 'selected' : 'unselected';
   const _variant = variant === 'borderless' ? 'bordered' : variant;
   const background = backgroundColor[selectedState][_variant];
 
-  const getColor = (value: string): string => {
-    if (value === 'transparent') return 'transparent';
-    return get(theme, value);
-  };
-
   return {
     appearance: 'none',
     textDecoration: 'none',
@@ -46,47 +41,50 @@ const StyledTabButton = styled.button<{
     width: isFullWidthTabItem ? '100%' : undefined,
 
     // Padding
-    paddingTop: makeSpace(get(theme, paddingY[_variant][orientation].desktop[size!])),
-    paddingBottom: makeSpace(get(theme, paddingY[_variant][orientation].desktop[size!])),
-    paddingLeft: makeSpace(get(theme, paddingX[_variant][orientation].desktop[size!])),
-    paddingRight: makeSpace(get(theme, paddingX[_variant][orientation].desktop[size!])),
+    paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),
+    paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].desktop[size!])),
+    paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),
+    paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].desktop[size!])),
 
     [`@media ${getMediaQuery({ min: breakpoints.base, max: breakpoints.m })}`]: {
-      paddingTop: makeSpace(get(theme, paddingY[_variant][orientation].mobile[size!])),
-      paddingBottom: makeSpace(get(theme, paddingY[_variant][orientation].mobile[size!])),
-      paddingLeft: makeSpace(get(theme, paddingX[_variant][orientation].mobile[size!])),
-      paddingRight: makeSpace(get(theme, paddingX[_variant][orientation].mobile[size!])),
+      paddingTop: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),
+      paddingBottom: makeSpace(getIn(theme, paddingY[_variant][orientation].mobile[size!])),
+      paddingLeft: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),
+      paddingRight: makeSpace(getIn(theme, paddingX[_variant][orientation].mobile[size!])),
     },
 
     // colors
     backgroundColor:
-      isSelected && isFilled && !isVertical ? 'transparent' : getColor(background.default),
+      isSelected && isFilled && !isVertical ? 'transparent' : getIn(theme, background.default),
     borderRadius: isFilled && !isVertical ? theme.border.radius.small : 0,
     [`${border}Style`]: 'solid',
     [`${border}Width`]: isFilled
       ? 0
       : makeBorderSize(isVertical ? theme.border.width.thick : theme.border.width.thin),
-    [`${border}Color`]: isVertical && isSelected ? theme.colors.brand.primary[500] : 'transparent',
+    [`${border}Color`]:
+      isVertical && isSelected ? theme.colors.interactive.border.primary.default : 'transparent',
 
     // states
     '&:hover': {
       [`${border}Color`]:
         isVertical && isSelected
-          ? theme.colors.brand.primary[500]
-          : theme.colors.surface.border.normal.lowContrast,
+          ? theme.colors.interactive.border.primary.default
+          : theme.colors.interactive.border.gray.highlighted,
       backgroundColor:
         // Don't want to show hover state on filled tabs when vertical because
         // The hover color needs to be on the TabIndicator instead.
-        isSelected && isFilled && !isVertical ? 'transparent' : getColor(background.hover),
+        isSelected && isFilled && !isVertical
+          ? 'transparent'
+          : getIn(theme, background.highlighted),
     },
     '&:disabled': {
       cursor: 'not-allowed',
-      backgroundColor: getColor(background.disabled),
+      backgroundColor: getIn(theme, background.disabled),
     },
     '&:focus-visible': {
       borderRadius: makeSpace(theme.border.radius.medium),
-      boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,
-      backgroundColor: getColor(background.focus),
+      boxShadow: `0px 0px 0px 4px ${theme.colors.surface.border.primary.muted}`,
+      backgroundColor: getIn(theme, background.highlighted),
     },
 
     transitionProperty: 'all',
@@ -126,6 +124,14 @@ const TabItem = ({
   const tabItemId = `${baseId}-${value}-tabitem`;
   const isFilled = variant === 'filled';
 
+  const interactionMap = {
+    default: 'default',
+    hover: 'highlighted',
+    focus: 'highlighted',
+    disabled: 'disabled',
+  } as const;
+  const interaction = isDisabled ? 'disabled' : interactionMap[currentInteraction];
+
   return (
     <CompositeItem
       render={
@@ -152,19 +158,12 @@ const TabItem = ({
           {...metaAttribute({ name: MetaConstants.TabItem })}
         >
           {Leading ? (
-            <Leading
-              size={iconSizeMap[size!]}
-              color={
-                isSelected
-                  ? `brand.primary.500`
-                  : `surface.action.icon.${currentInteraction}.lowContrast`
-              }
-            />
+            <Leading size={iconSizeMap[size!]} color={iconColor[selectedState][interaction]} />
           ) : null}
           <Text
-            color={textColor[selectedState][isDisabled ? 'disabled' : currentInteraction]}
+            color={textColor[selectedState][interaction]}
             size={size === 'medium' ? 'medium' : 'large'}
-            weight="bold"
+            weight="semibold"
           >
             {children}
           </Text>
diff --git a/packages/blade/src/components/Tabs/TabList.web.tsx b/packages/blade/src/components/Tabs/TabList.web.tsx
index 1c2f4b03f6c..05bf0b2610a 100644
--- a/packages/blade/src/components/Tabs/TabList.web.tsx
+++ b/packages/blade/src/components/Tabs/TabList.web.tsx
@@ -3,6 +3,7 @@ import { Composite } from '@floating-ui/react';
 import styled from 'styled-components';
 import { useTabsContext } from './TabsContext';
 import { TabIndicator } from './TabIndicator';
+import { trackColor } from './tabTokens';
 import BaseBox from '~components/Box/BaseBox';
 import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';
 import { Divider } from '~components/Divider';
@@ -57,11 +58,12 @@ const TabList = ({
               <BaseBox flexDirection="row" display="flex">
                 {isVertical && isBordered ? (
                   <BaseBox
-                    width="1.5px"
+                    width="0px"
                     height="auto"
                     flexGrow={1}
                     flexShrink={0}
-                    backgroundColor="surface.border.normal.lowContrast"
+                    borderColor={trackColor}
+                    borderWidth="thin"
                     style={{ transform: 'translateX(1.5px)' }}
                   />
                 ) : null}
@@ -80,10 +82,10 @@ const TabList = ({
                     ? {
                         borderRadius: 'small',
                         borderWidth: 'thin',
-                        borderColor: 'surface.border.normal.lowContrast',
+                        borderColor: 'interactive.border.gray.faded',
                         padding: 'spacing.2',
                         gap: isVertical ? 'spacing.0' : 'spacing.1',
-                        backgroundColor: 'surface.background.level2.lowContrast',
+                        backgroundColor: 'surface.background.gray.intense',
                       }
                     : {
                         padding: 'spacing.0',
@@ -121,7 +123,7 @@ const TabList = ({
       {!isVertical && isBordered ? (
         <BaseBox
           style={{ transform: 'translateY(-1px)' }}
-          borderBottomColor="surface.border.normal.lowContrast"
+          borderBottomColor={trackColor}
           borderBottomWidth="thin"
         />
       ) : null}
diff --git a/packages/blade/src/components/Tabs/Tabs.native.tsx b/packages/blade/src/components/Tabs/Tabs.native.tsx
index 876878e0f95..090fba0b789 100644
--- a/packages/blade/src/components/Tabs/Tabs.native.tsx
+++ b/packages/blade/src/components/Tabs/Tabs.native.tsx
@@ -8,7 +8,7 @@ import { Dimensions } from 'react-native';
 import type { TabsProps } from './types';
 import { TabsContext } from './TabsContext';
 import { StyledTabButton } from './TabItem.native';
-import { textColor } from './tabTokens';
+import { iconColor, textColor, trackColor } from './tabTokens';
 import { iconSizeMap, useTabsItemPropRestriction } from './utils';
 import { TabIndicator } from './TabIndicator';
 import { SafeSceneMap } from './SafeSceneMap.native';
@@ -19,6 +19,7 @@ import { useTheme } from '~components/BladeProvider';
 import { useControllableState } from '~utils/useControllable';
 import { Divider } from '~components/Divider';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
+import getIn from '~utils/lodashButBetter/get';
 
 const initialLayout = {
   height: 0,
@@ -139,19 +140,12 @@ const Tabs = ({
         >
           <Box display="flex" alignItems="center" flexDirection="row" gap="spacing.3">
             {Leading ? (
-              <Leading
-                size={iconSizeMap[size]}
-                color={
-                  selectedState === 'selected'
-                    ? 'brand.primary.500'
-                    : 'surface.action.icon.default.lowContrast'
-                }
-              />
+              <Leading size={iconSizeMap[size]} color={iconColor[selectedState].default} />
             ) : null}
             <Text
               color={textColor[selectedState].default}
               size={size === 'medium' ? 'medium' : 'large'}
-              weight="bold"
+              weight="semibold"
             >
               {title}
             </Text>
@@ -183,8 +177,8 @@ const Tabs = ({
                 shadowColor: 'transparent',
                 borderRadius: theme.border.radius.small,
                 borderWidth: theme.border.width.thick,
-                borderColor: theme.colors.surface.border.normal.lowContrast,
-                backgroundColor: theme.colors.surface.background.level2.lowContrast,
+                borderColor: theme.colors.interactive.border.gray.faded,
+                backgroundColor: theme.colors.surface.background.gray.intense,
                 padding: theme.spacing[2],
               }
             : {
@@ -192,7 +186,7 @@ const Tabs = ({
                 shadowColor: 'transparent',
                 backgroundColor: 'transparent',
                 ...(variant !== 'borderless' && {
-                  borderBottomColor: theme.colors.surface.border.normal.lowContrast,
+                  borderBottomColor: getIn(theme.colors, trackColor),
                   borderBottomWidth: theme.border.width.thin,
                 }),
               }),
diff --git a/packages/blade/src/components/Tabs/Tabs.stories.tsx b/packages/blade/src/components/Tabs/Tabs.stories.tsx
index a2cca49c87a..cedb2ce6223 100644
--- a/packages/blade/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/blade/src/components/Tabs/Tabs.stories.tsx
@@ -6,7 +6,7 @@ import StoryRouter from 'storybook-react-router';
 import { Route, useHistory } from 'react-router-dom';
 import type { TabItemProps, TabsProps } from './types';
 import { Tabs, TabItem, TabList, TabPanel } from './';
-import { Code, Heading, Text, Title } from '~components/Typography';
+import { Code, Heading, Text } from '~components/Typography';
 import type { IconComponent } from '~components/Icons';
 import {
   ExternalLinkIcon,
@@ -21,7 +21,7 @@ import { Counter } from '~components/Counter';
 import { Box } from '~components/Box';
 import { Card, CardBody, CardHeader, CardHeaderLeading } from '~components/Card';
 import { Alert } from '~components/Alert';
-import { Switch } from '~components/Switch';
+// import { Switch } from '~components/Switch';
 import iconMap from '~components/Icons/iconMap';
 import { Badge } from '~components/Badge';
 import { Button } from '~components/Button';
@@ -39,14 +39,9 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Tabs"
       componentDescription="A tab is a navigation component used in the interface to switch between different views in the same context. Tabs are contextual to the section or the page and are triggered by user interaction."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=60965%3A367088&mode=dev',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=19064%3A77449&mode=dev',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=60965%3A367088&mode=dev"
     >
-      <Title>Usage</Title>
+      <Heading size="large">Usage</Heading>
       <Sandbox editorHeight={500}>
         {`
         import {
@@ -359,7 +354,7 @@ const SettingsCard = ({
               <Icon size="large" color="surface.text.subtle.lowContrast" />
               <Heading>{title}</Heading>
             </Box>
-            <Switch accessibilityLabel="Enable Card" />
+            {/* <Switch accessibilityLabel="Enable Card" /> */}
           </Box>
           {children}
         </Box>
diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap
index e3fc3149932..6fe6c8c60a8 100644
--- a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap
+++ b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`Tabs should render 1`] = `
       style={
         {
           "backgroundColor": "transparent",
-          "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+          "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
           "borderBottomWidth": 1,
           "elevation": 4,
           "shadowColor": "transparent",
@@ -63,9 +63,9 @@ exports[`Tabs should render 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "hsla(218, 89%, 51%, 1)",
+              "backgroundColor": "hsla(227, 100%, 59%, 1)",
               "bottom": 0,
-              "height": 1.5,
+              "height": 2,
               "left": "0%",
               "opacity": 0,
               "pointerEvents": "none",
@@ -297,21 +297,22 @@ exports[`Tabs should render 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.muted.lowContrast"
+                            color="interactive.text.gray.muted"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(216, 16%, 60%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(211, 22%, 56%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -384,21 +385,22 @@ exports[`Tabs should render 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="brand.primary.500"
+                            color="interactive.text.primary.subtle"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(218, 89%, 51%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(227, 100%, 59%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -553,21 +555,22 @@ exports[`Tabs should render 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.muted.lowContrast"
+                            color="interactive.text.gray.muted"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(216, 16%, 60%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(211, 22%, 56%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -640,21 +643,22 @@ exports[`Tabs should render 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="brand.primary.500"
+                            color="interactive.text.primary.subtle"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(218, 89%, 51%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(227, 100%, 59%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -743,7 +747,7 @@ exports[`Tabs should render 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -753,11 +757,12 @@ exports[`Tabs should render 1`] = `
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -845,7 +850,7 @@ exports[`Tabs should render with filled variant 1`] = `
       style={
         {
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
-          "borderColor": "hsla(216, 15%, 54%, 0.18)",
+          "borderColor": "hsla(211, 20%, 52%, 0.18)",
           "borderRadius": 2,
           "borderWidth": 1.5,
           "elevation": 4,
@@ -878,10 +883,10 @@ exports[`Tabs should render with filled variant 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
+              "backgroundColor": "hsla(227, 100%, 59%, 0.09)",
               "borderRadius": 2,
               "bottom": 4,
-              "height": -9.5,
+              "height": -10,
               "left": 4,
               "opacity": 0,
               "pointerEvents": "none",
@@ -1112,21 +1117,22 @@ exports[`Tabs should render with filled variant 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.muted.lowContrast"
+                            color="interactive.text.gray.muted"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(216, 16%, 60%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(211, 22%, 56%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -1198,21 +1204,22 @@ exports[`Tabs should render with filled variant 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="brand.primary.500"
+                            color="interactive.text.primary.subtle"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(218, 89%, 51%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(227, 100%, 59%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -1243,9 +1250,8 @@ exports[`Tabs should render with filled variant 1`] = `
                     }
                   >
                     <View
-                      borderLeftColor="surface.border.normal.lowContrast"
+                      borderLeftColor="surface.border.gray.normal"
                       borderPosition="borderLeft"
-                      borderWidth="none"
                       data-blade-component="divider"
                       dividerStyle="solid"
                       height="20px"
@@ -1254,9 +1260,8 @@ exports[`Tabs should render with filled variant 1`] = `
                       style={
                         [
                           {
-                            "borderLeftColor": "hsla(216, 15%, 54%, 0.18)",
-                            "borderStyle": "solid",
-                            "borderWidth": 0,
+                            "borderLeftColor": "hsla(211, 24%, 65%, 1)",
+                            "borderLeftStyle": "solid",
                             "height": 20,
                             "left": 1,
                             "top": 4,
@@ -1265,6 +1270,7 @@ exports[`Tabs should render with filled variant 1`] = `
                             "alignSelf": "stretch",
                             "borderLeftStyle": "solid",
                             "borderLeftWidth": 1,
+                            "borderWidth": 0,
                             "height": 20,
                           },
                         ]
@@ -1406,21 +1412,22 @@ exports[`Tabs should render with filled variant 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.muted.lowContrast"
+                            color="interactive.text.gray.muted"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(216, 16%, 60%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(211, 22%, 56%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -1492,21 +1499,22 @@ exports[`Tabs should render with filled variant 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="brand.primary.500"
+                            color="interactive.text.primary.subtle"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(218, 89%, 51%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(227, 100%, 59%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -1537,9 +1545,8 @@ exports[`Tabs should render with filled variant 1`] = `
                     }
                   >
                     <View
-                      borderLeftColor="surface.border.normal.lowContrast"
+                      borderLeftColor="surface.border.gray.normal"
                       borderPosition="borderLeft"
-                      borderWidth="none"
                       data-blade-component="divider"
                       dividerStyle="solid"
                       height="20px"
@@ -1548,9 +1555,8 @@ exports[`Tabs should render with filled variant 1`] = `
                       style={
                         [
                           {
-                            "borderLeftColor": "hsla(216, 15%, 54%, 0.18)",
-                            "borderStyle": "solid",
-                            "borderWidth": 0,
+                            "borderLeftColor": "hsla(211, 24%, 65%, 1)",
+                            "borderLeftStyle": "solid",
                             "height": 20,
                             "left": 1,
                             "top": 4,
@@ -1559,6 +1565,7 @@ exports[`Tabs should render with filled variant 1`] = `
                             "alignSelf": "stretch",
                             "borderLeftStyle": "solid",
                             "borderLeftWidth": 1,
+                            "borderWidth": 0,
                             "height": 20,
                           },
                         ]
@@ -1635,7 +1642,7 @@ exports[`Tabs should render with filled variant 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -1645,11 +1652,12 @@ exports[`Tabs should render with filled variant 1`] = `
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -1737,7 +1745,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
       style={
         {
           "backgroundColor": "transparent",
-          "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+          "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
           "borderBottomWidth": 1,
           "elevation": 4,
           "shadowColor": "transparent",
@@ -1768,9 +1776,9 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "hsla(218, 89%, 51%, 1)",
+              "backgroundColor": "hsla(227, 100%, 59%, 1)",
               "bottom": 0,
-              "height": 1.5,
+              "height": 2,
               "left": "0%",
               "opacity": 0,
               "pointerEvents": "none",
@@ -2001,21 +2009,22 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.muted.lowContrast"
+                            color="interactive.text.gray.muted"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(216, 16%, 60%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(211, 22%, 56%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -2087,21 +2096,22 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="brand.primary.500"
+                            color="interactive.text.primary.subtle"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(218, 89%, 51%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(227, 100%, 59%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -2255,21 +2265,22 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.muted.lowContrast"
+                            color="interactive.text.gray.muted"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(216, 16%, 60%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(211, 22%, 56%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -2341,21 +2352,22 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="brand.primary.500"
+                            color="interactive.text.primary.subtle"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={100}
                             fontStyle="normal"
-                            fontWeight="bold"
+                            fontWeight="semibold"
                             lineHeight={100}
                             style={
                               [
                                 {
-                                  "color": "hsla(218, 89%, 51%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(227, 100%, 59%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 14,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 20,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -2444,7 +2456,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -2454,11 +2466,12 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -2546,7 +2559,7 @@ exports[`Tabs should render with large size 1`] = `
       style={
         {
           "backgroundColor": "transparent",
-          "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
+          "borderBottomColor": "hsla(211, 20%, 52%, 0.18)",
           "borderBottomWidth": 1,
           "elevation": 4,
           "shadowColor": "transparent",
@@ -2583,9 +2596,9 @@ exports[`Tabs should render with large size 1`] = `
           collapsable={false}
           style={
             {
-              "backgroundColor": "hsla(218, 89%, 51%, 1)",
+              "backgroundColor": "hsla(227, 100%, 59%, 1)",
               "bottom": 0,
-              "height": 1.5,
+              "height": 2,
               "left": "0%",
               "opacity": 0,
               "pointerEvents": "none",
@@ -2817,21 +2830,22 @@ exports[`Tabs should render with large size 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.muted.lowContrast"
+                            color="interactive.text.gray.muted"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={200}
                             fontStyle="normal"
-                            fontWeight="bold"
-                            lineHeight={300}
+                            fontWeight="semibold"
+                            lineHeight={200}
                             style={
                               [
                                 {
-                                  "color": "hsla(216, 16%, 60%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(211, 22%, 56%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 16,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 24,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -2904,21 +2918,22 @@ exports[`Tabs should render with large size 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="brand.primary.500"
+                            color="interactive.text.primary.subtle"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={200}
                             fontStyle="normal"
-                            fontWeight="bold"
-                            lineHeight={300}
+                            fontWeight="semibold"
+                            lineHeight={200}
                             style={
                               [
                                 {
-                                  "color": "hsla(218, 89%, 51%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(227, 100%, 59%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 16,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 24,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -3073,21 +3088,22 @@ exports[`Tabs should render with large size 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="surface.text.muted.lowContrast"
+                            color="interactive.text.gray.muted"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={200}
                             fontStyle="normal"
-                            fontWeight="bold"
-                            lineHeight={300}
+                            fontWeight="semibold"
+                            lineHeight={200}
                             style={
                               [
                                 {
-                                  "color": "hsla(216, 16%, 60%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(211, 22%, 56%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 16,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 24,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -3160,21 +3176,22 @@ exports[`Tabs should render with large size 1`] = `
                         >
                           <Text
                             accessible={true}
-                            color="brand.primary.500"
+                            color="interactive.text.primary.subtle"
                             data-blade-component="text"
                             fontFamily="text"
                             fontSize={200}
                             fontStyle="normal"
-                            fontWeight="bold"
-                            lineHeight={300}
+                            fontWeight="semibold"
+                            lineHeight={200}
                             style={
                               [
                                 {
-                                  "color": "hsla(218, 89%, 51%, 1)",
-                                  "fontFamily": "Lato",
+                                  "color": "hsla(227, 100%, 59%, 1)",
+                                  "fontFamily": "Inter",
                                   "fontSize": 16,
                                   "fontStyle": "normal",
-                                  "fontWeight": "700",
+                                  "fontWeight": "600",
+                                  "letterSpacing": 0,
                                   "lineHeight": 24,
                                   "marginBottom": 0,
                                   "marginLeft": 0,
@@ -3263,7 +3280,7 @@ exports[`Tabs should render with large size 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.normal.lowContrast"
+            color="surface.text.gray.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
@@ -3273,11 +3290,12 @@ exports[`Tabs should render with large size 1`] = `
             style={
               [
                 {
-                  "color": "hsla(217, 56%, 17%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(212, 39%, 16%, 1)",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap
index c746f592423..051a0e364f4 100644
--- a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tabs /> should render tabs ssr 1`] = `"<div id="root"><div data-blade-component="tabs" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="box" class="BaseBox-bmPWx bTmnOt"><div data-blade-component="base-box" class="BaseBox-bmPWx TabListweb__ScrollableArea-sc-1evjc5b-0 cIMjwK bOfmyA"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><div role="tablist" data-blade-component="base-box" class="BaseBox-bmPWx ionHzf"><button id="tabs-undefined-payments-tabitem" role="tab" aria-selected="false" aria-controls="tabs-undefined-payments-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 kZNmic"><p class="StyledBaseText-dVBfTO gToSfl" data-blade-component="text">Payments</p></button><button id="tabs-undefined-refunds-tabitem" role="tab" aria-selected="true" aria-controls="tabs-undefined-refunds-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 kZNmic"><p class="StyledBaseText-dVBfTO VXYrX" data-blade-component="text">Refunds</p></button></div></div><div pointer-events="none" style="transition-property:transform, width, background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0.3, 0, 0.2, 1);width:0px;transform:translate(0px, 0px)" data-blade-component="tab-indicator" class="BaseBox-bmPWx TabIndicatorweb__StyledTabIndicator-sc-1kc65o8-0 fqvcDg iObMmh"></div></div><div style="transform:translateY(-1px)" data-blade-component="base-box" class="BaseBox-bmPWx cqHtSr"></div></div><div id="tabs-undefined-payments-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-payments-tabitem" aria-hidden="true" class="BaseBox-bmPWx kukYOz"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Payments</p></div><div id="tabs-undefined-refunds-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-refunds-tabitem" aria-hidden="false" class="BaseBox-bmPWx eTTyBE"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Refunds</p></div></div></div>"`;
+exports[`<Tabs /> should render tabs ssr 1`] = `"<div id="root"><div data-blade-component="tabs" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="box" class="BaseBox-bmPWx bTmnOt"><div data-blade-component="base-box" class="BaseBox-bmPWx TabListweb__ScrollableArea-sc-1evjc5b-0 cIMjwK bOfmyA"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><div role="tablist" data-blade-component="base-box" class="BaseBox-bmPWx ionHzf"><button id="tabs-undefined-payments-tabitem" role="tab" aria-selected="false" aria-controls="tabs-undefined-payments-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 eMVIso"><p class="StyledBaseText-dVBfTO hOMbpS" data-blade-component="text">Payments</p></button><button id="tabs-undefined-refunds-tabitem" role="tab" aria-selected="true" aria-controls="tabs-undefined-refunds-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 eMVIso"><p class="StyledBaseText-dVBfTO huntOd" data-blade-component="text">Refunds</p></button></div></div><div pointer-events="none" style="transition-property:transform, width, background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0.3, 0, 0.2, 1);width:0px;transform:translate(0px, 0px)" data-blade-component="tab-indicator" class="BaseBox-bmPWx TabIndicatorweb__StyledTabIndicator-sc-1kc65o8-0 itSyci cRvRoB"></div></div><div style="transform:translateY(-1px)" data-blade-component="base-box" class="BaseBox-bmPWx fNJCJA"></div></div><div id="tabs-undefined-payments-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-payments-tabitem" aria-hidden="true" class="BaseBox-bmPWx kukYOz"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Payments</p></div><div id="tabs-undefined-refunds-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-refunds-tabitem" aria-hidden="false" class="BaseBox-bmPWx eTTyBE"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Refunds</p></div></div></div>"`;
 
 exports[`<Tabs /> should render tabs ssr 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -64,16 +64,16 @@ exports[`<Tabs /> should render tabs ssr 2`] = `
 
 .c9.c9.c9.c9.c9 {
   position: absolute;
-  height: 1.5px;
-  top: 0px;
+  height: 2px;
+  top: -0.5px;
   left: 0%;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   pointer-events: none;
 }
 
 .c11.c11.c11.c11.c11 {
   border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
 }
 
@@ -86,40 +86,52 @@ exports[`<Tabs /> should render tabs ssr 2`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -150,7 +162,7 @@ exports[`<Tabs /> should render tabs ssr 2`] = `
   padding-bottom: 16px;
   padding-left: 0px;
   padding-right: 0px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
@@ -164,19 +176,19 @@ exports[`<Tabs /> should render tabs ssr 2`] = `
 }
 
 .c6.c6.c6.c6.c6:hover {
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  background-color: transparent;
+  border-bottom-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:disabled {
   cursor: not-allowed;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
   border-radius: 4px;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  background-color: transparent;
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6 * {
@@ -193,7 +205,7 @@ exports[`<Tabs /> should render tabs ssr 2`] = `
 }
 
 .c10.c10.c10.c10.c10:hover {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c3.c3.c3.c3.c3::-webkit-scrollbar {
diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap
index c00c7a04d92..fcb2b841842 100644
--- a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap
+++ b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap
@@ -62,16 +62,16 @@ exports[`Tabs should render 1`] = `
 
 .c9.c9.c9.c9.c9 {
   position: absolute;
-  height: 1.5px;
-  top: 0px;
+  height: 2px;
+  top: -0.5px;
   left: 0%;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   pointer-events: none;
 }
 
 .c11.c11.c11.c11.c11 {
   border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
 }
 
@@ -84,40 +84,52 @@ exports[`Tabs should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -148,7 +160,7 @@ exports[`Tabs should render 1`] = `
   padding-bottom: 16px;
   padding-left: 0px;
   padding-right: 0px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
@@ -162,19 +174,19 @@ exports[`Tabs should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6:hover {
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  background-color: transparent;
+  border-bottom-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:disabled {
   cursor: not-allowed;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
   border-radius: 4px;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  background-color: transparent;
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6 * {
@@ -191,7 +203,7 @@ exports[`Tabs should render 1`] = `
 }
 
 .c10.c10.c10.c10.c10:hover {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c3.c3.c3.c3.c3::-webkit-scrollbar {
@@ -442,24 +454,24 @@ exports[`Tabs should render with filled variant 1`] = `
   background-color: hsla(0,0%,100%,1);
   border-radius: 2px;
   border-width: 1px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   border-style: solid;
 }
 
 .c8.c8.c8.c8.c8 {
   margin: auto;
   height: 20px;
-  border-width: 0px;
-  border-left-color: hsla(216,15%,54%,0.09);
-  border-style: solid;
+  border-left-color: hsla(214,28%,84%,1);
+  border-left-style: solid;
 }
 
 .c12.c12.c12.c12.c12 {
   position: absolute;
   top: 0px;
   left: 0px;
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
   border-radius: 2px;
+  pointer-events: none;
 }
 
 .c14.c14.c14.c14.c14 {
@@ -471,40 +483,52 @@ exports[`Tabs should render with filled variant 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -536,7 +560,7 @@ exports[`Tabs should render with filled variant 1`] = `
   padding-bottom: 8px;
   padding-left: 8px;
   padding-right: 8px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 2px;
   border-bottom-style: solid;
   border-bottom-width: 0;
@@ -550,19 +574,19 @@ exports[`Tabs should render with filled variant 1`] = `
 }
 
 .c6.c6.c6.c6.c6:hover {
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  background-color: hsla(216,15%,54%,0.09);
+  border-bottom-color: hsla(211,27%,76%,1);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c6.c6.c6.c6.c6:disabled {
   cursor: not-allowed;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
   border-radius: 4px;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  background-color: hsla(216,15%,54%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c6.c6.c6.c6.c6 * {
@@ -615,19 +639,19 @@ exports[`Tabs should render with filled variant 1`] = `
 }
 
 .c10.c10.c10.c10.c10:hover {
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,27%,76%,1);
   background-color: transparent;
 }
 
 .c10.c10.c10.c10.c10:disabled {
   cursor: not-allowed;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c10.c10.c10.c10.c10:focus-visible {
   border-radius: 4px;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  background-color: hsla(218,89%,51%,0.18);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  background-color: hsla(227,100%,59%,0.09);
 }
 
 .c10.c10.c10.c10.c10 * {
@@ -644,10 +668,11 @@ exports[`Tabs should render with filled variant 1`] = `
 }
 
 .c13.c13.c13.c13.c13:hover {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c9.c9.c9.c9.c9 {
+  border-width: 0;
   border-left-style: solid;
   border-left-width: 1px;
   -webkit-align-self: stretch;
@@ -692,31 +717,61 @@ exports[`Tabs should render with filled variant 1`] = `
 
 @media screen and (min-width:320px) {
   .c8.c8.c8.c8.c8 {
-    border-style: solid;
+    border-left-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
   .c8.c8.c8.c8.c8 {
-    border-style: solid;
+    border-left-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
   .c8.c8.c8.c8.c8 {
-    border-style: solid;
+    border-left-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c8.c8.c8.c8.c8 {
-    border-style: solid;
+    border-left-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
   .c8.c8.c8.c8.c8 {
-    border-style: solid;
+    border-left-style: solid;
+  }
+}
+
+@media screen and (min-width:320px) {
+  .c12.c12.c12.c12.c12 {
+    pointer-events: none;
+  }
+}
+
+@media screen and (min-width:480px) {
+  .c12.c12.c12.c12.c12 {
+    pointer-events: none;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c12.c12.c12.c12.c12 {
+    pointer-events: none;
+  }
+}
+
+@media screen and (min-width:1024px) {
+  .c12.c12.c12.c12.c12 {
+    pointer-events: none;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .c12.c12.c12.c12.c12 {
+    pointer-events: none;
   }
 }
 
@@ -804,7 +859,8 @@ exports[`Tabs should render with filled variant 1`] = `
           <div
             class="c12 c13"
             data-blade-component="tab-indicator"
-            style="transition-property: transform, width, background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0.3, 0, 0.2, 1); width: 0px; height: 0px; transform: translate(0px, -1px);"
+            pointer-events="none"
+            style="transition-property: transform, width, background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0.3, 0, 0.2, 1); width: 0px; height: 0px; transform: translate(0px, 0px);"
           />
         </div>
       </div>
@@ -907,16 +963,16 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
 
 .c9.c9.c9.c9.c9 {
   position: absolute;
-  height: 1.5px;
-  top: 0px;
+  height: 2px;
+  top: -0.5px;
   left: 0%;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   pointer-events: none;
 }
 
 .c11.c11.c11.c11.c11 {
   border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
 }
 
@@ -929,40 +985,52 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -994,7 +1062,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
   padding-bottom: 16px;
   padding-left: 0px;
   padding-right: 0px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
@@ -1008,19 +1076,19 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
 }
 
 .c6.c6.c6.c6.c6:hover {
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  background-color: transparent;
+  border-bottom-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:disabled {
   cursor: not-allowed;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
   border-radius: 4px;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  background-color: transparent;
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6 * {
@@ -1037,7 +1105,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
 }
 
 .c10.c10.c10.c10.c10:hover {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c3.c3.c3.c3.c3::-webkit-scrollbar {
@@ -1289,16 +1357,16 @@ exports[`Tabs should render with size 1`] = `
 
 .c9.c9.c9.c9.c9 {
   position: absolute;
-  height: 1.5px;
-  top: 0px;
+  height: 2px;
+  top: -0.5px;
   left: 0%;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   pointer-events: none;
 }
 
 .c11.c11.c11.c11.c11 {
   border-bottom-width: 1px;
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-bottom-style: solid;
 }
 
@@ -1311,40 +1379,52 @@ exports[`Tabs should render with size 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c13.c13.c13.c13.c13 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -1375,7 +1455,7 @@ exports[`Tabs should render with size 1`] = `
   padding-bottom: 12px;
   padding-left: 0px;
   padding-right: 0px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 0;
   border-bottom-style: solid;
   border-bottom-width: 1px;
@@ -1389,19 +1469,19 @@ exports[`Tabs should render with size 1`] = `
 }
 
 .c6.c6.c6.c6.c6:hover {
-  border-bottom-color: hsla(216,15%,54%,0.18);
-  background-color: transparent;
+  border-bottom-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:disabled {
   cursor: not-allowed;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
   border-radius: 4px;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  background-color: transparent;
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6 * {
@@ -1418,7 +1498,7 @@ exports[`Tabs should render with size 1`] = `
 }
 
 .c10.c10.c10.c10.c10:hover {
-  background-color: hsla(218,89%,51%,0.18);
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c3.c3.c3.c3.c3::-webkit-scrollbar {
@@ -1649,8 +1729,10 @@ exports[`Tabs should render with vertical orientation 1`] = `
   -ms-flex-negative: 0;
   flex-shrink: 0;
   height: auto;
-  width: 1.5px;
-  background-color: hsla(216,15%,54%,0.18);
+  width: 0px;
+  border-width: 1px;
+  border-color: hsla(211,20%,52%,0.18);
+  border-style: solid;
 }
 
 .c5.c5.c5.c5.c5 {
@@ -1684,40 +1766,52 @@ exports[`Tabs should render with vertical orientation 1`] = `
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c9.c9.c9.c9.c9 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -1748,7 +1842,7 @@ exports[`Tabs should render with vertical orientation 1`] = `
   padding-bottom: 4px;
   padding-left: 12px;
   padding-right: 12px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 0;
   border-left-style: solid;
   border-left-width: 1.5px;
@@ -1762,19 +1856,19 @@ exports[`Tabs should render with vertical orientation 1`] = `
 }
 
 .c6.c6.c6.c6.c6:hover {
-  border-left-color: hsla(216,15%,54%,0.18);
-  background-color: transparent;
+  border-left-color: hsla(211,27%,76%,1);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:disabled {
   cursor: not-allowed;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6:focus-visible {
   border-radius: 4px;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  background-color: transparent;
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c6.c6.c6.c6.c6 * {
@@ -1812,11 +1906,11 @@ exports[`Tabs should render with vertical orientation 1`] = `
   padding-bottom: 4px;
   padding-left: 12px;
   padding-right: 12px;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
   border-radius: 0;
   border-left-style: solid;
   border-left-width: 1.5px;
-  border-left-color: hsla(218,89%,51%,1);
+  border-left-color: hsla(227,100%,59%,1);
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -1826,19 +1920,19 @@ exports[`Tabs should render with vertical orientation 1`] = `
 }
 
 .c8.c8.c8.c8.c8:hover {
-  border-left-color: hsla(218,89%,51%,1);
-  background-color: transparent;
+  border-left-color: hsla(227,100%,59%,1);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c8.c8.c8.c8.c8:disabled {
   cursor: not-allowed;
-  background-color: transparent;
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c8.c8.c8.c8.c8:focus-visible {
   border-radius: 4px;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  background-color: transparent;
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
+  background-color: hsla(0,0%,100%,0);
 }
 
 .c8.c8.c8.c8.c8 * {
@@ -1854,6 +1948,36 @@ exports[`Tabs should render with vertical orientation 1`] = `
   display: none;
 }
 
+@media screen and (min-width:320px) {
+  .c4.c4.c4.c4.c4 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:480px) {
+  .c4.c4.c4.c4.c4 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c4.c4.c4.c4.c4 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:1024px) {
+  .c4.c4.c4.c4.c4 {
+    border-style: solid;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .c4.c4.c4.c4.c4 {
+    border-style: solid;
+  }
+}
+
 @media screen and (min-width:0px) and (max-width:768px) {
   .c6.c6.c6.c6.c6 {
     padding-top: 4px;
diff --git a/packages/blade/src/components/Tabs/tabTokens.ts b/packages/blade/src/components/Tabs/tabTokens.ts
index a48722e0c11..f0d2d988ab4 100644
--- a/packages/blade/src/components/Tabs/tabTokens.ts
+++ b/packages/blade/src/components/Tabs/tabTokens.ts
@@ -105,70 +105,68 @@ const paddingX: TabItemPadding = {
   },
 };
 
+const trackColor = 'surface.border.gray.muted';
 const textColor = {
   selected: {
-    default: 'brand.primary.500',
-    hover: 'brand.primary.600',
-    focus: 'brand.primary.600',
-    active: 'brand.primary.600',
-    disabled: 'surface.text.placeholder.lowContrast',
+    default: 'interactive.text.primary.subtle',
+    highlighted: 'interactive.text.primary.normal',
+    disabled: 'interactive.text.primary.normal',
   },
   unselected: {
-    default: 'surface.text.muted.lowContrast',
-    hover: 'surface.text.subdued.lowContrast',
-    focus: 'surface.text.subdued.lowContrast',
-    active: 'surface.text.subdued.lowContrast',
-    disabled: 'surface.text.placeholder.lowContrast',
+    default: 'interactive.text.gray.muted',
+    highlighted: 'interactive.text.gray.subtle',
+    disabled: 'interactive.text.gray.disabled',
   },
 } as const;
 
 const backgroundColor = {
   unselected: {
     bordered: {
-      default: 'transparent',
-      hover: 'transparent',
-      focus: 'transparent',
-      active: 'transparent',
-      disabled: 'transparent',
+      default: 'colors.transparent',
+      highlighted: 'colors.transparent',
+      disabled: 'colors.transparent',
     },
     borderless: {
-      default: 'transparent',
-      hover: 'transparent',
-      focus: 'transparent',
-      active: 'transparent',
-      disabled: 'transparent',
+      default: 'colors.transparent',
+      highlighted: 'colors.transparent',
+      disabled: 'colors.transparent',
     },
     filled: {
-      default: 'transparent',
-      hover: 'colors.brand.gray.a50.lowContrast',
-      focus: 'colors.brand.gray.a50.lowContrast',
-      active: 'colors.brand.gray.a50.lowContrast',
-      disabled: 'transparent',
+      default: 'colors.transparent',
+      highlighted: 'colors.interactive.background.gray.default',
+      disabled: 'colors.transparent',
     },
   },
   selected: {
     bordered: {
-      default: 'transparent',
-      hover: 'transparent',
-      focus: 'transparent',
-      active: 'transparent',
-      disabled: 'transparent',
+      default: 'colors.transparent',
+      highlighted: 'colors.transparent',
+      disabled: 'colors.transparent',
     },
     borderless: {
-      default: 'transparent',
-      hover: 'transparent',
-      focus: 'transparent',
-      active: 'transparent',
-      disabled: 'transparent',
+      default: 'colors.transparent',
+      highlighted: 'colors.transparent',
+      disabled: 'colors.transparent',
     },
     filled: {
-      default: 'colors.brand.primary.300',
-      hover: 'colors.brand.primary.400',
-      focus: 'colors.brand.primary.400',
-      active: 'colors.brand.primary.400',
-      disabled: 'transparent',
+      default: 'colors.interactive.background.primary.faded',
+      highlighted: 'colors.interactive.background.primary.faded',
+      disabled: 'colors.transparent',
     },
   },
 } as const;
 
-export { backgroundColor, textColor, paddingY, paddingX };
+const iconColor = {
+  unselected: {
+    default: 'interactive.icon.gray.muted',
+    highlighted: 'interactive.icon.gray.subtle',
+    disabled: 'interactive.icon.gray.disabled',
+  },
+  selected: {
+    default: 'interactive.icon.primary.subtle',
+    highlighted: 'interactive.icon.primary.normal',
+    disabled: 'interactive.icon.primary.disabled',
+  },
+} as const;
+
+export { backgroundColor, textColor, iconColor, trackColor, paddingY, paddingX };
diff --git a/packages/blade/src/components/Tag/Tag.stories.tsx b/packages/blade/src/components/Tag/Tag.stories.tsx
index d3753aa7b00..a764fff8817 100644
--- a/packages/blade/src/components/Tag/Tag.stories.tsx
+++ b/packages/blade/src/components/Tag/Tag.stories.tsx
@@ -2,27 +2,22 @@ import React from 'react';
 import type { DOMAttributes } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
-import type { TagProps } from './Tag';
 import { Tag } from './Tag';
+import type { TagProps } from './';
 import { Sandbox } from '~utils/storybook/Sandbox';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 import { Box } from '~components/Box';
-import { Button } from '~components/Button';
-import { TextInput } from '~components/Input/TextInput';
+import iconMap from '~components/Icons/iconMap';
 import { isReactNative } from '~utils';
+import { TextInput } from '~components/Input/TextInput';
+import { Button } from '~components/Button';
 import { PlusIcon } from '~components/Icons';
-import iconMap from '~components/Icons/iconMap';
 
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=28435%3A581488',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=15234%3A480939',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=28435%3A581488"
       componentName="Tag"
       componentDescription="These are set of interactive keywords that help organise & categorise objects. Tags can be added or removed from an object by the users."
     >
@@ -65,7 +60,7 @@ export default {
     ...getStyledPropsArgTypes(),
     icon: {
       name: 'icon',
-      type: 'select',
+      type: 'select' as 'string',
       options: Object.keys(iconMap),
       mapping: iconMap,
     },
diff --git a/packages/blade/src/components/Tag/Tag.tsx b/packages/blade/src/components/Tag/Tag.tsx
index 3ec0f2732f5..bb060722352 100644
--- a/packages/blade/src/components/Tag/Tag.tsx
+++ b/packages/blade/src/components/Tag/Tag.tsx
@@ -18,9 +18,9 @@ const FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtua
     if (props._isVirtuallyFocused && !isReactNative()) {
       return {
         outline: `${makeSize(globalSizeTokens['1'])} solid ${
-          props.theme.colors.surface.background.level1.lowContrast
+          props.theme.colors.surface.background.gray.subtle
         }`,
-        boxShadow: `0px 0px 0px 4px ${props.theme.colors.brand.primary[400]}`,
+        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,
       };
     }
 
@@ -68,9 +68,11 @@ const Tag = ({
 }: TagProps): React.ReactElement | null => {
   const isMobile = useIsMobile();
 
-  const textColor = isDisabled
-    ? 'surface.text.placeholder.lowContrast'
-    : 'surface.text.subtle.lowContrast';
+  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';
+  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';
+  const backgroundColor = isDisabled
+    ? 'interactive.background.gray.disabled'
+    : 'interactive.background.gray.default';
 
   const mediumPadding: PaddingProps['padding'] = {
     base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],
@@ -101,7 +103,7 @@ const Tag = ({
         alignSelf={isReactNative() ? 'center' : undefined}
         flexDirection="row"
         flexWrap="nowrap"
-        backgroundColor="brand.gray.a100.lowContrast"
+        backgroundColor={backgroundColor}
         borderRadius="max"
         padding={size === 'medium' ? mediumPadding : largePadding}
         _isVirtuallyFocused={_isVirtuallyFocused}
@@ -109,7 +111,7 @@ const Tag = ({
         {/* Leading Icon */}
         {Icon ? (
           <Box display="flex" flexDirection="row" alignItems="center">
-            <Icon color={textColor} size={assetSize} marginRight="spacing.2" />
+            <Icon color={iconColor} size={assetSize} marginRight="spacing.2" />
           </Box>
         ) : null}
 
diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.native.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.native.test.tsx.snap
index b207be5ca0f..f5031004931 100644
--- a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.native.test.tsx.snap
+++ b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.native.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<Tag /> should render tag 1`] = `
   >
     <View
       alignSelf="center"
-      backgroundColor="brand.gray.a100.lowContrast"
+      backgroundColor="interactive.background.gray.default"
       borderRadius="max"
       data-blade-component="base-box"
       display="flex"
@@ -31,7 +31,7 @@ exports[`<Tag /> should render tag 1`] = `
         [
           {
             "alignSelf": "center",
-            "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+            "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
             "borderRadius": 9999,
             "display": "flex",
             "flexDirection": "row",
@@ -64,24 +64,25 @@ exports[`<Tag /> should render tag 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.subtle.lowContrast"
+          color="interactive.text.gray.subtle"
           data-blade-component="text"
           fontFamily="text"
           fontSize={75}
           fontStyle="normal"
           fontWeight="regular"
-          lineHeight={50}
+          lineHeight={75}
           marginRight="spacing.2"
           numberOfLines={1}
           style={
             [
               {
-                "color": "hsla(216, 27%, 36%, 1)",
-                "fontFamily": "Lato",
+                "color": "hsla(211, 26%, 34%, 1)",
+                "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
                 "fontWeight": "400",
-                "lineHeight": 16,
+                "letterSpacing": 0,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 4,
@@ -137,7 +138,7 @@ exports[`<Tag /> should render tag 1`] = `
           }
           accessible={true}
           collapsable={false}
-          contrast="low"
+          emphasis="intense"
           focusable={true}
           onBlur={[Function]}
           onClick={[Function]}
@@ -199,7 +200,7 @@ exports[`<Tag /> should render tag 1`] = `
             >
               <RNSVGPath
                 d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-                fill={4288851646}
+                fill={4285959847}
                 propList={
                   [
                     "fill",
diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap
index 76df0908c36..96c0b3354fa 100644
--- a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tag /> should render tag 1`] = `"<div id="root"><div data-blade-component="tag" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx Tag__FocussableTag-jmwb4r-0 kPbJkm"><div data-blade-component="box" class="BaseBox-bmPWx laICQt"><p class="StyledBaseText-dVBfTO bHCvZb" data-blade-component="text">in:User</p></div><div data-blade-component="box" class="BaseBox-bmPWx cgXgMK"><button type="button" aria-label="Close in:User tag" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 dOswfI"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div></div>"`;
+exports[`<Tag /> should render tag 1`] = `"<div id="root"><div data-blade-component="tag" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx Tag__FocussableTag-jmwb4r-0 gxGzeJ"><div data-blade-component="box" class="BaseBox-bmPWx laICQt"><p class="StyledBaseText-dVBfTO kBCXQA" data-blade-component="text">in:User</p></div><div data-blade-component="box" class="BaseBox-bmPWx cgXgMK"><button type="button" aria-label="Close in:User tag" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jCUyST"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div></div>"`;
 
 exports[`<Tag /> should render tag 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -22,7 +22,7 @@ exports[`<Tag /> should render tag 2`] = `
   -ms-flex-direction: row;
   flex-direction: row;
   padding: 4px 8px 4px 12px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
 }
 
@@ -77,7 +77,7 @@ exports[`<Tag /> should render tag 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -87,28 +87,38 @@ exports[`<Tag /> should render tag 2`] = `
 }
 
 .c5.c5.c5.c5.c5:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c5.c5.c5.c5.c5:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c5.c5.c5.c5.c5:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap
index cee8f6cf2fc..1dd17dac0f7 100644
--- a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap
+++ b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<Tag /> should render tag 1`] = `
   -ms-flex-direction: row;
   flex-direction: row;
   padding: 4px 8px 4px 12px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 9999px;
 }
 
@@ -75,7 +75,7 @@ exports[`<Tag /> should render tag 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -85,28 +85,38 @@ exports[`<Tag /> should render tag 1`] = `
 }
 
 .c5.c5.c5.c5.c5:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c5.c5.c5.c5.c5:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c5.c5.c5.c5.c5:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(216,27%,36%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
diff --git a/packages/blade/src/components/Tooltip/Tooltip.native.tsx b/packages/blade/src/components/Tooltip/Tooltip.native.tsx
index 3a86bdbb5fa..473233fb7ce 100644
--- a/packages/blade/src/components/Tooltip/Tooltip.native.tsx
+++ b/packages/blade/src/components/Tooltip/Tooltip.native.tsx
@@ -112,8 +112,8 @@ const Tooltip = ({
                 context={context}
                 width={ARROW_WIDTH}
                 height={ARROW_HEIGHT}
-                fillColor={theme.colors.brand.gray[200].highContrast}
-                strokeColor={theme.colors.brand.gray[300].highContrast}
+                fillColor={theme.colors.popup.background.intense}
+                strokeColor={theme.colors.popup.border.intense}
               />
             }
           >
diff --git a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
index c5017530c49..d762eaf8fdc 100644
--- a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
+++ b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
@@ -24,12 +24,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Tooltip"
       componentDescription="The tooltip typically provides additional context about the element or its function. A tooltip is always triggered by a mouse hover on desktop and on tap on mobile."
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=40636-559188&t=vaK9ZJskCpoIS07l-0',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?type=design&node-id=17121-718899&t=TtGMAUvsH8pUzTq9-0',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=40636-559188&t=vaK9ZJskCpoIS07l-0"
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -112,10 +107,10 @@ const PlacementBox = React.forwardRef<
       width={isReactNative() ? '40%' : '100%'}
       flexShrink={0}
       padding="spacing.5"
-      backgroundColor="surface.background.level3.lowContrast"
+      backgroundColor="surface.background.gray.moderate"
       {...props}
     >
-      <Text contrast="low">{children}</Text>
+      <Text>{children}</Text>
     </Box>
   );
 });
@@ -208,7 +203,7 @@ const NonInteractiveTriggerTemplate: StoryFn<typeof TooltipComponent> = (args) =
         <Text>Refunds</Text>
         <TooltipComponent {...args} placement="bottom-start">
           <TooltipInteractiveWrapper>
-            <InfoIcon marginTop="spacing.2" size="medium" color="surface.text.muted.lowContrast" />
+            <InfoIcon marginTop="spacing.2" size="medium" />
           </TooltipInteractiveWrapper>
         </TooltipComponent>
       </Box>
@@ -223,7 +218,7 @@ const TooltipTriggersTemplate: StoryFn<typeof TooltipComponent> = (args) => {
     <Center>
       <Box display="flex" gap="spacing.11" alignItems="center" flexWrap="wrap">
         <TooltipComponent {...args} placement="top">
-          <Button>Button</Button>
+          <Button>button</Button>
         </TooltipComponent>
         <Box marginTop="spacing.8" />
         <TooltipComponent {...args} placement="top">
@@ -244,7 +239,7 @@ const TooltipTriggersTemplate: StoryFn<typeof TooltipComponent> = (args) => {
         <Box marginTop="spacing.8" />
         <TooltipComponent {...args} content="With non-interactive icon" placement="bottom">
           <TooltipInteractiveWrapper>
-            <InfoIcon size="large" color="surface.text.muted.lowContrast" />
+            <InfoIcon size="large" />
           </TooltipInteractiveWrapper>
         </TooltipComponent>
       </Box>
@@ -268,13 +263,11 @@ const CustomTrigger = React.forwardRef<
       padding="spacing.4"
       borderRadius="medium"
       backgroundColor={
-        isReactNative()
-          ? 'surface.background.level1.lowContrast'
-          : 'surface.background.level2.lowContrast'
+        isReactNative() ? 'surface.background.gray.subtle' : 'surface.background.gray.intense'
       }
       {...props}
     >
-      <Text contrast="low">{children}</Text>
+      <Text>{children}</Text>
     </BaseBox>
   );
 });
@@ -291,13 +284,13 @@ const CustomTriggerDocs = () => {
       </ListItem>
       <ListItem>
         Make sure that your component can receive focus{' '}
-        <ListItemText as="span" type="subdued">
+        <ListItemText as="span" color="surface.text.gray.muted">
           (eg: have tabIndex:0)
         </ListItemText>
       </ListItem>
       <ListItem>
         Forward event handlers to the custom trigger{' '}
-        <ListItemText as="span" type="subdued">
+        <ListItemText as="span" color="surface.text.gray.muted">
           (you can import the TooltipTriggerProps type from blade when using TypeScript)
         </ListItemText>
         <List>
diff --git a/packages/blade/src/components/Tooltip/Tooltip.web.tsx b/packages/blade/src/components/Tooltip/Tooltip.web.tsx
index 34e443f91c8..ad6c224ac02 100644
--- a/packages/blade/src/components/Tooltip/Tooltip.web.tsx
+++ b/packages/blade/src/components/Tooltip/Tooltip.web.tsx
@@ -120,8 +120,8 @@ const Tooltip = ({
                   context={context}
                   width={ARROW_WIDTH}
                   height={ARROW_HEIGHT}
-                  fillColor={theme.colors.brand.gray[200].highContrast}
-                  strokeColor={theme.colors.brand.gray[300].highContrast}
+                  fillColor={theme.colors.popup.background.intense}
+                  strokeColor={theme.colors.popup.border.intense}
                 />
               }
             >
diff --git a/packages/blade/src/components/Tooltip/TooltipContent.tsx b/packages/blade/src/components/Tooltip/TooltipContent.tsx
index 501ebf92175..cf89cfbbcaa 100644
--- a/packages/blade/src/components/Tooltip/TooltipContent.tsx
+++ b/packages/blade/src/components/Tooltip/TooltipContent.tsx
@@ -21,7 +21,7 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
         isVisible={isVisible}
       >
         {title ? (
-          <Text contrast="high" weight="bold" size="medium">
+          <Text weight="semibold" size="medium" color="surface.text.staticWhite.normal">
             {title}
           </Text>
         ) : null}
@@ -29,8 +29,7 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
           variant="body"
           size="small"
           weight="regular"
-          contrast="high"
-          color="feedback.text.neutral.highContrast"
+          color="surface.text.staticWhite.subtle"
           wordBreak="break-word"
         >
           {children}
diff --git a/packages/blade/src/components/Tooltip/__tests__/Tooltip.native.test.tsx b/packages/blade/src/components/Tooltip/__tests__/Tooltip.native.test.tsx
index f639be569ca..864d6c8bc52 100644
--- a/packages/blade/src/components/Tooltip/__tests__/Tooltip.native.test.tsx
+++ b/packages/blade/src/components/Tooltip/__tests__/Tooltip.native.test.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { Tooltip, TooltipInteractiveWrapper } from '..';
 import { Button } from '~components/Button';
 import { Text } from '~components/Typography';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 import renderWithTheme from '~utils/testing/renderWithTheme.native';
 const triggerId = 'tooltip-interactive-wrapper';
 const modalBackdropId = 'tooltip-modal-backdrop';
@@ -88,7 +88,7 @@ describe('<Tooltip />', () => {
 
     // wait for closing animation to finish
     await act(async () => {
-      jest.advanceTimersByTime(paymentTheme.motion.duration.gentle);
+      jest.advanceTimersByTime(bladeTheme.motion.duration.gentle);
     });
     expect(getByLabelText(tooltipContent)).toHaveProp('visible', false);
   });
diff --git a/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx b/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx
index d8d247bdc18..3e3474ee4d9 100644
--- a/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx
+++ b/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { Tooltip, TooltipInteractiveWrapper } from '..';
 import type { BladeCommonEvents } from '~components/types';
 import { Button } from '~components/Button';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 import { InfoIcon } from '~components/Icons';
 import { Text } from '~components/Typography';
 import BaseBox from '~components/Box/BaseBox';
@@ -16,7 +16,7 @@ import renderWithTheme from '~utils/testing/renderWithTheme.web';
 import assertAccessible from '~utils/testing/assertAccessible.web';
 
 const waitForPosition = () => act(async () => {});
-const animationDuration = paymentTheme.motion.duration.quick;
+const animationDuration = bladeTheme.motion.duration.quick;
 
 describe('<Tooltip />', () => {
   jest.useFakeTimers();
@@ -136,7 +136,7 @@ describe('<Tooltip />', () => {
     const { getByTestId, queryByRole } = renderWithTheme(
       <Tooltip content={tooltipContent}>
         <TooltipInteractiveWrapper>
-          <InfoIcon color="surface.action.icon.default.highContrast" size="medium" />
+          <InfoIcon color="interactive.icon.gray.normal" size="medium" />
         </TooltipInteractiveWrapper>
       </Tooltip>,
     );
@@ -175,7 +175,7 @@ describe('<Tooltip />', () => {
     const { getByTestId, queryByRole } = renderWithTheme(
       <Tooltip content="Hello world">
         <TooltipInteractiveWrapper>
-          <InfoIcon color="surface.action.icon.default.highContrast" size="medium" />
+          <InfoIcon color="interactive.icon.gray.normal" size="medium" />
         </TooltipInteractiveWrapper>
       </Tooltip>,
     );
@@ -235,7 +235,7 @@ describe('<Tooltip />', () => {
             onTouchStart={onTouchStart}
             data-testid={testId}
           >
-            <Text contrast="low">{children}</Text>
+            <Text>{children}</Text>
           </BaseBox>
         );
       },
@@ -295,7 +295,7 @@ describe('<Tooltip />', () => {
     const { getByTestId, queryByRole } = renderWithTheme(
       <Tooltip content={tooltipContent}>
         <TooltipInteractiveWrapper>
-          <InfoIcon color="surface.action.icon.default.highContrast" size="medium" />
+          <InfoIcon color="interactive.icon.gray.normal" size="medium" />
         </TooltipInteractiveWrapper>
       </Tooltip>,
     );
diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap
index db93f3f6dad..6a44913e32e 100644
--- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap
+++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap
@@ -28,24 +28,22 @@ exports[`<Tooltip /> should render 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -67,15 +65,16 @@ exports[`<Tooltip /> should render 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -86,8 +85,8 @@ exports[`<Tooltip /> should render 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -110,28 +109,31 @@ exports[`<Tooltip /> should render 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -225,8 +227,8 @@ exports[`<Tooltip /> should render 1`] = `
                 "position": "absolute",
               },
               {
-                "backgroundColor": "hsla(216, 33%, 29%, 1)",
-                "borderColor": "hsla(216, 27%, 36%, 1)",
+                "backgroundColor": "hsla(211, 29%, 26%, 1)",
+                "borderColor": "hsla(211, 26%, 34%, 1)",
                 "borderRadius": 4,
                 "borderStyle": "solid",
                 "borderWidth": 1,
@@ -236,14 +238,14 @@ exports[`<Tooltip /> should render 1`] = `
                 "zIndex": 1100,
               },
               {
-                "elevation": 4,
-                "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+                "elevation": 8,
+                "shadowColor": "hsla(217, 56%, 17%, 0.4)",
                 "shadowOffset": {
-                  "height": 3,
+                  "height": 2,
                   "width": 0,
                 },
-                "shadowOpacity": 0.12,
-                "shadowRadius": 2,
+                "shadowOpacity": 0.2,
+                "shadowRadius": 4,
               },
             ]
           }
@@ -258,22 +260,23 @@ exports[`<Tooltip /> should render 1`] = `
         >
           <Text
             accessible={true}
-            color="feedback.text.neutral.highContrast"
+            color="surface.text.staticWhite.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(0, 0%, 100%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(0, 0%, 100%, 0.88)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -347,12 +350,12 @@ exports[`<Tooltip /> should render 1`] = `
                       "strokeWidth",
                     ]
                   }
-                  stroke={4282603381}
+                  stroke={4282406509}
                   strokeWidth="2px"
                 />
                 <RNSVGPath
                   d="M0,0 H14 L7,7 Q7,7 7,7 Z"
-                  fill={4281484642}
+                  fill={4281287254}
                   propList={
                     [
                       "fill",
@@ -399,24 +402,22 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -438,15 +439,16 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -457,8 +459,8 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -481,28 +483,31 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -596,8 +601,8 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
                 "position": "absolute",
               },
               {
-                "backgroundColor": "hsla(216, 33%, 29%, 1)",
-                "borderColor": "hsla(216, 27%, 36%, 1)",
+                "backgroundColor": "hsla(211, 29%, 26%, 1)",
+                "borderColor": "hsla(211, 26%, 34%, 1)",
                 "borderRadius": 4,
                 "borderStyle": "solid",
                 "borderWidth": 1,
@@ -607,14 +612,14 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
                 "zIndex": 9999,
               },
               {
-                "elevation": 4,
-                "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+                "elevation": 8,
+                "shadowColor": "hsla(217, 56%, 17%, 0.4)",
                 "shadowOffset": {
-                  "height": 3,
+                  "height": 2,
                   "width": 0,
                 },
-                "shadowOpacity": 0.12,
-                "shadowRadius": 2,
+                "shadowOpacity": 0.2,
+                "shadowRadius": 4,
               },
             ]
           }
@@ -629,22 +634,23 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
         >
           <Text
             accessible={true}
-            color="feedback.text.neutral.highContrast"
+            color="surface.text.staticWhite.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(0, 0%, 100%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(0, 0%, 100%, 0.88)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -718,12 +724,12 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
                       "strokeWidth",
                     ]
                   }
-                  stroke={4282603381}
+                  stroke={4282406509}
                   strokeWidth="2px"
                 />
                 <RNSVGPath
                   d="M0,0 H14 L7,7 Q7,7 7,7 Z"
-                  fill={4281484642}
+                  fill={4281287254}
                   propList={
                     [
                       "fill",
@@ -770,24 +776,22 @@ exports[`<Tooltip /> should render with title 1`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsla(230, 100%, 42%, 1)"
-    activeBorderColor="hsla(230, 100%, 42%, 1)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsla(218, 89%, 51%, 1)"
-    defaultBorderColor="hsla(218, 89%, 51%, 1)"
-    focusBackgroundColor="hsla(227, 100%, 45%, 1)"
-    focusBorderColor="hsla(227, 100%, 45%, 1)"
-    focusRingColor="hsla(218, 89%, 51%, 0.18)"
+    defaultBackgroundColor="hsla(227, 100%, 59%, 1)"
+    defaultBorderColor="hsla(227, 100%, 59%, 1)"
+    focusBackgroundColor="hsla(227, 71%, 51%, 1)"
+    focusBorderColor="hsla(227, 100%, 59%, 1)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
-    hoverBackgroundColor="hsla(223, 95%, 48%, 1)"
-    hoverBorderColor="hsla(223, 95%, 48%, 1)"
+    hoverBackgroundColor="hsla(227, 71%, 51%, 1)"
+    hoverBorderColor="hsla(227, 100%, 59%, 1)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -809,15 +813,16 @@ exports[`<Tooltip /> should render with title 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
-          "borderRadius": 2,
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -828,8 +833,8 @@ exports[`<Tooltip /> should render with title 1`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsla(218, 89%, 51%, 1)",
-          "borderColor": "hsla(218, 89%, 51%, 1)",
+          "backgroundColor": "hsla(227, 100%, 59%, 1)",
+          "borderColor": "hsla(227, 100%, 59%, 1)",
         },
       ]
     }
@@ -852,28 +857,31 @@ exports[`<Tooltip /> should render with title 1`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsla(0, 0%, 100%, 1)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -967,8 +975,8 @@ exports[`<Tooltip /> should render with title 1`] = `
                 "position": "absolute",
               },
               {
-                "backgroundColor": "hsla(216, 33%, 29%, 1)",
-                "borderColor": "hsla(216, 27%, 36%, 1)",
+                "backgroundColor": "hsla(211, 29%, 26%, 1)",
+                "borderColor": "hsla(211, 26%, 34%, 1)",
                 "borderRadius": 4,
                 "borderStyle": "solid",
                 "borderWidth": 1,
@@ -978,14 +986,14 @@ exports[`<Tooltip /> should render with title 1`] = `
                 "zIndex": 1100,
               },
               {
-                "elevation": 4,
-                "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+                "elevation": 8,
+                "shadowColor": "hsla(217, 56%, 17%, 0.4)",
                 "shadowOffset": {
-                  "height": 3,
+                  "height": 2,
                   "width": 0,
                 },
-                "shadowOpacity": 0.12,
-                "shadowRadius": 2,
+                "shadowOpacity": 0.2,
+                "shadowRadius": 4,
               },
             ]
           }
@@ -1000,21 +1008,22 @@ exports[`<Tooltip /> should render with title 1`] = `
         >
           <Text
             accessible={true}
-            color="surface.text.normal.highContrast"
+            color="surface.text.staticWhite.normal"
             data-blade-component="text"
             fontFamily="text"
             fontSize={100}
             fontStyle="normal"
-            fontWeight="bold"
+            fontWeight="semibold"
             lineHeight={100}
             style={
               [
                 {
                   "color": "hsla(0, 0%, 100%, 1)",
-                  "fontFamily": "Lato",
+                  "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
-                  "fontWeight": "700",
+                  "fontWeight": "600",
+                  "letterSpacing": 0,
                   "lineHeight": 20,
                   "marginBottom": 0,
                   "marginLeft": 0,
@@ -1033,22 +1042,23 @@ exports[`<Tooltip /> should render with title 1`] = `
           </Text>
           <Text
             accessible={true}
-            color="feedback.text.neutral.highContrast"
+            color="surface.text.staticWhite.subtle"
             data-blade-component="text"
             fontFamily="text"
             fontSize={75}
             fontStyle="normal"
             fontWeight="regular"
-            lineHeight={50}
+            lineHeight={75}
             style={
               [
                 {
-                  "color": "hsla(0, 0%, 100%, 1)",
-                  "fontFamily": "Lato",
+                  "color": "hsla(0, 0%, 100%, 0.88)",
+                  "fontFamily": "Inter",
                   "fontSize": 12,
                   "fontStyle": "normal",
                   "fontWeight": "400",
-                  "lineHeight": 16,
+                  "letterSpacing": 0,
+                  "lineHeight": 18,
                   "marginBottom": 0,
                   "marginLeft": 0,
                   "marginRight": 0,
@@ -1122,12 +1132,12 @@ exports[`<Tooltip /> should render with title 1`] = `
                       "strokeWidth",
                     ]
                   }
-                  stroke={4282603381}
+                  stroke={4282406509}
                   strokeWidth="2px"
                 />
                 <RNSVGPath
                   d="M0,0 H14 L7,7 Q7,7 7,7 Z"
-                  fill={4281484642}
+                  fill={4281287254}
                   propList={
                     [
                       "fill",
diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap
index 4df816a4de2..0f45a60c680 100644
--- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tooltip /> should render Tooltip ssr 1`] = `"<div id="root"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 juLFkx"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 gTzyYZ esItiH"><div class="StyledBaseText-dVBfTO hcXerP" data-blade-component="base-text">Hello world</div></div></button></div>"`;
+exports[`<Tooltip /> should render Tooltip ssr 1`] = `"<div id="root"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctKBsz"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO bewYNq" data-blade-component="base-text">Hello world</div></div></button></div>"`;
 
 exports[`<Tooltip /> should render Tooltip ssr 2`] = `
 .c1.c1.c1.c1.c1 {
@@ -22,17 +22,22 @@ exports[`<Tooltip /> should render Tooltip ssr 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -42,10 +47,10 @@ exports[`<Tooltip /> should render Tooltip ssr 2`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -61,6 +66,7 @@ exports[`<Tooltip /> should render Tooltip ssr 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -75,25 +81,25 @@ exports[`<Tooltip /> should render Tooltip ssr 2`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap
index b59efef42d4..f61bbfc3289 100644
--- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap
+++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`<Tooltip /> should render 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c4.c4.c4.c4.c4 {
@@ -47,12 +48,12 @@ exports[`<Tooltip /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  background-color: hsla(216,33%,29%,1);
+  background-color: hsla(211,29%,26%,1);
   border-width: 1px;
   border-radius: 4px;
-  border-color: hsla(216,27%,36%,1);
+  border-color: hsla(211,26%,34%,1);
   border-style: solid;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
   opacity: 0;
   -webkit-transform: translateY(4px);
   -ms-transform: translateY(4px);
@@ -61,27 +62,35 @@ exports[`<Tooltip /> should render 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,0.88);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   word-break: break-word;
@@ -91,10 +100,10 @@ exports[`<Tooltip /> should render 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -110,6 +119,7 @@ exports[`<Tooltip /> should render 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -124,25 +134,25 @@ exports[`<Tooltip /> should render 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -230,7 +240,7 @@ exports[`<Tooltip /> should render 1`] = `
         </p>
         <svg
           aria-hidden="true"
-          fill="hsla(216, 33%, 29%, 1)"
+          fill="hsla(211, 29%, 26%, 1)"
           height="14"
           style="position: absolute; pointer-events: none; top: 100%;"
           viewBox="0 0 14 14"
@@ -240,12 +250,12 @@ exports[`<Tooltip /> should render 1`] = `
             clip-path="url(#:r3:)"
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
             fill="none"
-            stroke="hsla(216, 27%, 36%, 1)"
+            stroke="hsla(211, 26%, 34%, 1)"
             stroke-width="3"
           />
           <path
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
-            stroke="hsla(216, 33%, 29%, 1)"
+            stroke="hsla(211, 29%, 26%, 1)"
           />
           <clippath
             id=":r3:"
@@ -284,6 +294,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c4.c4.c4.c4.c4 {
@@ -301,12 +312,12 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  background-color: hsla(216,33%,29%,1);
+  background-color: hsla(211,29%,26%,1);
   border-width: 1px;
   border-radius: 4px;
-  border-color: hsla(216,27%,36%,1);
+  border-color: hsla(211,26%,34%,1);
   border-style: solid;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
   opacity: 0;
   -webkit-transform: translateY(4px);
   -ms-transform: translateY(4px);
@@ -315,27 +326,35 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 .c7.c7.c7.c7.c7 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,0.88);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   word-break: break-word;
@@ -345,10 +364,10 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -364,6 +383,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -378,25 +398,25 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -484,7 +504,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
         </p>
         <svg
           aria-hidden="true"
-          fill="hsla(216, 33%, 29%, 1)"
+          fill="hsla(211, 29%, 26%, 1)"
           height="14"
           style="position: absolute; pointer-events: none; top: 100%;"
           viewBox="0 0 14 14"
@@ -494,12 +514,12 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
             clip-path="url(#:rb:)"
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
             fill="none"
-            stroke="hsla(216, 27%, 36%, 1)"
+            stroke="hsla(211, 26%, 34%, 1)"
             stroke-width="3"
           />
           <path
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
-            stroke="hsla(216, 33%, 29%, 1)"
+            stroke="hsla(211, 29%, 26%, 1)"
           />
           <clippath
             id=":rb:"
@@ -538,6 +558,7 @@ exports[`<Tooltip /> should render with title 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c4.c4.c4.c4.c4 {
@@ -555,12 +576,12 @@ exports[`<Tooltip /> should render with title 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  background-color: hsla(216,33%,29%,1);
+  background-color: hsla(211,29%,26%,1);
   border-width: 1px;
   border-radius: 4px;
-  border-color: hsla(216,27%,36%,1);
+  border-color: hsla(211,26%,34%,1);
   border-style: solid;
-  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
   opacity: 0;
   -webkit-transform: translateY(4px);
   -ms-transform: translateY(4px);
@@ -569,13 +590,17 @@ exports[`<Tooltip /> should render with title 1`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -583,26 +608,34 @@ exports[`<Tooltip /> should render with title 1`] = `
 
 .c7.c7.c7.c7.c7 {
   color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(0,0%,100%,0.88);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   word-break: break-word;
@@ -612,10 +645,10 @@ exports[`<Tooltip /> should render with title 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(218,89%,51%,1);
-  border-color: hsla(218,89%,51%,1);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(227,100%,59%,1);
+  border-color: hsla(227,100%,59%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -631,6 +664,7 @@ exports[`<Tooltip /> should render with title 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -645,25 +679,25 @@ exports[`<Tooltip /> should render with title 1`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsla(223,95%,48%,1);
-  border-color: hsla(223,95%,48%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsla(230,100%,42%,1);
-  border-color: hsla(230,100%,42%,1);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsla(227,100%,45%,1);
-  border-color: hsla(227,100%,45%,1);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(227,71%,51%,1);
+  border-color: hsla(227,100%,59%,1);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -757,7 +791,7 @@ exports[`<Tooltip /> should render with title 1`] = `
         </p>
         <svg
           aria-hidden="true"
-          fill="hsla(216, 33%, 29%, 1)"
+          fill="hsla(211, 29%, 26%, 1)"
           height="14"
           style="position: absolute; pointer-events: none; top: 100%;"
           viewBox="0 0 14 14"
@@ -767,12 +801,12 @@ exports[`<Tooltip /> should render with title 1`] = `
             clip-path="url(#:r7:)"
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
             fill="none"
-            stroke="hsla(216, 27%, 36%, 1)"
+            stroke="hsla(211, 26%, 34%, 1)"
             stroke-width="3"
           />
           <path
             d="M0,0 H14 L7,7 Q7,7 7,7 Z"
-            stroke="hsla(216, 33%, 29%, 1)"
+            stroke="hsla(211, 29%, 26%, 1)"
           />
           <clippath
             id=":r7:"
diff --git a/packages/blade/src/components/Tooltip/getTooltipContentWrapperStyles.ts b/packages/blade/src/components/Tooltip/getTooltipContentWrapperStyles.ts
index 9bc6bfba8cc..6cc6c629096 100644
--- a/packages/blade/src/components/Tooltip/getTooltipContentWrapperStyles.ts
+++ b/packages/blade/src/components/Tooltip/getTooltipContentWrapperStyles.ts
@@ -11,10 +11,10 @@ const getTooltipContentWrapperStyles = ({
   styles: React.CSSProperties;
 }): CSSObject => {
   return {
-    backgroundColor: theme.colors.brand.gray[200].highContrast,
+    backgroundColor: theme.colors.popup.background.intense,
     borderWidth: makeBorderSize(theme.border.width.thin),
     borderRadius: makeBorderSize(theme.border.radius.medium),
-    borderColor: theme.colors.brand.gray[300].highContrast,
+    borderColor: theme.colors.popup.border.intense,
     borderStyle: 'solid',
     boxShadow: isReactNative() ? undefined : castWebType(theme.elevation.lowRaised),
     ...styles,
diff --git a/packages/blade/src/components/Typography/BaseText/BaseText.native.tsx b/packages/blade/src/components/Typography/BaseText/BaseText.native.tsx
index f3e64ecabc8..e39f65ab952 100644
--- a/packages/blade/src/components/Typography/BaseText/BaseText.native.tsx
+++ b/packages/blade/src/components/Typography/BaseText/BaseText.native.tsx
@@ -16,8 +16,10 @@ const StyledBaseText = styled.Text<StyledBaseTextProps>(
     textDecorationLine,
     numberOfLines,
     lineHeight,
+    letterSpacing,
     textAlign,
     as,
+    opacity,
     ...props
   }) => {
     const styledPropsCSSObject = useStyledProps(props);
@@ -32,7 +34,9 @@ const StyledBaseText = styled.Text<StyledBaseTextProps>(
         textDecorationLine,
         numberOfLines,
         lineHeight,
+        letterSpacing,
         textAlign,
+        opacity,
         theme: props.theme,
       }),
       ...styledPropsCSSObject,
@@ -52,6 +56,7 @@ export const BaseText = ({
   textAlign,
   children,
   truncateAfterLines,
+  opacity,
   className,
   style,
   accessibilityProps = {},
@@ -72,6 +77,7 @@ export const BaseText = ({
       as={undefined}
       textAlign={textAlign}
       numberOfLines={truncateAfterLines}
+      opacity={opacity}
       className={className}
       style={style}
       id={id}
diff --git a/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx b/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx
index aa645f488f5..f0375ef3a24 100644
--- a/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx
+++ b/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx
@@ -21,8 +21,10 @@ const StyledBaseText = styled.div.withConfig({
     textDecorationLine,
     numberOfLines,
     lineHeight,
+    letterSpacing,
     textAlign,
     wordBreak,
+    opacity,
     ...props
   }) => {
     const styledPropsCSSObject = useStyledProps(props);
@@ -36,8 +38,10 @@ const StyledBaseText = styled.div.withConfig({
         textDecorationLine,
         numberOfLines,
         lineHeight,
+        letterSpacing,
         textAlign,
         wordBreak,
+        opacity,
         theme: props.theme,
       }),
       ...styledPropsCSSObject,
@@ -54,11 +58,13 @@ export const BaseText = ({
   fontStyle,
   textDecorationLine,
   lineHeight,
+  letterSpacing,
   as,
   textAlign,
   children,
   truncateAfterLines,
   wordBreak,
+  opacity,
   className,
   style,
   accessibilityProps = {},
@@ -76,10 +82,12 @@ export const BaseText = ({
       fontStyle={fontStyle}
       textDecorationLine={textDecorationLine}
       lineHeight={lineHeight}
+      letterSpacing={letterSpacing}
       as={as}
       textAlign={textAlign}
       numberOfLines={truncateAfterLines}
       wordBreak={wordBreak}
+      opacity={opacity}
       className={className}
       style={style}
       id={id}
diff --git a/packages/blade/src/components/Typography/BaseText/__tests__/BaseText.native.test.tsx b/packages/blade/src/components/Typography/BaseText/__tests__/BaseText.native.test.tsx
index 2e6198a2d9d..d9da80f3418 100644
--- a/packages/blade/src/components/Typography/BaseText/__tests__/BaseText.native.test.tsx
+++ b/packages/blade/src/components/Typography/BaseText/__tests__/BaseText.native.test.tsx
@@ -17,7 +17,7 @@ describe('<BaseText />', () => {
     const displayText = 'Displaying some text';
     const { toJSON, getByText } = renderWithTheme(
       <BaseText
-        color="surface.text.normal.highContrast"
+        color="surface.text.gray.normal"
         fontFamily="text"
         lineHeight={100}
         fontSize={25}
@@ -34,7 +34,7 @@ describe('<BaseText />', () => {
     const displayText = 'Displaying some text';
     const { toJSON, getByText } = renderWithTheme(
       <BaseText
-        color="surface.text.normal.highContrast"
+        color="surface.text.gray.normal"
         fontFamily="text"
         lineHeight={100}
         fontSize={25}
@@ -54,7 +54,7 @@ describe('<BaseText />', () => {
       const displayText = 'Displaying some text';
       renderWithTheme(
         <BaseText
-          color="surface.text.normal.highContrast"
+          color="surface.text.gray.normal"
           fontFamily="text"
           lineHeight={100}
           fontSize={25}
diff --git a/packages/blade/src/components/Typography/BaseText/__tests__/BaseText.web.test.tsx b/packages/blade/src/components/Typography/BaseText/__tests__/BaseText.web.test.tsx
index c07b76f49b9..e48ce839bb1 100644
--- a/packages/blade/src/components/Typography/BaseText/__tests__/BaseText.web.test.tsx
+++ b/packages/blade/src/components/Typography/BaseText/__tests__/BaseText.web.test.tsx
@@ -16,7 +16,7 @@ describe('<BaseText />', () => {
     const displayText = 'Displaying some text';
     const { container } = renderWithTheme(
       <BaseText
-        color="surface.text.normal.highContrast"
+        color="surface.text.gray.normal"
         fontFamily="text"
         lineHeight={100}
         fontSize={25}
@@ -32,7 +32,7 @@ describe('<BaseText />', () => {
     const displayText = 'Displaying some text';
     const { container } = renderWithTheme(
       <BaseText
-        color="surface.text.normal.highContrast"
+        color="surface.text.gray.normal"
         fontFamily="text"
         lineHeight={100}
         fontSize={25}
@@ -50,7 +50,7 @@ describe('<BaseText />', () => {
     const displayText = 'Displaying some text';
     const { container } = renderWithTheme(
       <BaseText
-        color="surface.text.normal.highContrast"
+        color="surface.text.gray.normal"
         fontFamily="text"
         lineHeight={100}
         fontSize={25}
diff --git a/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.native.test.tsx.snap b/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.native.test.tsx.snap
index 1788b3cf61c..3ec3bd46751 100644
--- a/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.native.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<BaseText /> should render regular text 1`] = `
 >
   <Text
     accessible={true}
-    color="surface.text.normal.highContrast"
+    color="surface.text.gray.normal"
     data-blade-component="base-text"
     fontFamily="text"
     fontSize={25}
@@ -19,11 +19,12 @@ exports[`<BaseText /> should render regular text 1`] = `
     style={
       [
         {
-          "color": "hsla(0, 0%, 100%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 10,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "letterSpacing": 0,
           "lineHeight": 20,
           "marginBottom": 0,
           "marginLeft": 0,
@@ -53,7 +54,7 @@ exports[`<BaseText /> should render text in italics style with line-through 1`]
 >
   <Text
     accessible={true}
-    color="surface.text.normal.highContrast"
+    color="surface.text.gray.normal"
     data-blade-component="base-text"
     fontFamily="text"
     fontSize={25}
@@ -63,11 +64,12 @@ exports[`<BaseText /> should render text in italics style with line-through 1`]
     style={
       [
         {
-          "color": "hsla(0, 0%, 100%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 10,
           "fontStyle": "italic",
           "fontWeight": "400",
+          "letterSpacing": 0,
           "lineHeight": 20,
           "marginBottom": 0,
           "marginLeft": 0,
@@ -77,7 +79,7 @@ exports[`<BaseText /> should render text in italics style with line-through 1`]
           "paddingLeft": 0,
           "paddingRight": 0,
           "paddingTop": 0,
-          "textDecorationColor": "hsla(0, 0%, 100%, 1)",
+          "textDecorationColor": "hsla(212, 39%, 16%, 1)",
           "textDecorationLine": "line-through",
         },
       ]
@@ -103,11 +105,12 @@ exports[`<BaseText /> should render text with default properties 1`] = `
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "letterSpacing": 0,
           "lineHeight": 20,
           "marginBottom": 0,
           "marginLeft": 0,
diff --git a/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.web.test.tsx.snap b/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.web.test.tsx.snap
index bfd71169fcf..f1865375e28 100644
--- a/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.web.test.tsx.snap
+++ b/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.web.test.tsx.snap
@@ -2,14 +2,18 @@
 
 exports[`<BaseText /> should render regular text 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -26,16 +30,20 @@ exports[`<BaseText /> should render regular text 1`] = `
 
 exports[`<BaseText /> should render text as paragraph element 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: line-through;
   text-decoration-line: line-through;
-  -webkit-text-decoration-color: hsla(0,0%,100%,1);
-  text-decoration-color: hsla(0,0%,100%,1);
+  -webkit-text-decoration-color: hsla(212,39%,16%,1);
+  text-decoration-color: hsla(212,39%,16%,1);
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -52,16 +60,20 @@ exports[`<BaseText /> should render text as paragraph element 1`] = `
 
 exports[`<BaseText /> should render text in italics style with line-through 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: italic;
   -webkit-text-decoration-line: line-through;
   text-decoration-line: line-through;
-  -webkit-text-decoration-color: hsla(0,0%,100%,1);
-  text-decoration-color: hsla(0,0%,100%,1);
+  -webkit-text-decoration-color: hsla(212,39%,16%,1);
+  text-decoration-color: hsla(212,39%,16%,1);
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -78,14 +90,18 @@ exports[`<BaseText /> should render text in italics style with line-through 1`]
 
 exports[`<BaseText /> should render text with default properties 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 1rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
diff --git a/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts b/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts
index beba8d06443..34138baf2e9 100644
--- a/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts
+++ b/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts
@@ -3,9 +3,10 @@ import type { StyledBaseTextProps } from './types';
 import getIn from '~utils/lodashButBetter/get';
 import { makeTypographySize } from '~utils/makeTypographySize';
 import { isReactNative } from '~utils';
+import { makeLetterSpacing } from '~utils/makeLetterSpacing';
 
 const getBaseTextStyles = ({
-  color = 'surface.text.normal.lowContrast',
+  color = 'surface.text.gray.normal',
   fontFamily = 'text',
   fontSize = 200,
   fontWeight = 'regular',
@@ -14,7 +15,9 @@ const getBaseTextStyles = ({
   numberOfLines,
   wordBreak,
   lineHeight = 100,
+  letterSpacing = 100,
   textAlign,
+  opacity,
   theme,
 }: StyledBaseTextProps): CSSObject => {
   const textColor = getIn(theme.colors, color);
@@ -22,6 +25,10 @@ const getBaseTextStyles = ({
   const themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);
   const themeFontWeight = theme.typography.fonts.weight[fontWeight];
   const themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);
+  const themeLetterSpacing = makeLetterSpacing(
+    theme.typography.letterSpacings[letterSpacing],
+    theme.typography.fonts.size[fontSize],
+  );
   let truncateStyles: CSSObject = {};
   let wordBreakStyles: CSSObject = {};
   if (numberOfLines !== undefined) {
@@ -58,9 +65,11 @@ const getBaseTextStyles = ({
       textDecorationColor: textColor,
     }),
     lineHeight: themeLineHeight,
+    letterSpacing: themeLetterSpacing,
     textAlign,
     margin: 0,
     padding: 0,
+    opacity,
     ...truncateStyles,
     ...wordBreakStyles,
   };
diff --git a/packages/blade/src/components/Typography/BaseText/types.ts b/packages/blade/src/components/Typography/BaseText/types.ts
index 002bc42024c..0fcbe565bb8 100644
--- a/packages/blade/src/components/Typography/BaseText/types.ts
+++ b/packages/blade/src/components/Typography/BaseText/types.ts
@@ -1,28 +1,16 @@
 import type { Theme } from '~components/BladeProvider';
 import type { AccessibilityProps } from '~utils/makeAccessible/types';
-import type { DotNotationColorStringToken, TestID } from '~utils/types';
-import type { Feedback } from '~tokens/theme/theme';
+import type { TestID } from '~utils/types';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
+import type { DotNotationToken } from '~utils/lodashButBetter/get';
 
-type FeedbackColors = `feedback.text.${DotNotationColorStringToken<
-  Theme['colors']['feedback']['text']
->}`;
-type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<
-  Theme['colors']['feedback'][Feedback]['action']['text']
->}`;
-type SurfaceColors = `surface.text.${DotNotationColorStringToken<
-  Theme['colors']['surface']['text']
->}`;
-type ActionColors = `action.text.${DotNotationColorStringToken<Theme['colors']['action']['text']>}`;
-type BadgeTextColors = `badge.text.${DotNotationColorStringToken<
-  Theme['colors']['badge']['text']
->}`;
-type WhiteTextColors = `white.action.text.${DotNotationColorStringToken<
-  Theme['colors']['white']['action']['text']
->}`;
-
-type BrandPrimaryColors = `brand.primary.${keyof Theme['colors']['brand']['primary']}`;
-type BrandSecondaryColors = `brand.secondary.${keyof Theme['colors']['brand']['secondary']}`;
+type InteractiveText = DotNotationToken<Theme['colors']['interactive']['text']>;
+type SurfaceText = DotNotationToken<Theme['colors']['surface']['text']>;
+type FeedbackText = DotNotationToken<Theme['colors']['feedback']['text']>;
+export type TextColors =
+  | `interactive.text.${InteractiveText}`
+  | `surface.text.${SurfaceText}`
+  | `feedback.text.${FeedbackText}`;
 
 type As =
   | 'code'
@@ -38,25 +26,21 @@ type As =
   | 'q'
   | 'cite'
   | 'figcaption'
-  | 'div';
+  | 'div'
+  | 'label';
+
 export type BaseTextProps = {
   id?: string;
-  color?:
-    | BrandPrimaryColors
-    | BrandSecondaryColors
-    | ActionColors
-    | FeedbackColors
-    | SurfaceColors
-    | FeedbackActionColors
-    | WhiteTextColors
-    | BadgeTextColors;
+  color?: TextColors;
   fontFamily?: keyof Theme['typography']['fonts']['family'];
   fontSize?: keyof Theme['typography']['fonts']['size'];
   fontWeight?: keyof Theme['typography']['fonts']['weight'];
   fontStyle?: 'italic' | 'normal';
   textDecorationLine?: 'line-through' | 'none' | 'underline';
   lineHeight?: keyof Theme['typography']['lineHeights'];
+  letterSpacing?: keyof Theme['typography']['letterSpacings'];
   wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+  opacity?: number;
   /**
    * Web only
    */
@@ -84,11 +68,13 @@ export type StyledBaseTextProps = Pick<
   | 'fontStyle'
   | 'textDecorationLine'
   | 'lineHeight'
+  | 'letterSpacing'
   | 'as'
   | 'textAlign'
   | 'numberOfLines'
   | 'truncateAfterLines'
   | 'wordBreak'
+  | 'opacity'
 > & { theme: Theme };
 
-export type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
diff --git a/packages/blade/src/components/Typography/Code/Code.stories.tsx b/packages/blade/src/components/Typography/Code/Code.stories.tsx
index 06d947c311e..236740cbe00 100644
--- a/packages/blade/src/components/Typography/Code/Code.stories.tsx
+++ b/packages/blade/src/components/Typography/Code/Code.stories.tsx
@@ -14,12 +14,7 @@ const Page = (): ReactElement => {
       componentDescription="Code component can be used for displaying token, variable names, or inlined code snippets."
       componentName="Code"
       apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Typography/_decisions/decisions.md"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11770%3A147140',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=10344%3A189840',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11770%3A147140"
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -75,7 +70,7 @@ export const Code = CodeTemplate.bind({});
 
 export const WithBoldColor = CodeTemplate.bind({});
 WithBoldColor.args = {
-  color: 'feedback.positive.action.text.primary.default.lowContrast',
+  color: 'interactive.text.positive.subtle',
   isHighlighted: false,
   weight: 'bold',
 };
diff --git a/packages/blade/src/components/Typography/Code/Code.tsx b/packages/blade/src/components/Typography/Code/Code.tsx
index 18178bb27eb..7af4f0b509d 100644
--- a/packages/blade/src/components/Typography/Code/Code.tsx
+++ b/packages/blade/src/components/Typography/Code/Code.tsx
@@ -24,7 +24,7 @@ type CodeCommonProps = {
    * @default small
    */
   size?: Extract<BaseTextSizes, 'small' | 'medium'>;
-  weight?: 'regular' | 'bold';
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'bold'>;
   isHighlighted?: boolean;
   color?: BaseTextProps['color'];
 } & TestID &
@@ -90,7 +90,7 @@ const CodeContainer = styled(BaseBox)<CodeContainerProps>((props) => {
   return {
     padding,
     backgroundColor: props.isHighlighted
-      ? props.theme.colors.brand.gray.a100.lowContrast
+      ? props.theme.colors.feedback.background.neutral.subtle
       : undefined,
     borderRadius: props.theme.border.radius.medium,
     display: isPlatformWeb ? 'inline-block' : 'flex',
@@ -114,14 +114,14 @@ const getCodeColor = ({
       }
     }
 
-    return 'surface.text.subtle.lowContrast';
+    return 'surface.text.gray.subtle';
   }
 
   if (color) {
     return color;
   }
 
-  return 'surface.text.normal.lowContrast';
+  return 'surface.text.gray.normal';
 };
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
diff --git a/packages/blade/src/components/Typography/Code/__tests__/Code.native.test.tsx b/packages/blade/src/components/Typography/Code/__tests__/Code.native.test.tsx
index 60d6b04182c..3cb0ea71be2 100644
--- a/packages/blade/src/components/Typography/Code/__tests__/Code.native.test.tsx
+++ b/packages/blade/src/components/Typography/Code/__tests__/Code.native.test.tsx
@@ -12,7 +12,7 @@ describe('<Code />', () => {
 
   it('should render Code with color', () => {
     const { toJSON } = renderWithTheme(
-      <Code isHighlighted={false} color="action.text.link.disabled">
+      <Code isHighlighted={false} color="interactive.text.primary.disabled">
         TEST_TOKEN
       </Code>,
     );
diff --git a/packages/blade/src/components/Typography/Code/__tests__/Code.web.test.tsx b/packages/blade/src/components/Typography/Code/__tests__/Code.web.test.tsx
index 5ff95c7e7c5..22479296c22 100644
--- a/packages/blade/src/components/Typography/Code/__tests__/Code.web.test.tsx
+++ b/packages/blade/src/components/Typography/Code/__tests__/Code.web.test.tsx
@@ -19,7 +19,7 @@ describe('<Code />', () => {
 
   it('should render Code with color', () => {
     const { container } = renderWithTheme(
-      <Code isHighlighted={false} color="action.text.link.disabled">
+      <Code isHighlighted={false} color="interactive.text.primary.disabled">
         TEST_TOKEN
       </Code>,
     );
diff --git a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
index d21c131d3dd..9c4dfca9768 100644
--- a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<Code /> should render Code with color 1`] = `
   >
     <Text
       accessible={true}
-      color="action.text.link.disabled"
+      color="interactive.text.primary.disabled"
       data-blade-component="base-text"
       fontFamily="code"
       fontSize={25}
@@ -40,11 +40,12 @@ exports[`<Code /> should render Code with color 1`] = `
       style={
         [
           {
-            "color": "hsla(218, 19%, 81%, 1)",
-            "fontFamily": "Courier",
+            "color": "hsla(227, 100%, 59%, 0.18)",
+            "fontFamily": "Menlo",
             "fontSize": 10,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "letterSpacing": 0,
             "lineHeight": 14,
             "marginBottom": 0,
             "marginLeft": 0,
@@ -82,7 +83,7 @@ exports[`<Code /> should render Code with default properties 1`] = `
         {},
         {
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
           "borderRadius": 4,
           "display": "flex",
           "lineHeight": 0,
@@ -97,7 +98,7 @@ exports[`<Code /> should render Code with default properties 1`] = `
   >
     <Text
       accessible={true}
-      color="surface.text.subtle.lowContrast"
+      color="surface.text.gray.subtle"
       data-blade-component="base-text"
       fontFamily="code"
       fontSize={25}
@@ -106,11 +107,12 @@ exports[`<Code /> should render Code with default properties 1`] = `
       style={
         [
           {
-            "color": "hsla(216, 27%, 36%, 1)",
-            "fontFamily": "Courier",
+            "color": "hsla(211, 26%, 34%, 1)",
+            "fontFamily": "Menlo",
             "fontSize": 10,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "letterSpacing": 0,
             "lineHeight": 14,
             "marginBottom": 0,
             "marginLeft": 0,
@@ -162,7 +164,7 @@ exports[`<Code /> should render isHighlighted false Code 1`] = `
   >
     <Text
       accessible={true}
-      color="surface.text.normal.lowContrast"
+      color="surface.text.gray.normal"
       data-blade-component="base-text"
       fontFamily="code"
       fontSize={25}
@@ -171,11 +173,12 @@ exports[`<Code /> should render isHighlighted false Code 1`] = `
       style={
         [
           {
-            "color": "hsla(217, 56%, 17%, 1)",
-            "fontFamily": "Courier",
+            "color": "hsla(212, 39%, 16%, 1)",
+            "fontFamily": "Menlo",
             "fontSize": 10,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "letterSpacing": 0,
             "lineHeight": 14,
             "marginBottom": 0,
             "marginLeft": 0,
@@ -213,7 +216,7 @@ exports[`<Code /> should render medium Code 1`] = `
         {},
         {
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
           "borderRadius": 4,
           "display": "flex",
           "lineHeight": 0,
@@ -228,7 +231,7 @@ exports[`<Code /> should render medium Code 1`] = `
   >
     <Text
       accessible={true}
-      color="surface.text.subtle.lowContrast"
+      color="surface.text.gray.subtle"
       data-blade-component="base-text"
       fontFamily="code"
       fontSize={75}
@@ -237,11 +240,12 @@ exports[`<Code /> should render medium Code 1`] = `
       style={
         [
           {
-            "color": "hsla(216, 27%, 36%, 1)",
-            "fontFamily": "Courier",
+            "color": "hsla(211, 26%, 34%, 1)",
+            "fontFamily": "Menlo",
             "fontSize": 12,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "letterSpacing": 0,
             "lineHeight": 18,
             "marginBottom": 0,
             "marginLeft": 0,
@@ -279,7 +283,7 @@ exports[`<Code /> should render small Code 1`] = `
         {},
         {
           "alignSelf": "center",
-          "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
+          "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
           "borderRadius": 4,
           "display": "flex",
           "lineHeight": 0,
@@ -294,7 +298,7 @@ exports[`<Code /> should render small Code 1`] = `
   >
     <Text
       accessible={true}
-      color="surface.text.subtle.lowContrast"
+      color="surface.text.gray.subtle"
       data-blade-component="base-text"
       fontFamily="code"
       fontSize={25}
@@ -303,11 +307,12 @@ exports[`<Code /> should render small Code 1`] = `
       style={
         [
           {
-            "color": "hsla(216, 27%, 36%, 1)",
-            "fontFamily": "Courier",
+            "color": "hsla(211, 26%, 34%, 1)",
+            "fontFamily": "Menlo",
             "fontSize": 10,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "letterSpacing": 0,
             "lineHeight": 14,
             "marginBottom": 0,
             "marginLeft": 0,
diff --git a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap
index 0ed7825c655..4aea4de14f1 100644
--- a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap
@@ -2,14 +2,18 @@
 
 exports[`<Code /> should render Code with color 1`] = `
 .c1.c1.c1.c1.c1 {
-  color: hsla(218,19%,81%,1);
-  font-family: monospace;
+  color: hsla(227,100%,59%,0.18);
+  font-family: "Menlo",San Francisco Mono,Courier New,Roboto Mono,monospace;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -39,21 +43,25 @@ exports[`<Code /> should render Code with color 1`] = `
 
 exports[`<Code /> should render Code with default properties 1`] = `
 .c1.c1.c1.c1.c1 {
-  color: hsla(216,27%,36%,1);
-  font-family: monospace;
+  color: hsla(211,26%,34%,1);
+  font-family: "Menlo",San Francisco Mono,Courier New,Roboto Mono,monospace;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c0.c0.c0.c0.c0 {
   padding: 0px 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 4px;
   display: inline-block;
   vertical-align: middle;
@@ -77,14 +85,18 @@ exports[`<Code /> should render Code with default properties 1`] = `
 
 exports[`<Code /> should render isHighlighted false Code 1`] = `
 .c1.c1.c1.c1.c1 {
-  color: hsla(217,56%,17%,1);
-  font-family: monospace;
+  color: hsla(212,39%,16%,1);
+  font-family: "Menlo",San Francisco Mono,Courier New,Roboto Mono,monospace;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -114,21 +126,25 @@ exports[`<Code /> should render isHighlighted false Code 1`] = `
 
 exports[`<Code /> should render medium Code 1`] = `
 .c1.c1.c1.c1.c1 {
-  color: hsla(216,27%,36%,1);
-  font-family: monospace;
+  color: hsla(211,26%,34%,1);
+  font-family: "Menlo",San Francisco Mono,Courier New,Roboto Mono,monospace;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c0.c0.c0.c0.c0 {
   padding: 0px 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 4px;
   display: inline-block;
   vertical-align: middle;
@@ -152,21 +168,25 @@ exports[`<Code /> should render medium Code 1`] = `
 
 exports[`<Code /> should render small Code 1`] = `
 .c1.c1.c1.c1.c1 {
-  color: hsla(216,27%,36%,1);
-  font-family: monospace;
+  color: hsla(211,26%,34%,1);
+  font-family: "Menlo",San Francisco Mono,Courier New,Roboto Mono,monospace;
   font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 0.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c0.c0.c0.c0.c0 {
   padding: 0px 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
   border-radius: 4px;
   display: inline-block;
   vertical-align: middle;
diff --git a/packages/blade/src/components/Typography/Display/Display.stories.tsx b/packages/blade/src/components/Typography/Display/Display.stories.tsx
index 97aa6d3972d..40a83c87732 100644
--- a/packages/blade/src/components/Typography/Display/Display.stories.tsx
+++ b/packages/blade/src/components/Typography/Display/Display.stories.tsx
@@ -17,12 +17,7 @@ const Page = (): ReactElement => {
       componentDescription="The Display component adds a strong visual touch. Utilize it to create eye-catching sections on your landing pages."
       componentName="Display"
       apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Typography/_decisions/decisions.md"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=13708%3A180902&mode=design&t=1sYKFDyXDXlugu2m-1',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?type=design&node-id=10344%3A189840&mode=design&t=Np5DsiaBhYmDNpTw-1',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=13708%3A180902&mode=design&t=1sYKFDyXDXlugu2m-1"
     >
       <StorybookTitle>Usage</StorybookTitle>
       <Sandbox>
diff --git a/packages/blade/src/components/Typography/Display/Display.tsx b/packages/blade/src/components/Typography/Display/Display.tsx
index b900b3e6654..c66a18a8084 100644
--- a/packages/blade/src/components/Typography/Display/Display.tsx
+++ b/packages/blade/src/components/Typography/Display/Display.tsx
@@ -2,7 +2,6 @@ import type { ReactElement } from 'react';
 import { BaseText } from '../BaseText';
 import type { BaseTextProps, BaseTextSizes } from '../BaseText/types';
 import { useValidateAsProp } from '../utils';
-import type { ColorContrast, ColorContrastTypes, TextTypes } from '~tokens/theme/theme';
 import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { TestID } from '~utils/types';
@@ -18,8 +17,7 @@ export type DisplayProps = {
    */
   color?: BaseTextProps['color'];
   size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge'>;
-  contrast?: ColorContrastTypes;
-  type?: TextTypes;
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
   children: React.ReactNode;
   textAlign?: BaseTextProps['textAlign'];
   textDecorationLine?: BaseTextProps['textDecorationLine'];
@@ -29,40 +27,40 @@ export type DisplayProps = {
 const getProps = ({
   as,
   size,
-  type,
-  contrast,
+  weight,
   color,
   testID,
-}: Pick<DisplayProps, 'as' | 'size' | 'type' | 'color' | 'contrast' | 'testID'>): Omit<
+}: Pick<DisplayProps, 'as' | 'size' | 'color' | 'weight' | 'testID'>): Omit<
   BaseTextProps,
   'children'
 > => {
   const isPlatformWeb = getPlatformType() === 'browser' || getPlatformType() === 'node';
-  const colorContrast: keyof ColorContrast = contrast ? `${contrast}Contrast` : 'lowContrast';
+  const letterSpacing = weight === 'medium' || weight === 'regular' ? 50 : 100;
   const props: Omit<BaseTextProps, 'children'> = {
-    color: color ?? `surface.text.${type ?? 'normal'}.${colorContrast}`,
-    fontSize: 1100,
-    fontWeight: 'bold',
+    color,
+    fontSize: 800,
+    fontWeight: weight,
     fontStyle: 'normal',
-    lineHeight: 900,
-    fontFamily: 'text',
+    lineHeight: 800,
+    fontFamily: 'heading',
     accessibilityProps: isPlatformWeb ? {} : { role: 'heading' },
     componentName: 'display',
     testID,
+    letterSpacing,
   };
 
   if (size === 'small') {
-    props.fontSize = 1100;
-    props.lineHeight = 900;
+    props.fontSize = 800;
+    props.lineHeight = 800;
   } else if (size === 'medium') {
-    props.fontSize = 1200;
-    props.lineHeight = 1000;
+    props.fontSize = 900;
+    props.lineHeight = 900;
   } else if (size === 'large') {
-    props.fontSize = 1300;
-    props.lineHeight = 1100;
+    props.fontSize = 1000;
+    props.lineHeight = 1000;
   } else if (size === 'xlarge') {
-    props.fontSize = 1600;
-    props.lineHeight = 1500;
+    props.fontSize = 1100;
+    props.lineHeight = 1100;
   }
 
   props.as = isPlatformWeb ? 'h1' : undefined;
@@ -74,9 +72,8 @@ const getProps = ({
 export const Display = ({
   as,
   size = 'small',
-  type = 'normal',
-  contrast = 'low',
-  color,
+  weight = 'semibold',
+  color = 'surface.text.gray.normal',
   children,
   testID,
   textAlign,
@@ -85,7 +82,7 @@ export const Display = ({
 }: DisplayProps): ReactElement => {
   useValidateAsProp({ componentName: 'Display', as, validAsValues });
 
-  const props = getProps({ as, size, type, contrast, color, testID });
+  const props = getProps({ as, size, color, weight, testID });
 
   return (
     <BaseText
diff --git a/packages/blade/src/components/Typography/Display/__tests__/Display.native.test.tsx b/packages/blade/src/components/Typography/Display/__tests__/Display.native.test.tsx
index 5d54859c100..cbaf79f094b 100644
--- a/packages/blade/src/components/Typography/Display/__tests__/Display.native.test.tsx
+++ b/packages/blade/src/components/Typography/Display/__tests__/Display.native.test.tsx
@@ -19,7 +19,7 @@ describe('<Display />', () => {
   it('should render Display with variant "small" and contrast "high"', () => {
     const displayText = 'Displaying Landing Screen Display';
     const { toJSON, getByText } = renderWithTheme(
-      <Display type="normal" size="small" contrast="high">
+      <Display color="surface.text.gray.normal" size="small">
         {displayText}
       </Display>,
     );
@@ -31,7 +31,7 @@ describe('<Display />', () => {
     it(`should render Display with variant "${size}"`, () => {
       const displayText = 'Displaying Landing Screen Display';
       const { toJSON, getByText } = renderWithTheme(
-        <Display type="normal" size={size}>
+        <Display color="surface.text.gray.normal" size={size}>
           {displayText}
         </Display>,
       );
@@ -43,7 +43,7 @@ describe('<Display />', () => {
   it('should render Display with color', () => {
     const displayText = 'Displaying Landing Page Display';
     const { toJSON } = renderWithTheme(
-      <Display color="surface.text.subtle.highContrast">{displayText}</Display>,
+      <Display color="surface.text.gray.subtle">{displayText}</Display>,
     );
     expect(toJSON()).toMatchSnapshot();
   });
@@ -52,7 +52,7 @@ describe('<Display />', () => {
     const { toJSON } = renderWithTheme(
       <Display>
         Supercharge your business with the all‑powerful{' '}
-        <Display as="span" color="feedback.information.action.text.primary.default.lowContrast">
+        <Display as="span" color="interactive.text.information.subtle">
           Payment Gateway
         </Display>
       </Display>,
@@ -63,7 +63,7 @@ describe('<Display />', () => {
   it('should render with as prop without errors', () => {
     const displayText = 'Displaying Landing Screen Display';
     const { getByText } = renderWithTheme(
-      <Display as="span" type="subdued" size="large">
+      <Display as="span" color="surface.text.gray.muted" size="large">
         {displayText}
       </Display>,
     );
diff --git a/packages/blade/src/components/Typography/Display/__tests__/Display.web.test.tsx b/packages/blade/src/components/Typography/Display/__tests__/Display.web.test.tsx
index 95e786eb0bb..f45ab653478 100644
--- a/packages/blade/src/components/Typography/Display/__tests__/Display.web.test.tsx
+++ b/packages/blade/src/components/Typography/Display/__tests__/Display.web.test.tsx
@@ -21,7 +21,7 @@ describe('<Display />', () => {
   it('should render Display with variant "small" and contrast "high"', () => {
     const displayText = 'Displaying Landing Page Display';
     const { container, getByRole, getByText } = renderWithTheme(
-      <Display type="normal" size="small" contrast="high">
+      <Display color="surface.text.gray.normal" size="small">
         {displayText}
       </Display>,
     );
@@ -33,7 +33,7 @@ describe('<Display />', () => {
   it('should render Display with color', () => {
     const displayText = 'Displaying Landing Page Display';
     const { container, getByRole } = renderWithTheme(
-      <Display color="surface.text.subtle.highContrast">{displayText}</Display>,
+      <Display color="surface.text.gray.subtle">{displayText}</Display>,
     );
     expect(getByRole('heading', { level: 1 })).toBeInTheDocument();
     expect(container).toMatchSnapshot();
@@ -43,7 +43,7 @@ describe('<Display />', () => {
     const { container } = renderWithTheme(
       <Display>
         Supercharge your business with the all‑powerful{' '}
-        <Display as="span" color="feedback.information.action.text.primary.default.lowContrast">
+        <Display as="span" color="interactive.text.information.subtle">
           Payment Gateway
         </Display>
       </Display>,
@@ -55,7 +55,7 @@ describe('<Display />', () => {
     it(`should render Display with size "${size}"`, () => {
       const displayText = 'Displaying Landing Page Display';
       const { container, getByRole, getByText } = renderWithTheme(
-        <Display type="muted" size={size}>
+        <Display color="surface.text.gray.muted" size={size}>
           {displayText}
         </Display>,
       );
diff --git a/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.native.test.tsx.snap b/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.native.test.tsx.snap
index 9a7341ab332..cd0488e50a9 100644
--- a/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.native.test.tsx.snap
@@ -11,22 +11,23 @@ exports[`<Display /> should render Display with color 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.subtle.highContrast"
+    color="surface.text.gray.subtle"
     data-blade-component="display"
-    fontFamily="text"
-    fontSize={1100}
+    fontFamily="heading"
+    fontSize={800}
     fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={900}
+    fontWeight="semibold"
+    lineHeight={800}
     style={
       [
         {
-          "color": "hsla(220, 30%, 96%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 40,
+          "color": "hsla(211, 26%, 34%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 34,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 48,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 40,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -56,22 +57,23 @@ exports[`<Display /> should render Display with default properties 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="display"
-    fontFamily="text"
-    fontSize={1100}
+    fontFamily="heading"
+    fontSize={800}
     fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={900}
+    fontWeight="semibold"
+    lineHeight={800}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 40,
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 34,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 48,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 40,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -101,22 +103,23 @@ exports[`<Display /> should render Display with mixed color 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="display"
-    fontFamily="text"
-    fontSize={1100}
+    fontFamily="heading"
+    fontSize={800}
     fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={900}
+    fontWeight="semibold"
+    lineHeight={800}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 40,
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 34,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 48,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 40,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -135,22 +138,23 @@ exports[`<Display /> should render Display with mixed color 1`] = `
     <Text
       accessibilityRole="header"
       accessible={true}
-      color="feedback.information.action.text.primary.default.lowContrast"
+      color="interactive.text.information.subtle"
       data-blade-component="display"
-      fontFamily="text"
-      fontSize={1100}
+      fontFamily="heading"
+      fontSize={800}
       fontStyle="normal"
-      fontWeight="bold"
-      lineHeight={900}
+      fontWeight="semibold"
+      lineHeight={800}
       style={
         [
           {
-            "color": "hsla(195, 100%, 31%, 1)",
-            "fontFamily": "Lato",
-            "fontSize": 40,
+            "color": "hsla(200, 84%, 44%, 1)",
+            "fontFamily": "TASA Orbiter Display",
+            "fontSize": 34,
             "fontStyle": "normal",
-            "fontWeight": "700",
-            "lineHeight": 48,
+            "fontWeight": "600",
+            "letterSpacing": 0,
+            "lineHeight": 40,
             "marginBottom": 0,
             "marginLeft": 0,
             "marginRight": 0,
@@ -181,22 +185,23 @@ exports[`<Display /> should render Display with variant "large" 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="display"
-    fontFamily="text"
-    fontSize={1300}
+    fontFamily="heading"
+    fontSize={1000}
     fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={1100}
+    fontWeight="semibold"
+    lineHeight={1000}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 56,
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 38,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 64,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 46,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -226,22 +231,23 @@ exports[`<Display /> should render Display with variant "medium" 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="display"
-    fontFamily="text"
-    fontSize={1200}
+    fontFamily="heading"
+    fontSize={900}
     fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={1000}
+    fontWeight="semibold"
+    lineHeight={900}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 48,
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 36,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 56,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 42,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -271,22 +277,23 @@ exports[`<Display /> should render Display with variant "small" 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="display"
-    fontFamily="text"
-    fontSize={1100}
+    fontFamily="heading"
+    fontSize={800}
     fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={900}
+    fontWeight="semibold"
+    lineHeight={800}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 40,
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 34,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 48,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 40,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -316,22 +323,23 @@ exports[`<Display /> should render Display with variant "small" and contrast "hi
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.highContrast"
+    color="surface.text.gray.normal"
     data-blade-component="display"
-    fontFamily="text"
-    fontSize={1100}
+    fontFamily="heading"
+    fontSize={800}
     fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={900}
+    fontWeight="semibold"
+    lineHeight={800}
     style={
       [
         {
-          "color": "hsla(0, 0%, 100%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 40,
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 34,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 48,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 40,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -361,22 +369,23 @@ exports[`<Display /> should render Display with variant "xlarge" 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="display"
-    fontFamily="text"
-    fontSize={1600}
+    fontFamily="heading"
+    fontSize={1100}
     fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={1500}
+    fontWeight="semibold"
+    lineHeight={1100}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 64,
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 40,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 72,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 48,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
diff --git a/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.ssr.test.tsx.snap b/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.ssr.test.tsx.snap
index 4e3f3a34f6b..653d168802f 100644
--- a/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.ssr.test.tsx.snap
@@ -1,17 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Display /> should render 1`] = `"<div id="root"><h1 class="StyledBaseText-dVBfTO cTlgMv" data-blade-component="display">Displaying Landing Page Display</h1></div>"`;
+exports[`<Display /> should render 1`] = `"<div id="root"><h1 letter-spacing="100" class="StyledBaseText-dVBfTO eYAGVi" data-blade-component="display">Displaying Landing Page Display</h1></div>"`;
 
 exports[`<Display /> should render 2`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 3.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -22,6 +26,7 @@ exports[`<Display /> should render 2`] = `
   <h1
     class="c0"
     data-blade-component="display"
+    letter-spacing="100"
   >
     Displaying Landing Page Display
   </h1>
diff --git a/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.web.test.tsx.snap b/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.web.test.tsx.snap
index 350587f38ac..91ea5c0df9d 100644
--- a/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.web.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Display/__tests__/__snapshots__/Display.web.test.tsx.snap
@@ -2,14 +2,18 @@
 
 exports[`<Display /> should render Display with color 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(220,30%,96%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,26%,34%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 3.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -18,6 +22,7 @@ exports[`<Display /> should render Display with color 1`] = `
   <h1
     class="c0"
     data-blade-component="display"
+    letter-spacing="100"
   >
     Displaying Landing Page Display
   </h1>
@@ -26,14 +31,18 @@ exports[`<Display /> should render Display with color 1`] = `
 
 exports[`<Display /> should render Display with default properties 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 3.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -42,6 +51,7 @@ exports[`<Display /> should render Display with default properties 1`] = `
   <h1
     class="c0"
     data-blade-component="display"
+    letter-spacing="100"
   >
     Displaying Landing Page Display
   </h1>
@@ -50,27 +60,35 @@ exports[`<Display /> should render Display with default properties 1`] = `
 
 exports[`<Display /> should render Display with mixed color 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 3.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c1.c1.c1.c1.c1 {
-  color: hsla(195,100%,31%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(200,84%,44%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 3.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -79,12 +97,14 @@ exports[`<Display /> should render Display with mixed color 1`] = `
   <h1
     class="c0"
     data-blade-component="display"
+    letter-spacing="100"
   >
     Supercharge your business with the all‑powerful
      
     <span
       class="c1"
       data-blade-component="display"
+      letter-spacing="100"
     >
       Payment Gateway
     </span>
@@ -94,14 +114,18 @@ exports[`<Display /> should render Display with mixed color 1`] = `
 
 exports[`<Display /> should render Display with size "large" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 4rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 4.5rem;
+  line-height: 4.375rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -110,6 +134,7 @@ exports[`<Display /> should render Display with size "large" 1`] = `
   <h1
     class="c0"
     data-blade-component="display"
+    letter-spacing="100"
   >
     Displaying Landing Page Display
   </h1>
@@ -118,14 +143,18 @@ exports[`<Display /> should render Display with size "large" 1`] = `
 
 exports[`<Display /> should render Display with size "medium" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 3.5rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 4rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -134,6 +163,7 @@ exports[`<Display /> should render Display with size "medium" 1`] = `
   <h1
     class="c0"
     data-blade-component="display"
+    letter-spacing="100"
   >
     Displaying Landing Page Display
   </h1>
@@ -142,14 +172,18 @@ exports[`<Display /> should render Display with size "medium" 1`] = `
 
 exports[`<Display /> should render Display with size "small" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(211,22%,56%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 3.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -158,6 +192,7 @@ exports[`<Display /> should render Display with size "small" 1`] = `
   <h1
     class="c0"
     data-blade-component="display"
+    letter-spacing="100"
   >
     Displaying Landing Page Display
   </h1>
@@ -166,14 +201,18 @@ exports[`<Display /> should render Display with size "small" 1`] = `
 
 exports[`<Display /> should render Display with size "xlarge" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 5.5rem;
-  font-weight: 700;
+  color: hsla(211,22%,56%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 4.5rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 6.5rem;
+  line-height: 4.875rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -182,6 +221,7 @@ exports[`<Display /> should render Display with size "xlarge" 1`] = `
   <h1
     class="c0"
     data-blade-component="display"
+    letter-spacing="100"
   >
     Displaying Landing Page Display
   </h1>
@@ -190,14 +230,18 @@ exports[`<Display /> should render Display with size "xlarge" 1`] = `
 
 exports[`<Display /> should render Display with variant "small" and contrast "high" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 3.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -206,6 +250,7 @@ exports[`<Display /> should render Display with variant "small" and contrast "hi
   <h1
     class="c0"
     data-blade-component="display"
+    letter-spacing="100"
   >
     Displaying Landing Page Display
   </h1>
diff --git a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx
index 67d54a74df9..18dd2bba4f8 100644
--- a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx
+++ b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx
@@ -18,12 +18,7 @@ const Page = (): ReactElement => {
       componentDescription="The Heading Component is usually used for headings of each major section of a page."
       componentName="Heading"
       apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Typography/_decisions/decisions.md"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11770%3A147140',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=10344%3A189907',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11770%3A147140"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Typography/Heading/Heading.tsx b/packages/blade/src/components/Typography/Heading/Heading.tsx
index d8b8a7f9304..cdd07d86632 100644
--- a/packages/blade/src/components/Typography/Heading/Heading.tsx
+++ b/packages/blade/src/components/Typography/Heading/Heading.tsx
@@ -3,18 +3,13 @@ import type { ReactElement } from 'react';
 import { BaseText } from '../BaseText';
 import type { BaseTextProps, BaseTextSizes } from '../BaseText/types';
 import { useValidateAsProp } from '../utils';
-import type { ColorContrast, ColorContrastTypes, TextTypes } from '~tokens/theme/theme';
 import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
-import type { Theme } from '~components/BladeProvider';
 import { isReactNative } from '~utils';
 import type { TestID } from '~utils/types';
-import { throwBladeError } from '~utils/logger';
-
-type HeadingVariant = 'regular' | 'subheading';
 
 const validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
-type HeadingCommonProps = {
+export type HeadingProps = {
   as?: typeof validAsValues[number];
   /**
    * Overrides the color of the Heading component.
@@ -22,105 +17,56 @@ type HeadingCommonProps = {
    * **Note** This takes priority over `type` and `contrast` prop to decide color of heading
    */
   color?: BaseTextProps['color'];
-  type?: TextTypes;
-  contrast?: ColorContrastTypes;
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;
   children: React.ReactNode;
   textAlign?: BaseTextProps['textAlign'];
   textDecorationLine?: BaseTextProps['textDecorationLine'];
+  size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
 } & TestID &
   StyledPropsBlade;
 
-type HeadingNormalVariant = HeadingCommonProps & {
-  variant?: Exclude<HeadingVariant, 'subheading'>;
-  /**
-   *
-   * @default small
-   */
-  size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large'>;
-  weight?: keyof Theme['typography']['fonts']['weight'];
-};
-
-type HeadingSubHeadingVariant = HeadingCommonProps & {
-  variant?: Extract<HeadingVariant, 'subheading'>;
-  /**
-   * `size` cannot be used with variant="subheading". Either change to variant="regular" or remove size prop
-   */
-  size?: undefined;
-  weight?: keyof Pick<Theme['typography']['fonts']['weight'], 'bold'>;
-};
-
-/**
- * Conditionally changing props based on variant.
- * Overloads or union gives wrong intellisense.
- */
-export type HeadingProps<T> = T extends {
-  variant: infer Variant;
-}
-  ? Variant extends Exclude<HeadingVariant, 'subheading'>
-    ? HeadingNormalVariant
-    : Variant extends 'subheading'
-    ? HeadingSubHeadingVariant
-    : T
-  : T;
-
-const getProps = <T extends { variant: HeadingVariant }>({
+const getProps = ({
   as,
-  variant,
   size,
-  type,
   weight,
-  contrast,
   color,
   testID,
-}: Pick<
-  HeadingProps<T>,
-  'as' | 'variant' | 'size' | 'type' | 'weight' | 'contrast' | 'color' | 'testID'
->): Omit<BaseTextProps, 'children'> => {
-  const colorContrast: keyof ColorContrast = contrast ? `${contrast!}Contrast` : 'lowContrast';
+}: Pick<HeadingProps, 'as' | 'size' | 'weight' | 'color' | 'testID'>): Omit<
+  BaseTextProps,
+  'children'
+> => {
   const props: Omit<BaseTextProps, 'children'> = {
-    color: color ?? `surface.text.${type ?? 'normal'}.${colorContrast}`,
-    fontSize: 200,
-    fontWeight: weight ?? 'bold',
+    color,
+    fontSize: 300,
+    fontWeight: weight ?? 'semibold',
     fontStyle: 'normal',
     lineHeight: 300,
-    fontFamily: 'text',
+    fontFamily: 'heading',
     accessibilityProps: isReactNative() ? { role: 'heading' } : {},
     componentName: 'heading',
     testID,
   };
 
-  if (variant === 'regular') {
-    if (!size || size === 'small') {
-      props.fontSize = 200;
-      props.lineHeight = 300;
-      props.as = 'h6';
-    } else if (size === 'medium') {
-      props.fontSize = 300;
-      props.lineHeight = 200;
-      props.as = 'h5';
-    } else if (size === 'large') {
-      props.fontSize = 400;
-      props.lineHeight = 400;
-      props.as = 'h4';
-    }
-  } else if (variant === 'subheading') {
-    if (__DEV__) {
-      if (weight === 'regular') {
-        throwBladeError({
-          moduleName: 'Heading',
-          message: `weight cannot be 'regular' when variant is 'subheading'`,
-        });
-      }
-      if (size) {
-        throwBladeError({
-          moduleName: 'Heading',
-          message: `size prop cannot be added when variant is 'subheading'. Use variant 'regular' or remove size prop`,
-        });
-      }
-    }
-    props.fontSize = 75;
-    props.lineHeight = 50;
-    props.as = 'p';
+  if (size === 'small') {
+    props.fontSize = 300;
+    props.lineHeight = 300;
+    props.as = 'h6';
+  } else if (size === 'medium') {
+    props.fontSize = 400;
+    props.lineHeight = 400;
+    props.as = 'h5';
+  } else if (size === 'large') {
+    props.fontSize = 500;
+    props.lineHeight = 500;
+    props.as = 'h4';
+  } else if (size === 'xlarge') {
+    props.fontSize = 600;
+    props.lineHeight = 600;
+    props.as = 'h3';
+  } else if (size === '2xlarge') {
+    props.fontSize = 700;
+    props.lineHeight = 700;
+    props.as = 'h2';
   }
 
   // override the computed `as` prop if user passed an `as` prop
@@ -128,23 +74,20 @@ const getProps = <T extends { variant: HeadingVariant }>({
   return props;
 };
 
-export const Heading = <T extends { variant: HeadingVariant }>({
+export const Heading = ({
   as,
-  variant = 'regular',
-  size, // Not setting default value since the `size` should be undefined with variant="subheading"
-  type = 'normal',
-  weight = 'bold',
-  contrast = 'low',
-  color,
+  size = 'small',
+  weight = 'semibold',
+  color = 'surface.text.gray.normal',
   children,
   testID,
   textAlign,
   textDecorationLine,
   ...styledProps
-}: HeadingProps<T>): ReactElement => {
+}: HeadingProps): ReactElement => {
   useValidateAsProp({ componentName: 'Heading', as, validAsValues });
 
-  const props = getProps({ as, variant, size, type, weight, color, contrast, testID });
+  const props = getProps({ as, size, weight, color, testID });
 
   return (
     <BaseText
diff --git a/packages/blade/src/components/Typography/Heading/__tests__/Heading.native.test.tsx b/packages/blade/src/components/Typography/Heading/__tests__/Heading.native.test.tsx
index aa9f892a1b7..ba0fd6a634b 100644
--- a/packages/blade/src/components/Typography/Heading/__tests__/Heading.native.test.tsx
+++ b/packages/blade/src/components/Typography/Heading/__tests__/Heading.native.test.tsx
@@ -16,7 +16,7 @@ describe('<Heading />', () => {
   it('should render Heading with color', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { toJSON, getByText } = renderWithTheme(
-      <Heading color="surface.text.placeholder.lowContrast">{displayText}</Heading>,
+      <Heading color="surface.text.gray.disabled">{displayText}</Heading>,
     );
     expect(getByText(displayText)).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
@@ -26,7 +26,7 @@ describe('<Heading />', () => {
     const { toJSON } = renderWithTheme(
       <Heading>
         Supercharge your business with the all‑powerful{' '}
-        <Heading as="span" color="feedback.information.action.text.primary.default.lowContrast">
+        <Heading as="span" color="interactive.text.information.subtle">
           Payment Gateway
         </Heading>
       </Heading>,
@@ -37,7 +37,7 @@ describe('<Heading />', () => {
   it('should render Heading with size "small" and contrast "high"', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { toJSON, getByText } = renderWithTheme(
-      <Heading type="normal" size="small" weight="regular" contrast="high">
+      <Heading color="surface.text.gray.normal" size="small" weight="regular">
         {displayText}
       </Heading>,
     );
@@ -48,7 +48,7 @@ describe('<Heading />', () => {
   it('should render Heading with size "small"', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { toJSON, getByText } = renderWithTheme(
-      <Heading type="normal" size="small" weight="regular">
+      <Heading color="surface.text.gray.normal" size="small" weight="regular">
         {displayText}
       </Heading>,
     );
@@ -59,7 +59,7 @@ describe('<Heading />', () => {
   it('should render Heading with size "medium"', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { toJSON, getByText } = renderWithTheme(
-      <Heading type="muted" size="medium" weight="regular">
+      <Heading color="surface.text.gray.muted" size="medium" weight="regular">
         {displayText}
       </Heading>,
     );
@@ -70,7 +70,7 @@ describe('<Heading />', () => {
   it('should render Heading with size "large"', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { toJSON, getByText } = renderWithTheme(
-      <Heading type="subdued" size="large" weight="regular">
+      <Heading color="surface.text.gray.muted" size="large" weight="regular">
         {displayText}
       </Heading>,
     );
@@ -78,57 +78,10 @@ describe('<Heading />', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render Heading with variant "subheading" and weight "bold"', () => {
-    const displayText = 'Get Started With Payment Gateway';
-    const { toJSON, getByText } = renderWithTheme(
-      <Heading type="subdued" variant="subheading" weight="bold">
-        {displayText}
-      </Heading>,
-    );
-    expect(getByText('Get Started With Payment Gateway')).toBeTruthy();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should throw error when variant is "subheading" but weight "regular" is passed', () => {
-    try {
-      const displayText = 'Get Started With Payment Gateway';
-      renderWithTheme(
-        // @ts-expect-error testing failure case when weight='regular' is passed with variant='subheading'
-        <Heading type="normal" variant="subheading" weight="regular">
-          {displayText}
-        </Heading>,
-      );
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        expect(error.message).toEqual(
-          `[Blade: Heading]: weight cannot be 'regular' when variant is 'subheading'`,
-        );
-      }
-    }
-  });
-
-  it('should throw error when variant is "subheading" but weight "regular" is passed', () => {
-    try {
-      const displayText = 'Get Started With Payment Gateway';
-      renderWithTheme(
-        // @ts-expect-error testing failure case when size is passed with variant='subheading'
-        <Heading type="normal" variant="subheading" size="small">
-          {displayText}
-        </Heading>,
-      );
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        expect(error.message).toMatchInlineSnapshot(
-          `"[Blade: Heading]: size prop cannot be added when variant is 'subheading'. Use variant 'regular' or remove size prop"`,
-        );
-      }
-    }
-  });
-
   it('should render with as prop without errors', () => {
     const displayText = 'Displaying Landing Screen Heading';
     const { getByText } = renderWithTheme(
-      <Heading as="span" type="subdued" size="large">
+      <Heading as="span" color="surface.text.gray.muted" size="large">
         {displayText}
       </Heading>,
     );
diff --git a/packages/blade/src/components/Typography/Heading/__tests__/Heading.web.test.tsx b/packages/blade/src/components/Typography/Heading/__tests__/Heading.web.test.tsx
index 9e67c352eab..a38abccbbdb 100644
--- a/packages/blade/src/components/Typography/Heading/__tests__/Heading.web.test.tsx
+++ b/packages/blade/src/components/Typography/Heading/__tests__/Heading.web.test.tsx
@@ -18,7 +18,7 @@ describe('<Heading />', () => {
   it('should render Heading with size "small" and contrast "high"', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { container, getByRole, getByText } = renderWithTheme(
-      <Heading type="normal" size="small" weight="regular" contrast="high">
+      <Heading color="surface.text.gray.normal" size="small" weight="regular">
         {displayText}
       </Heading>,
     );
@@ -30,7 +30,7 @@ describe('<Heading />', () => {
   it('should render Heading with color', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { container } = renderWithTheme(
-      <Heading color="surface.text.placeholder.lowContrast">{displayText}</Heading>,
+      <Heading color="surface.text.gray.disabled">{displayText}</Heading>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -39,7 +39,7 @@ describe('<Heading />', () => {
     const { container } = renderWithTheme(
       <Heading>
         Supercharge your business with the all‑powerful{' '}
-        <Heading as="span" color="feedback.information.action.text.primary.default.lowContrast">
+        <Heading as="span" color="interactive.text.information.subtle">
           Payment Gateway
         </Heading>
       </Heading>,
@@ -50,7 +50,7 @@ describe('<Heading />', () => {
   it('should render Heading with size "small"', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { container, getByRole, getByText } = renderWithTheme(
-      <Heading type="normal" size="small" weight="regular">
+      <Heading color="surface.text.gray.normal" size="small" weight="regular">
         {displayText}
       </Heading>,
     );
@@ -62,7 +62,7 @@ describe('<Heading />', () => {
   it('should render Heading with size "medium"', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { container, getByRole, getByText } = renderWithTheme(
-      <Heading type="muted" size="medium" weight="regular">
+      <Heading color="surface.text.gray.muted" size="medium" weight="regular">
         {displayText}
       </Heading>,
     );
@@ -74,7 +74,7 @@ describe('<Heading />', () => {
   it('should render Heading with size "large"', () => {
     const displayText = 'Get Started With Payment Gateway';
     const { container, getByRole, getByText } = renderWithTheme(
-      <Heading type="subdued" size="large" weight="regular">
+      <Heading color="surface.text.gray.muted" size="large" weight="regular">
         {displayText}
       </Heading>,
     );
@@ -83,54 +83,6 @@ describe('<Heading />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should render Heading with variant "subheading" and weight "bold"', () => {
-    const displayText = 'Get Started With Payment Gateway';
-    const { container, getByText } = renderWithTheme(
-      <Heading type="subdued" variant="subheading" weight="bold">
-        {displayText}
-      </Heading>,
-    );
-    expect(getByText(displayText)).toBeInTheDocument();
-    expect(getByText(displayText).tagName).toBe('P');
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should throw error when variant is "subheading" but weight "regular" is passed', () => {
-    try {
-      const displayText = 'Get Started With Payment Gateway';
-      renderWithTheme(
-        // @ts-expect-error testing failure case when weight='regular' is passed with variant='subheading'
-        <Heading type="normal" variant="subheading" weight="regular">
-          {displayText}
-        </Heading>,
-      );
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        expect(error.message).toEqual(
-          `[Blade: Heading]: weight cannot be 'regular' when variant is 'subheading'`,
-        );
-      }
-    }
-  });
-
-  it('should throw error when variant is "subheading" but size is defined', () => {
-    try {
-      const displayText = 'Get Started With Payment Gateway';
-      renderWithTheme(
-        // @ts-expect-error testing failure case when size is passed with variant='subheading'
-        <Heading type="normal" variant="subheading" size="large">
-          {displayText}
-        </Heading>,
-      );
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        expect(error.message).toMatchInlineSnapshot(
-          `"[Blade: Heading]: size prop cannot be added when variant is 'subheading'. Use variant 'regular' or remove size prop"`,
-        );
-      }
-    }
-  });
-
   it('should accept as prop and render appropriate HTML tag', () => {
     const displayText = 'Displaying some text';
     const { getByText } = renderWithTheme(<Heading as="span">{displayText}</Heading>);
diff --git a/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.native.test.tsx.snap b/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.native.test.tsx.snap
index fca1f6d30fd..cc8f99d4fe9 100644
--- a/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.native.test.tsx.snap
@@ -11,22 +11,23 @@ exports[`<Heading /> should render Heading with color 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.placeholder.lowContrast"
+    color="surface.text.gray.disabled"
     data-blade-component="heading"
-    fontFamily="text"
-    fontSize={200}
+    fontFamily="heading"
+    fontSize={300}
     fontStyle="normal"
-    fontWeight="bold"
+    fontWeight="semibold"
     lineHeight={300}
     style={
       [
         {
-          "color": "hsla(214, 18%, 69%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(211, 20%, 52%, 0.32)",
+          "fontFamily": "TASA Orbiter Display",
           "fontSize": 16,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 24,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 22,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -56,22 +57,23 @@ exports[`<Heading /> should render Heading with default properties 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="heading"
-    fontFamily="text"
-    fontSize={200}
+    fontFamily="heading"
+    fontSize={300}
     fontStyle="normal"
-    fontWeight="bold"
+    fontWeight="semibold"
     lineHeight={300}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
           "fontSize": 16,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 24,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 22,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -101,22 +103,23 @@ exports[`<Heading /> should render Heading with mixed color 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="heading"
-    fontFamily="text"
-    fontSize={200}
+    fontFamily="heading"
+    fontSize={300}
     fontStyle="normal"
-    fontWeight="bold"
+    fontWeight="semibold"
     lineHeight={300}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
           "fontSize": 16,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 24,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 22,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -135,22 +138,23 @@ exports[`<Heading /> should render Heading with mixed color 1`] = `
     <Text
       accessibilityRole="header"
       accessible={true}
-      color="feedback.information.action.text.primary.default.lowContrast"
+      color="interactive.text.information.subtle"
       data-blade-component="heading"
-      fontFamily="text"
-      fontSize={200}
+      fontFamily="heading"
+      fontSize={300}
       fontStyle="normal"
-      fontWeight="bold"
+      fontWeight="semibold"
       lineHeight={300}
       style={
         [
           {
-            "color": "hsla(195, 100%, 31%, 1)",
-            "fontFamily": "Lato",
+            "color": "hsla(200, 84%, 44%, 1)",
+            "fontFamily": "TASA Orbiter Display",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "700",
-            "lineHeight": 24,
+            "fontWeight": "600",
+            "letterSpacing": 0,
+            "lineHeight": 22,
             "marginBottom": 0,
             "marginLeft": 0,
             "marginRight": 0,
@@ -181,22 +185,23 @@ exports[`<Heading /> should render Heading with size "large" 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.subdued.lowContrast"
+    color="surface.text.gray.muted"
     data-blade-component="heading"
-    fontFamily="text"
-    fontSize={400}
+    fontFamily="heading"
+    fontSize={500}
     fontStyle="normal"
     fontWeight="regular"
-    lineHeight={400}
+    lineHeight={500}
     style={
       [
         {
-          "color": "hsla(217, 18%, 45%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 18,
+          "color": "hsla(211, 22%, 56%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 20,
           "fontStyle": "normal",
           "fontWeight": "400",
-          "lineHeight": 24,
+          "letterSpacing": 0,
+          "lineHeight": 26,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -226,22 +231,23 @@ exports[`<Heading /> should render Heading with size "medium" 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.muted.lowContrast"
+    color="surface.text.gray.muted"
     data-blade-component="heading"
-    fontFamily="text"
-    fontSize={300}
+    fontFamily="heading"
+    fontSize={400}
     fontStyle="normal"
     fontWeight="regular"
-    lineHeight={200}
+    lineHeight={400}
     style={
       [
         {
-          "color": "hsla(216, 16%, 60%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 16,
+          "color": "hsla(211, 22%, 56%, 1)",
+          "fontFamily": "TASA Orbiter Display",
+          "fontSize": 18,
           "fontStyle": "normal",
           "fontWeight": "400",
-          "lineHeight": 20,
+          "letterSpacing": 0,
+          "lineHeight": 24,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -271,22 +277,23 @@ exports[`<Heading /> should render Heading with size "small" 1`] = `
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="heading"
-    fontFamily="text"
-    fontSize={200}
+    fontFamily="heading"
+    fontSize={300}
     fontStyle="normal"
     fontWeight="regular"
     lineHeight={300}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
           "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
-          "lineHeight": 24,
+          "letterSpacing": 0,
+          "lineHeight": 22,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -316,67 +323,23 @@ exports[`<Heading /> should render Heading with size "small" and contrast "high"
   <Text
     accessibilityRole="header"
     accessible={true}
-    color="surface.text.normal.highContrast"
+    color="surface.text.gray.normal"
     data-blade-component="heading"
-    fontFamily="text"
-    fontSize={200}
+    fontFamily="heading"
+    fontSize={300}
     fontStyle="normal"
     fontWeight="regular"
     lineHeight={300}
     style={
       [
         {
-          "color": "hsla(0, 0%, 100%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "TASA Orbiter Display",
           "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
-          "lineHeight": 24,
-          "marginBottom": 0,
-          "marginLeft": 0,
-          "marginRight": 0,
-          "marginTop": 0,
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationLine": "none",
-        },
-      ]
-    }
-  >
-    Get Started With Payment Gateway
-  </Text>
-</View>
-`;
-
-exports[`<Heading /> should render Heading with variant "subheading" and weight "bold" 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <Text
-    accessibilityRole="header"
-    accessible={true}
-    color="surface.text.subdued.lowContrast"
-    data-blade-component="heading"
-    fontFamily="text"
-    fontSize={75}
-    fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={50}
-    style={
-      [
-        {
-          "color": "hsla(217, 18%, 45%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 12,
-          "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 16,
+          "letterSpacing": 0,
+          "lineHeight": 22,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
diff --git a/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.web.test.tsx.snap b/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.web.test.tsx.snap
index ec738f4bd01..c12aa595279 100644
--- a/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.web.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.web.test.tsx.snap
@@ -2,14 +2,18 @@
 
 exports[`<Heading /> should render Heading with color 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(214,18%,69%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 700;
+  color: hsla(211,20%,52%,0.32);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -26,14 +30,18 @@ exports[`<Heading /> should render Heading with color 1`] = `
 
 exports[`<Heading /> should render Heading with default properties 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -50,27 +58,35 @@ exports[`<Heading /> should render Heading with default properties 1`] = `
 
 exports[`<Heading /> should render Heading with mixed color 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
 
 .c1.c1.c1.c1.c1 {
-  color: hsla(195,100%,31%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 700;
+  color: hsla(200,84%,44%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -94,14 +110,18 @@ exports[`<Heading /> should render Heading with mixed color 1`] = `
 
 exports[`<Heading /> should render Heading with size "large" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.25rem;
+  color: hsla(211,22%,56%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.5rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.75rem;
+  line-height: 2rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -118,14 +138,18 @@ exports[`<Heading /> should render Heading with size "large" 1`] = `
 
 exports[`<Heading /> should render Heading with size "medium" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.125rem;
+  color: hsla(211,22%,56%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.25rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.5rem;
+  line-height: 1.625rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -142,14 +166,18 @@ exports[`<Heading /> should render Heading with size "medium" 1`] = `
 
 exports[`<Heading /> should render Heading with size "small" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -166,14 +194,18 @@ exports[`<Heading /> should render Heading with size "small" 1`] = `
 
 exports[`<Heading /> should render Heading with size "small" and contrast "high" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1rem;
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -187,27 +219,3 @@ exports[`<Heading /> should render Heading with size "small" and contrast "high"
   </h6>
 </div>
 `;
-
-exports[`<Heading /> should render Heading with variant "subheading" and weight "bold" 1`] = `
-.c0.c0.c0.c0.c0 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <p
-    class="c0"
-    data-blade-component="heading"
-  >
-    Get Started With Payment Gateway
-  </p>
-</div>
-`;
diff --git a/packages/blade/src/components/Typography/Text/Text.stories.tsx b/packages/blade/src/components/Typography/Text/Text.stories.tsx
index f250c7ef1e4..6ef1739ff65 100644
--- a/packages/blade/src/components/Typography/Text/Text.stories.tsx
+++ b/packages/blade/src/components/Typography/Text/Text.stories.tsx
@@ -13,12 +13,7 @@ const Page = (): ReactElement => {
       componentDescription="The Text component is used to display main content of the page. It is often clubbed with Title or Heading to display content in a hierarchical structure. It applies responsive styles automatically based on the device it is being rendered on."
       componentName="Text"
       apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Typography/_decisions/decisions.md"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11770%3A147139',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=10344%3A189844',
-      }}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11770%3A147139"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Typography/Text/Text.tsx b/packages/blade/src/components/Typography/Text/Text.tsx
index f09526d97e0..7bef81a44fe 100644
--- a/packages/blade/src/components/Typography/Text/Text.tsx
+++ b/packages/blade/src/components/Typography/Text/Text.tsx
@@ -4,22 +4,18 @@ import React from 'react';
 import { BaseText } from '../BaseText';
 import type { BaseTextProps, BaseTextSizes } from '../BaseText/types';
 import { useValidateAsProp } from '../utils';
-import type { Theme } from '~components/BladeProvider';
 import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
-import type { ColorContrast, ColorContrastTypes, TextTypes } from '~tokens/theme/theme';
 import type { TestID } from '~utils/types';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { throwBladeError } from '~utils/logger';
 
-const validAsValues = ['p', 'span', 'div', 'abbr', 'figcaption', 'cite', 'q'] as const;
+const validAsValues = ['p', 'span', 'div', 'abbr', 'figcaption', 'cite', 'q', 'label'] as const;
 type TextCommonProps = {
   as?: typeof validAsValues[number];
-  type?: TextTypes;
-  contrast?: ColorContrastTypes;
   truncateAfterLines?: number;
   children: React.ReactNode;
-  weight?: keyof Theme['typography']['fonts']['weight'];
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
   /**
    * Overrides the color of the Text component.
    *
@@ -41,7 +37,7 @@ type TextBodyVariant = TextCommonProps & {
 
 type TextCaptionVariant = TextCommonProps & {
   variant?: Extract<TextVariant, 'caption'>;
-  size?: Extract<BaseTextSizes, 'medium'>;
+  size?: Extract<BaseTextSizes, 'small'>;
 };
 
 /**
@@ -61,30 +57,20 @@ export type TextProps<T> = T extends {
 type GetTextPropsReturn = Omit<BaseTextProps, 'children'>;
 type GetTextProps<T extends { variant: TextVariant }> = Pick<
   TextProps<T>,
-  | 'type'
-  | 'variant'
-  | 'weight'
-  | 'size'
-  | 'contrast'
-  | 'color'
-  | 'testID'
-  | 'textAlign'
-  | 'textDecorationLine'
+  'variant' | 'weight' | 'size' | 'color' | 'testID' | 'textAlign' | 'textDecorationLine'
 >;
+
 const getTextProps = <T extends { variant: TextVariant }>({
   variant,
-  type,
   weight,
   size,
-  color,
-  contrast,
+  color = 'surface.text.gray.normal',
   testID,
   textAlign,
   textDecorationLine,
 }: GetTextProps<T>): GetTextPropsReturn => {
-  const colorContrast: keyof ColorContrast = contrast ? `${contrast!}Contrast` : 'lowContrast';
   const props: GetTextPropsReturn = {
-    color: color ?? `surface.text.${type ?? 'normal'}.${colorContrast}`,
+    color,
     fontSize: 100,
     fontWeight: weight ?? 'regular',
     fontStyle: 'normal',
@@ -96,14 +82,30 @@ const getTextProps = <T extends { variant: TextVariant }>({
     textDecorationLine,
   };
 
+  if (variant === 'caption') {
+    // variant of caption can only have size of small
+    if (size && size !== 'small') {
+      if (__DEV__) {
+        throwBladeError({
+          moduleName: 'Text',
+          message: `size cannot be '${size}' when variant is 'caption'`,
+        });
+      }
+    }
+    // Force size to be small if variant is caption
+    size = 'small';
+  } else if (variant !== 'caption' && !size) {
+    size = 'medium';
+  }
+
   if (variant === 'body') {
     if (size === 'xsmall') {
       props.fontSize = 25;
-      props.lineHeight = 50;
+      props.lineHeight = 25;
     }
     if (size === 'small') {
       props.fontSize = 75;
-      props.lineHeight = 50;
+      props.lineHeight = 75;
     }
     if (size === 'medium') {
       props.fontSize = 100;
@@ -111,18 +113,14 @@ const getTextProps = <T extends { variant: TextVariant }>({
     }
     if (size === 'large') {
       props.fontSize = 200;
-      props.lineHeight = 300;
+      props.lineHeight = 200;
     }
   }
   if (variant === 'caption') {
-    if (size === 'medium') {
+    if (size === 'small') {
       props.fontSize = 50;
       props.lineHeight = 50;
-    } else if (__DEV__) {
-      throwBladeError({
-        moduleName: 'Text',
-        message: `size cannot be '${size}' when variant is 'caption'`,
-      });
+      props.fontWeight = 'regular';
     }
     props.fontStyle = 'italic';
   }
@@ -134,9 +132,7 @@ const _Text = <T extends { variant: TextVariant }>({
   as = 'p',
   variant = 'body',
   weight = 'regular',
-  size = 'medium',
-  type = 'normal',
-  contrast = 'low',
+  size,
   truncateAfterLines,
   children,
   color,
@@ -152,11 +148,9 @@ const _Text = <T extends { variant: TextVariant }>({
     wordBreak,
     ...getTextProps({
       variant,
-      type,
       weight,
       color,
       size,
-      contrast,
       testID,
       textAlign,
       textDecorationLine,
diff --git a/packages/blade/src/components/Typography/Text/__tests__/Text.native.test.tsx b/packages/blade/src/components/Typography/Text/__tests__/Text.native.test.tsx
index e52ff42789d..b8d44c5631a 100644
--- a/packages/blade/src/components/Typography/Text/__tests__/Text.native.test.tsx
+++ b/packages/blade/src/components/Typography/Text/__tests__/Text.native.test.tsx
@@ -13,7 +13,12 @@ describe('<Text />', () => {
   it('should render Text with variant "body" and contrast "high"', () => {
     const displayText = 'Displaying some text';
     const { toJSON, getByText } = renderWithTheme(
-      <Text type="normal" variant="body" weight="bold" truncateAfterLines={3} contrast="high">
+      <Text
+        color="surface.text.gray.normal"
+        variant="body"
+        weight="semibold"
+        truncateAfterLines={3}
+      >
         {displayText}
       </Text>,
     );
@@ -24,7 +29,12 @@ describe('<Text />', () => {
   it('should render Text with variant "body"', () => {
     const displayText = 'Displaying some text';
     const { toJSON, getByText } = renderWithTheme(
-      <Text type="normal" variant="body" weight="bold" truncateAfterLines={3}>
+      <Text
+        color="surface.text.gray.normal"
+        variant="body"
+        weight="semibold"
+        truncateAfterLines={3}
+      >
         {displayText}
       </Text>,
     );
@@ -35,7 +45,7 @@ describe('<Text />', () => {
   it('should render Text with color', () => {
     const displayText = 'Displaying some text';
     const { toJSON, getByText } = renderWithTheme(
-      <Text color="surface.text.muted.lowContrast">{displayText}</Text>,
+      <Text color="surface.text.gray.muted">{displayText}</Text>,
     );
     expect(getByText('Displaying some text')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
@@ -44,7 +54,7 @@ describe('<Text />', () => {
   it('should render Text with variant "caption"', () => {
     const displayText = 'Displaying some text';
     const { toJSON, getByText } = renderWithTheme(
-      <Text type="normal" variant="body" weight="bold">
+      <Text color="surface.text.gray.normal" variant="body" weight="semibold">
         {displayText}
       </Text>,
     );
@@ -55,7 +65,13 @@ describe('<Text />', () => {
   it('should render Text with variant "body" and size "small"', () => {
     const displayText = 'Displaying some text';
     const { toJSON, getByText } = renderWithTheme(
-      <Text type="normal" variant="body" weight="bold" truncateAfterLines={3} size="small">
+      <Text
+        color="surface.text.gray.normal"
+        variant="body"
+        weight="semibold"
+        truncateAfterLines={3}
+        size="small"
+      >
         {displayText}
       </Text>,
     );
@@ -70,24 +86,29 @@ describe('<Text />', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should throw error when variant is "caption" and size "small" is passed', () => {
+  it('should throw error when variant is "caption" and size "medium" is passed', () => {
     const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
     const displayText = 'Displaying some text';
     expect(() =>
       renderWithTheme(
-        // @ts-expect-error testing failure case when size='small' is passed with variant='caption'
-        <Text type="normal" variant="caption" truncateAfterLines={3} size="small">
+        <Text
+          color="surface.text.gray.normal"
+          variant="caption"
+          truncateAfterLines={3}
+          // @ts-expect-error testing failure case when size='medium' is passed with variant='caption'
+          size="medium"
+        >
           {displayText}
         </Text>,
       ),
-    ).toThrow(`[Blade: Text]: size cannot be 'small' when variant is 'caption'`);
+    ).toThrow(`[Blade: Text]: size cannot be 'medium' when variant is 'caption'`);
     mockConsoleError.mockRestore();
   });
 
   it('should render with as prop without errors', () => {
     const displayText = 'Displaying Text Screen';
     const { getByText } = renderWithTheme(
-      <Text as="figcaption" type="subdued" size="large">
+      <Text as="figcaption" color="surface.text.gray.muted" size="large">
         {displayText}
       </Text>,
     );
diff --git a/packages/blade/src/components/Typography/Text/__tests__/Text.web.test.tsx b/packages/blade/src/components/Typography/Text/__tests__/Text.web.test.tsx
index b382cfe1d3d..cefd15728bb 100644
--- a/packages/blade/src/components/Typography/Text/__tests__/Text.web.test.tsx
+++ b/packages/blade/src/components/Typography/Text/__tests__/Text.web.test.tsx
@@ -13,7 +13,12 @@ describe('<Text />', () => {
   it('should render Text with variant "body" and contrast "high"', () => {
     const displayText = 'Displaying some text';
     const { container } = renderWithTheme(
-      <Text type="normal" variant="body" weight="bold" truncateAfterLines={3} contrast="high">
+      <Text
+        color="surface.text.gray.normal"
+        variant="body"
+        weight="semibold"
+        truncateAfterLines={3}
+      >
         {displayText}
       </Text>,
     );
@@ -23,7 +28,12 @@ describe('<Text />', () => {
   it('should render Text with variant "body"', () => {
     const displayText = 'Displaying some text';
     const { container } = renderWithTheme(
-      <Text type="normal" variant="body" weight="bold" truncateAfterLines={3}>
+      <Text
+        color="surface.text.gray.normal"
+        variant="body"
+        weight="semibold"
+        truncateAfterLines={3}
+      >
         {displayText}
       </Text>,
     );
@@ -33,7 +43,7 @@ describe('<Text />', () => {
   it('should render Text with color', () => {
     const displayText = 'Displaying some text';
     const { container } = renderWithTheme(
-      <Text color="action.text.link.default">{displayText}</Text>,
+      <Text color="interactive.text.primary.subtle">{displayText}</Text>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -41,7 +51,7 @@ describe('<Text />', () => {
   it('should render Text with variant "caption"', () => {
     const displayText = 'Displaying some text';
     const { container } = renderWithTheme(
-      <Text type="normal" variant="body" weight="bold">
+      <Text color="surface.text.gray.normal" variant="body" weight="semibold">
         {displayText}
       </Text>,
     );
@@ -51,7 +61,13 @@ describe('<Text />', () => {
   it('should render Text with variant "body" and size "small"', () => {
     const displayText = 'Displaying some text';
     const { container } = renderWithTheme(
-      <Text type="normal" variant="body" weight="bold" truncateAfterLines={3} size="small">
+      <Text
+        color="surface.text.gray.normal"
+        variant="body"
+        weight="semibold"
+        truncateAfterLines={3}
+        size="small"
+      >
         {displayText}
       </Text>,
     );
@@ -64,17 +80,22 @@ describe('<Text />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should throw error when variant is "caption" and size "small" is passed', () => {
+  it('should throw error when variant is "caption" and size "medium" is passed', () => {
     const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
     const displayText = 'Displaying some text';
     expect(() =>
       renderWithTheme(
-        // @ts-expect-error testing failure case when size='small' is passed with variant='caption'
-        <Text type="normal" variant="caption" truncateAfterLines={3} size="small">
+        <Text
+          color="surface.text.gray.normal"
+          variant="caption"
+          truncateAfterLines={3}
+          // @ts-expect-error testing failure case when size='medium' is passed with variant='caption'
+          size="medium"
+        >
           {displayText}
         </Text>,
       ),
-    ).toThrow(`[Blade: Text]: size cannot be 'small' when variant is 'caption'`);
+    ).toThrow(`[Blade: Text]: size cannot be 'medium' when variant is 'caption'`);
     mockConsoleError.mockRestore();
   });
 
@@ -92,7 +113,7 @@ describe('<Text />', () => {
         <Text as="button">{displayText}</Text>,
       ),
     ).toThrow(
-      '[Blade: Text]: Invalid `as` prop value - button. Only p, span, div, abbr, figcaption, cite, q are accepted',
+      '[Blade: Text]: Invalid `as` prop value - button. Only p, span, div, abbr, figcaption, cite, q, label are accepted',
     );
   });
 
diff --git a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.native.test.tsx.snap b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.native.test.tsx.snap
index 2ab09acfb5f..d464ac7537c 100644
--- a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.native.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<Text /> should render Text with center textAlign 1`] = `
 >
   <Text
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="text"
     fontFamily="text"
     fontSize={100}
@@ -20,11 +20,12 @@ exports[`<Text /> should render Text with center textAlign 1`] = `
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 14,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "letterSpacing": 0,
           "lineHeight": 20,
           "marginBottom": 0,
           "marginLeft": 0,
@@ -56,7 +57,7 @@ exports[`<Text /> should render Text with color 1`] = `
 >
   <Text
     accessible={true}
-    color="surface.text.muted.lowContrast"
+    color="surface.text.gray.muted"
     data-blade-component="text"
     fontFamily="text"
     fontSize={100}
@@ -66,11 +67,12 @@ exports[`<Text /> should render Text with color 1`] = `
     style={
       [
         {
-          "color": "hsla(216, 16%, 60%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(211, 22%, 56%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 14,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "letterSpacing": 0,
           "lineHeight": 20,
           "marginBottom": 0,
           "marginLeft": 0,
@@ -100,7 +102,7 @@ exports[`<Text /> should render Text with default properties 1`] = `
 >
   <Text
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="text"
     fontFamily="text"
     fontSize={100}
@@ -110,11 +112,12 @@ exports[`<Text /> should render Text with default properties 1`] = `
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 14,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "letterSpacing": 0,
           "lineHeight": 20,
           "marginBottom": 0,
           "marginLeft": 0,
@@ -144,22 +147,23 @@ exports[`<Text /> should render Text with variant "body" 1`] = `
 >
   <Text
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="text"
     fontFamily="text"
     fontSize={100}
     fontStyle="normal"
-    fontWeight="bold"
+    fontWeight="semibold"
     lineHeight={100}
     numberOfLines={3}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 14,
           "fontStyle": "normal",
-          "fontWeight": "700",
+          "fontWeight": "600",
+          "letterSpacing": 0,
           "lineHeight": 20,
           "marginBottom": 0,
           "marginLeft": 0,
@@ -189,22 +193,23 @@ exports[`<Text /> should render Text with variant "body" and contrast "high" 1`]
 >
   <Text
     accessible={true}
-    color="surface.text.normal.highContrast"
+    color="surface.text.gray.normal"
     data-blade-component="text"
     fontFamily="text"
     fontSize={100}
     fontStyle="normal"
-    fontWeight="bold"
+    fontWeight="semibold"
     lineHeight={100}
     numberOfLines={3}
     style={
       [
         {
-          "color": "hsla(0, 0%, 100%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 14,
           "fontStyle": "normal",
-          "fontWeight": "700",
+          "fontWeight": "600",
+          "letterSpacing": 0,
           "lineHeight": 20,
           "marginBottom": 0,
           "marginLeft": 0,
@@ -234,23 +239,24 @@ exports[`<Text /> should render Text with variant "body" and size "small" 1`] =
 >
   <Text
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="text"
     fontFamily="text"
     fontSize={75}
     fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={50}
+    fontWeight="semibold"
+    lineHeight={75}
     numberOfLines={3}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 12,
           "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 16,
+          "fontWeight": "600",
+          "letterSpacing": 0,
+          "lineHeight": 18,
           "marginBottom": 0,
           "marginLeft": 0,
           "marginRight": 0,
@@ -279,21 +285,22 @@ exports[`<Text /> should render Text with variant "caption" 1`] = `
 >
   <Text
     accessible={true}
-    color="surface.text.normal.lowContrast"
+    color="surface.text.gray.normal"
     data-blade-component="text"
     fontFamily="text"
     fontSize={100}
     fontStyle="normal"
-    fontWeight="bold"
+    fontWeight="semibold"
     lineHeight={100}
     style={
       [
         {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
+          "color": "hsla(212, 39%, 16%, 1)",
+          "fontFamily": "Inter",
           "fontSize": 14,
           "fontStyle": "normal",
-          "fontWeight": "700",
+          "fontWeight": "600",
+          "letterSpacing": 0,
           "lineHeight": 20,
           "marginBottom": 0,
           "marginLeft": 0,
diff --git a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.ssr.test.tsx.snap b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.ssr.test.tsx.snap
index 77046460ade..e7e9563bc34 100644
--- a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.ssr.test.tsx.snap
@@ -1,17 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Text /> should render Text on server 1`] = `"<div id="root"><p class="StyledBaseText-dVBfTO hJVyJT" data-blade-component="text">Displaying some text</p></div>"`;
+exports[`<Text /> should render Text on server 1`] = `"<div id="root"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Displaying some text</p></div>"`;
 
 exports[`<Text /> should render Text on server 2`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
diff --git a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap
index b2e81042da2..819f2a83269 100644
--- a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap
@@ -2,14 +2,18 @@
 
 exports[`<Text /> should render Text with center textAlign 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -27,14 +31,18 @@ exports[`<Text /> should render Text with center textAlign 1`] = `
 
 exports[`<Text /> should render Text with color 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(218,89%,51%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(227,100%,59%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -51,14 +59,18 @@ exports[`<Text /> should render Text with color 1`] = `
 
 exports[`<Text /> should render Text with default properties 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
@@ -75,14 +87,18 @@ exports[`<Text /> should render Text with default properties 1`] = `
 
 exports[`<Text /> should render Text with variant "body" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -104,14 +120,18 @@ exports[`<Text /> should render Text with variant "body" 1`] = `
 
 exports[`<Text /> should render Text with variant "body" and contrast "high" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -133,14 +153,18 @@ exports[`<Text /> should render Text with variant "body" and contrast "high" 1`]
 
 exports[`<Text /> should render Text with variant "body" and size "small" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -162,14 +186,18 @@ exports[`<Text /> should render Text with variant "body" and size "small" 1`] =
 
 exports[`<Text /> should render Text with variant "caption" 1`] = `
 .c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   margin: 0;
   padding: 0;
 }
diff --git a/packages/blade/src/components/Typography/Text/getTextStyles.ts b/packages/blade/src/components/Typography/Text/getTextStyles.ts
index 5ac00182c16..d6bb0701781 100644
--- a/packages/blade/src/components/Typography/Text/getTextStyles.ts
+++ b/packages/blade/src/components/Typography/Text/getTextStyles.ts
@@ -6,15 +6,14 @@ import type { Theme } from '~components/BladeProvider';
 
 const getTextStyles = <T extends { variant: TextVariant }>({
   variant,
-  type,
   weight,
   size,
-  contrast,
   theme,
-}: Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast'> & {
+  color,
+}: Pick<TextProps<T>, 'variant' | 'weight' | 'size' | 'color'> & {
   theme: Theme;
 }): CSSObject => {
-  return getBaseTextStyles({ ...getTextProps({ variant, type, weight, size, contrast }), theme });
+  return getBaseTextStyles({ ...getTextProps({ variant, weight, size, color }), theme });
 };
 
 export default getTextStyles;
diff --git a/packages/blade/src/components/Typography/Title/Title.stories.tsx b/packages/blade/src/components/Typography/Title/Title.stories.tsx
deleted file mode 100644
index 9ed9634b751..00000000000
--- a/packages/blade/src/components/Typography/Title/Title.stories.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import type { StoryFn, Meta } from '@storybook/react';
-import { Title as StorybookTitle } from '@storybook/addon-docs';
-import type { ReactElement } from 'react';
-import { Text } from '../Text';
-import { Code } from '../Code';
-import type { TitleProps } from './';
-import { Title as TitleComponent } from './';
-import { Sandbox } from '~utils/storybook/Sandbox';
-import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
-import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
-import { Box } from '~components/Box';
-import { List, ListItem } from '~components/List';
-import { isReactNative } from '~utils';
-
-const Page = (): ReactElement => {
-  return (
-    <StoryPageWrapper
-      componentDescription="The Title Component makes a bold visual statement. Use them to create impact when the main goal is visual storytelling. For example, use Title as marketing content on landing pages or to capture attention during onboarding."
-      componentName="Title"
-      apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Typography/_decisions/decisions.md"
-      figmaURL={{
-        paymentTheme:
-          'https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11770%3A147139',
-        bankingTheme:
-          'https://www.figma.com/file/sAdplk2uYnI2ILnDKUxycW/Blade---Banking-Dark?node-id=10344%3A190050',
-      }}
-    >
-      <StorybookTitle>Usage</StorybookTitle>
-      <Sandbox>
-        {`
-          import { Title } from '@razorpay/blade/components';
-
-          function App(): React.ReactElement {
-            return (
-              <Title size="large">Blade by Razorpay</Title>
-            )
-          }
-
-          export default App;
-        `}
-      </Sandbox>
-    </StoryPageWrapper>
-  );
-};
-
-const TitleStoryMeta: Meta<TitleProps> = {
-  title: 'Components/Typography/Title',
-  component: TitleComponent,
-  args: {
-    size: 'xlarge',
-    type: 'normal',
-    children: 'Power your finance, grow your business',
-    contrast: 'low',
-    as: undefined,
-  },
-  parameters: {
-    docs: {
-      page: () => <Page />,
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: getStyledPropsArgTypes(),
-};
-
-const TitleTemplate: StoryFn<typeof TitleComponent> = (args) => {
-  return <TitleComponent {...args}>{args.children}</TitleComponent>;
-};
-
-export default TitleStoryMeta;
-export const Title = TitleTemplate.bind({});
-export const WithColor = TitleTemplate.bind({});
-WithColor.args = {
-  color: 'brand.primary.500',
-};
-
-const Sup = isReactNative() ? TitleComponent : 'sup';
-const WithMixedColorsTemplate: StoryFn<typeof TitleComponent> = () => {
-  return (
-    <Box>
-      <TitleComponent>
-        Supercharge your business with the all‑powerful{' '}
-        <TitleComponent as="span" color="brand.primary.500">
-          Payment Gateway
-        </TitleComponent>
-      </TitleComponent>
-      <TitleComponent marginTop="spacing.5">
-        Start accepting{' '}
-        <TitleComponent as="span" color="feedback.text.information.lowContrast">
-          payments
-        </TitleComponent>{' '}
-        at just 2% <Sup>*</Sup>
-      </TitleComponent>
-    </Box>
-  );
-};
-
-export const WithMixedColors = WithMixedColorsTemplate.bind({});
-
-const AsPropTemplate: StoryFn<typeof TitleComponent> = (args) => {
-  return (
-    <Box>
-      <Text>
-        By default{' '}
-        <Text as="span" weight="bold">
-          Title
-        </Text>{' '}
-        component automatically renders the respective <Code size="medium">h*</Code> tag based on
-        the{' '}
-        <Text as="span" weight="bold">
-          size prop
-        </Text>{' '}
-        passed
-      </Text>
-      <List>
-        <ListItem>small: h3</ListItem>
-        <ListItem>medium: h2</ListItem>
-        <ListItem>large: h1</ListItem>
-        <ListItem>xlarge: h1</ListItem>
-      </List>
-      <Text marginBottom="spacing.5">
-        But you can also pass a custom <Code>as</Code> prop to override the rendered HTML:
-      </Text>
-      <TitleComponent {...args}>Tweak the storybook controls to see the dom change</TitleComponent>
-    </Box>
-  );
-};
-
-export const AsProp = AsPropTemplate.bind({});
-AsProp.args = {
-  size: 'small',
-  as: 'h1',
-};
diff --git a/packages/blade/src/components/Typography/Title/Title.tsx b/packages/blade/src/components/Typography/Title/Title.tsx
deleted file mode 100644
index 7f082245e77..00000000000
--- a/packages/blade/src/components/Typography/Title/Title.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { ReactElement } from 'react';
-import { BaseText } from '../BaseText';
-import type { BaseTextProps, BaseTextSizes } from '../BaseText/types';
-import { useValidateAsProp } from '../utils';
-import type { ColorContrast, ColorContrastTypes, TextTypes } from '~tokens/theme/theme';
-import { getStyledProps } from '~components/Box/styledProps';
-import type { StyledPropsBlade } from '~components/Box/styledProps';
-import type { TestID } from '~utils/types';
-import { getPlatformType } from '~utils';
-
-const validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
-export type TitleProps = {
-  as?: typeof validAsValues[number];
-  /**
-   * Overrides the color of the Title component.
-   *
-   * **Note** This takes priority over `type` and `contrast` prop to decide color of title
-   */
-  color?: BaseTextProps['color'];
-  size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge'>;
-  contrast?: ColorContrastTypes;
-  type?: TextTypes;
-  children: React.ReactNode;
-  textAlign?: BaseTextProps['textAlign'];
-  textDecorationLine?: BaseTextProps['textDecorationLine'];
-} & TestID &
-  StyledPropsBlade;
-
-const getProps = ({
-  as,
-  size,
-  type,
-  contrast,
-  color,
-  testID,
-}: Pick<TitleProps, 'as' | 'size' | 'type' | 'color' | 'contrast' | 'testID'>): Omit<
-  BaseTextProps,
-  'children'
-> => {
-  const isPlatformWeb = getPlatformType() === 'browser' || getPlatformType() === 'node';
-  const colorContrast: keyof ColorContrast = contrast ? `${contrast}Contrast` : 'lowContrast';
-  const props: Omit<BaseTextProps, 'children'> = {
-    color: color ?? `surface.text.${type ?? 'normal'}.${colorContrast}`,
-    fontSize: 600,
-    fontWeight: 'bold',
-    fontStyle: 'normal',
-    lineHeight: 700,
-    fontFamily: 'text',
-    accessibilityProps: isPlatformWeb ? {} : { role: 'heading' },
-    componentName: 'title',
-    testID,
-  };
-
-  if (size === 'small') {
-    props.fontSize = 600;
-    props.lineHeight = 500;
-    props.as = isPlatformWeb ? 'h3' : undefined;
-  } else if (size === 'medium') {
-    props.fontSize = 700;
-    props.lineHeight = 600;
-    props.as = isPlatformWeb ? 'h2' : undefined;
-  } else if (size === 'large') {
-    props.fontSize = 800;
-    props.lineHeight = 700;
-    props.as = isPlatformWeb ? 'h1' : undefined;
-  } else if (size === 'xlarge') {
-    props.fontSize = 1000;
-    props.lineHeight = 800;
-    props.as = isPlatformWeb ? 'h1' : undefined;
-  }
-
-  // override the computed `as` prop if user passed an `as` prop
-  props.as = as || props.as;
-  return props;
-};
-
-export const Title = ({
-  as,
-  size = 'small',
-  type = 'normal',
-  contrast = 'low',
-  color,
-  children,
-  testID,
-  textAlign,
-  textDecorationLine,
-  ...styledProps
-}: TitleProps): ReactElement => {
-  useValidateAsProp({ componentName: 'Title', as, validAsValues });
-
-  const props = getProps({ as, size, type, contrast, color, testID });
-
-  return (
-    <BaseText
-      {...props}
-      textAlign={textAlign}
-      textDecorationLine={textDecorationLine}
-      {...getStyledProps(styledProps)}
-    >
-      {children}
-    </BaseText>
-  );
-};
diff --git a/packages/blade/src/components/Typography/Title/_KitchenSink.Title.stories.tsx b/packages/blade/src/components/Typography/Title/_KitchenSink.Title.stories.tsx
deleted file mode 100644
index 4be90ced33d..00000000000
--- a/packages/blade/src/components/Typography/Title/_KitchenSink.Title.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { composeStories } from '@storybook/react';
-import * as titleStories from './Title.stories';
-import { Box } from '~components/Box';
-import { Heading } from '~components/Typography';
-
-const allStories = Object.values(composeStories(titleStories));
-
-export const Title = (): JSX.Element => {
-  return (
-    <Box display="flex" flexDirection="column" gap="spacing.4">
-      {allStories.map((Story) => {
-        return (
-          <>
-            <Heading>{Story.storyName}</Heading>
-            <Story />
-          </>
-        );
-      })}
-    </Box>
-  );
-};
-
-export default {
-  title: 'Components/KitchenSink/Title',
-  component: Title,
-  parameters: {
-    // enable Chromatic's snapshotting only for kitchensink
-    chromatic: { disableSnapshot: false },
-    options: { showPanel: false },
-  },
-};
diff --git a/packages/blade/src/components/Typography/Title/__tests__/Title.native.test.tsx b/packages/blade/src/components/Typography/Title/__tests__/Title.native.test.tsx
deleted file mode 100644
index d236b922e39..00000000000
--- a/packages/blade/src/components/Typography/Title/__tests__/Title.native.test.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import { Title } from '../';
-import renderWithTheme from '~utils/testing/renderWithTheme.native';
-
-beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
-afterAll(() => jest.restoreAllMocks());
-
-describe('<Title />', () => {
-  it('should render Title with default properties', () => {
-    const displayText = 'Displaying Landing Screen Title';
-    const { toJSON, getByText } = renderWithTheme(<Title>{displayText}</Title>);
-    expect(getByText('Displaying Landing Screen Title')).toBeTruthy();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render Title with variant "small" and contrast "high"', () => {
-    const displayText = 'Displaying Landing Screen Title';
-    const { toJSON, getByText } = renderWithTheme(
-      <Title type="normal" size="small" contrast="high">
-        {displayText}
-      </Title>,
-    );
-    expect(getByText('Displaying Landing Screen Title')).toBeTruthy();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render Title with variant "small"', () => {
-    const displayText = 'Displaying Landing Screen Title';
-    const { toJSON, getByText } = renderWithTheme(
-      <Title type="normal" size="small">
-        {displayText}
-      </Title>,
-    );
-    expect(getByText('Displaying Landing Screen Title')).toBeTruthy();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render Title with color', () => {
-    const displayText = 'Displaying Landing Page Title';
-    const { toJSON } = renderWithTheme(
-      <Title color="surface.text.subtle.highContrast">{displayText}</Title>,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render Title with mixed color', () => {
-    const { toJSON } = renderWithTheme(
-      <Title>
-        Supercharge your business with the all‑powerful{' '}
-        <Title as="span" color="feedback.information.action.text.primary.default.lowContrast">
-          Payment Gateway
-        </Title>
-      </Title>,
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render Title with variant "medium"', () => {
-    const displayText = 'Displaying Landing Screen Title';
-    const { toJSON, getByText } = renderWithTheme(
-      <Title type="muted" size="medium">
-        {displayText}
-      </Title>,
-    );
-    expect(getByText('Displaying Landing Screen Title')).toBeTruthy();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render Title with variant "large"', () => {
-    const displayText = 'Displaying Landing Screen Title';
-    const { toJSON, getByText } = renderWithTheme(
-      <Title type="subdued" size="large">
-        {displayText}
-      </Title>,
-    );
-    expect(getByText('Displaying Landing Screen Title')).toBeTruthy();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should render with as prop without errors', () => {
-    const displayText = 'Displaying Landing Screen Title';
-    const { getByText } = renderWithTheme(
-      <Title as="span" type="subdued" size="large">
-        {displayText}
-      </Title>,
-    );
-    expect(getByText(displayText)).toBeTruthy();
-  });
-
-  it('should accept testID', () => {
-    const displayText = 'Displaying Landing Screen Title';
-    const { getByTestId } = renderWithTheme(<Title testID="title-test">{displayText}</Title>);
-    expect(getByTestId('title-test')).toBeTruthy();
-  });
-});
diff --git a/packages/blade/src/components/Typography/Title/__tests__/Title.web.test.tsx b/packages/blade/src/components/Typography/Title/__tests__/Title.web.test.tsx
deleted file mode 100644
index ba66575057d..00000000000
--- a/packages/blade/src/components/Typography/Title/__tests__/Title.web.test.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import { Title } from '../';
-import renderWithTheme from '~utils/testing/renderWithTheme.web';
-import assertAccessible from '~utils/testing/assertAccessible.web';
-
-beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
-afterAll(() => jest.restoreAllMocks());
-
-describe('<Title />', () => {
-  it('should render Title with default properties', () => {
-    const displayText = 'Displaying Landing Page Title';
-    const { container, getByRole, getByText } = renderWithTheme(<Title>{displayText}</Title>);
-    expect(getByRole('heading', { level: 3 })).toBeInTheDocument();
-    expect(getByText('Displaying Landing Page Title')).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render Title with variant "small" and contrast "high"', () => {
-    const displayText = 'Displaying Landing Page Title';
-    const { container, getByRole, getByText } = renderWithTheme(
-      <Title type="normal" size="small" contrast="high">
-        {displayText}
-      </Title>,
-    );
-    expect(getByRole('heading', { level: 3 })).toBeInTheDocument();
-    expect(getByText('Displaying Landing Page Title')).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render Title with variant "small"', () => {
-    const displayText = 'Displaying Landing Page Title';
-    const { container, getByRole, getByText } = renderWithTheme(
-      <Title type="normal" size="small">
-        {displayText}
-      </Title>,
-    );
-    expect(getByRole('heading', { level: 3 })).toBeInTheDocument();
-    expect(getByText('Displaying Landing Page Title')).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render Title with color', () => {
-    const displayText = 'Displaying Landing Page Title';
-    const { container, getByRole } = renderWithTheme(
-      <Title color="surface.text.subtle.highContrast">{displayText}</Title>,
-    );
-    expect(getByRole('heading', { level: 3 })).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render Title with mixed color', () => {
-    const { container } = renderWithTheme(
-      <Title>
-        Supercharge your business with the all‑powerful{' '}
-        <Title as="span" color="feedback.information.action.text.primary.default.lowContrast">
-          Payment Gateway
-        </Title>
-      </Title>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render Title with variant "medium"', () => {
-    const displayText = 'Displaying Landing Page Title';
-    const { container, getByRole, getByText } = renderWithTheme(
-      <Title type="muted" size="medium">
-        {displayText}
-      </Title>,
-    );
-    expect(getByRole('heading', { level: 2 })).toBeInTheDocument();
-    expect(getByText('Displaying Landing Page Title')).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render Title with variant "large"', () => {
-    const displayText = 'Displaying Landing Page Title';
-    const { container, getByRole, getByText } = renderWithTheme(
-      <Title type="subdued" size="large">
-        {displayText}
-      </Title>,
-    );
-    expect(getByRole('heading', { level: 1 })).toBeInTheDocument();
-    expect(getByText('Displaying Landing Page Title')).toBeInTheDocument();
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should accept as prop and render appropriate HTML tag', () => {
-    const displayText = 'Displaying some text';
-    const { getByText } = renderWithTheme(<Title as="span">{displayText}</Title>);
-    expect(getByText(displayText).tagName).toBe('SPAN');
-  });
-
-  it('should throw error on invalid as prop', () => {
-    const displayText = 'Displaying some text';
-    expect(() =>
-      renderWithTheme(
-        // @ts-expect-error testing failure case as prop is invalid
-        <Title as="button">{displayText}</Title>,
-      ),
-    ).toThrow(
-      '[Blade: Title]: Invalid `as` prop value - button. Only span, h1, h2, h3, h4, h5, h6 are accepted',
-    );
-  });
-
-  it('should be accessible', async () => {
-    const { container } = renderWithTheme(<Title>Text content</Title>);
-    await assertAccessible(container);
-  });
-
-  it('should accept testID', () => {
-    const displayText = 'Displaying Landing Screen Title';
-    const { getByTestId } = renderWithTheme(<Title testID="title-test">{displayText}</Title>);
-    expect(getByTestId('title-test')).toBeTruthy();
-  });
-});
diff --git a/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.native.test.tsx.snap b/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.native.test.tsx.snap
deleted file mode 100644
index 5a3126a90d4..00000000000
--- a/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.native.test.tsx.snap
+++ /dev/null
@@ -1,351 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Title /> should render Title with color 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <Text
-    accessibilityRole="header"
-    accessible={true}
-    color="surface.text.subtle.highContrast"
-    data-blade-component="title"
-    fontFamily="text"
-    fontSize={600}
-    fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={500}
-    style={
-      [
-        {
-          "color": "hsla(220, 30%, 96%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 20,
-          "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 28,
-          "marginBottom": 0,
-          "marginLeft": 0,
-          "marginRight": 0,
-          "marginTop": 0,
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationLine": "none",
-        },
-      ]
-    }
-  >
-    Displaying Landing Page Title
-  </Text>
-</View>
-`;
-
-exports[`<Title /> should render Title with default properties 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <Text
-    accessibilityRole="header"
-    accessible={true}
-    color="surface.text.normal.lowContrast"
-    data-blade-component="title"
-    fontFamily="text"
-    fontSize={600}
-    fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={500}
-    style={
-      [
-        {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 20,
-          "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 28,
-          "marginBottom": 0,
-          "marginLeft": 0,
-          "marginRight": 0,
-          "marginTop": 0,
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationLine": "none",
-        },
-      ]
-    }
-  >
-    Displaying Landing Screen Title
-  </Text>
-</View>
-`;
-
-exports[`<Title /> should render Title with mixed color 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <Text
-    accessibilityRole="header"
-    accessible={true}
-    color="surface.text.normal.lowContrast"
-    data-blade-component="title"
-    fontFamily="text"
-    fontSize={600}
-    fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={500}
-    style={
-      [
-        {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 20,
-          "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 28,
-          "marginBottom": 0,
-          "marginLeft": 0,
-          "marginRight": 0,
-          "marginTop": 0,
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationLine": "none",
-        },
-      ]
-    }
-  >
-    Supercharge your business with the all‑powerful
-     
-    <Text
-      accessibilityRole="header"
-      accessible={true}
-      color="feedback.information.action.text.primary.default.lowContrast"
-      data-blade-component="title"
-      fontFamily="text"
-      fontSize={600}
-      fontStyle="normal"
-      fontWeight="bold"
-      lineHeight={500}
-      style={
-        [
-          {
-            "color": "hsla(195, 100%, 31%, 1)",
-            "fontFamily": "Lato",
-            "fontSize": 20,
-            "fontStyle": "normal",
-            "fontWeight": "700",
-            "lineHeight": 28,
-            "marginBottom": 0,
-            "marginLeft": 0,
-            "marginRight": 0,
-            "marginTop": 0,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-            "textDecorationLine": "none",
-          },
-        ]
-      }
-    >
-      Payment Gateway
-    </Text>
-  </Text>
-</View>
-`;
-
-exports[`<Title /> should render Title with variant "large" 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <Text
-    accessibilityRole="header"
-    accessible={true}
-    color="surface.text.subdued.lowContrast"
-    data-blade-component="title"
-    fontFamily="text"
-    fontSize={800}
-    fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={700}
-    style={
-      [
-        {
-          "color": "hsla(217, 18%, 45%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 28,
-          "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 40,
-          "marginBottom": 0,
-          "marginLeft": 0,
-          "marginRight": 0,
-          "marginTop": 0,
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationLine": "none",
-        },
-      ]
-    }
-  >
-    Displaying Landing Screen Title
-  </Text>
-</View>
-`;
-
-exports[`<Title /> should render Title with variant "medium" 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <Text
-    accessibilityRole="header"
-    accessible={true}
-    color="surface.text.muted.lowContrast"
-    data-blade-component="title"
-    fontFamily="text"
-    fontSize={700}
-    fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={600}
-    style={
-      [
-        {
-          "color": "hsla(216, 16%, 60%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 24,
-          "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 32,
-          "marginBottom": 0,
-          "marginLeft": 0,
-          "marginRight": 0,
-          "marginTop": 0,
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationLine": "none",
-        },
-      ]
-    }
-  >
-    Displaying Landing Screen Title
-  </Text>
-</View>
-`;
-
-exports[`<Title /> should render Title with variant "small" 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <Text
-    accessibilityRole="header"
-    accessible={true}
-    color="surface.text.normal.lowContrast"
-    data-blade-component="title"
-    fontFamily="text"
-    fontSize={600}
-    fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={500}
-    style={
-      [
-        {
-          "color": "hsla(217, 56%, 17%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 20,
-          "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 28,
-          "marginBottom": 0,
-          "marginLeft": 0,
-          "marginRight": 0,
-          "marginTop": 0,
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationLine": "none",
-        },
-      ]
-    }
-  >
-    Displaying Landing Screen Title
-  </Text>
-</View>
-`;
-
-exports[`<Title /> should render Title with variant "small" and contrast "high" 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <Text
-    accessibilityRole="header"
-    accessible={true}
-    color="surface.text.normal.highContrast"
-    data-blade-component="title"
-    fontFamily="text"
-    fontSize={600}
-    fontStyle="normal"
-    fontWeight="bold"
-    lineHeight={500}
-    style={
-      [
-        {
-          "color": "hsla(0, 0%, 100%, 1)",
-          "fontFamily": "Lato",
-          "fontSize": 20,
-          "fontStyle": "normal",
-          "fontWeight": "700",
-          "lineHeight": 28,
-          "marginBottom": 0,
-          "marginLeft": 0,
-          "marginRight": 0,
-          "marginTop": 0,
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "paddingTop": 0,
-          "textDecorationLine": "none",
-        },
-      ]
-    }
-  >
-    Displaying Landing Screen Title
-  </Text>
-</View>
-`;
diff --git a/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.web.test.tsx.snap b/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.web.test.tsx.snap
deleted file mode 100644
index 4091ad78e47..00000000000
--- a/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.web.test.tsx.snap
+++ /dev/null
@@ -1,189 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Title /> should render Title with color 1`] = `
-.c0.c0.c0.c0.c0 {
-  color: hsla(220,30%,96%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.5rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 2rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <h3
-    class="c0"
-    data-blade-component="title"
-  >
-    Displaying Landing Page Title
-  </h3>
-</div>
-`;
-
-exports[`<Title /> should render Title with default properties 1`] = `
-.c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.5rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 2rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <h3
-    class="c0"
-    data-blade-component="title"
-  >
-    Displaying Landing Page Title
-  </h3>
-</div>
-`;
-
-exports[`<Title /> should render Title with mixed color 1`] = `
-.c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.5rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 2rem;
-  margin: 0;
-  padding: 0;
-}
-
-.c1.c1.c1.c1.c1 {
-  color: hsla(195,100%,31%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.5rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 2rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <h3
-    class="c0"
-    data-blade-component="title"
-  >
-    Supercharge your business with the all‑powerful
-     
-    <span
-      class="c1"
-      data-blade-component="title"
-    >
-      Payment Gateway
-    </span>
-  </h3>
-</div>
-`;
-
-exports[`<Title /> should render Title with variant "large" 1`] = `
-.c0.c0.c0.c0.c0 {
-  color: hsla(217,18%,45%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 2rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 2.5rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <h1
-    class="c0"
-    data-blade-component="title"
-  >
-    Displaying Landing Page Title
-  </h1>
-</div>
-`;
-
-exports[`<Title /> should render Title with variant "medium" 1`] = `
-.c0.c0.c0.c0.c0 {
-  color: hsla(216,16%,60%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.75rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 2.5rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <h2
-    class="c0"
-    data-blade-component="title"
-  >
-    Displaying Landing Page Title
-  </h2>
-</div>
-`;
-
-exports[`<Title /> should render Title with variant "small" 1`] = `
-.c0.c0.c0.c0.c0 {
-  color: hsla(217,56%,17%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.5rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 2rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <h3
-    class="c0"
-    data-blade-component="title"
-  >
-    Displaying Landing Page Title
-  </h3>
-</div>
-`;
-
-exports[`<Title /> should render Title with variant "small" and contrast "high" 1`] = `
-.c0.c0.c0.c0.c0 {
-  color: hsla(0,0%,100%,1);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-  font-size: 1.5rem;
-  font-weight: 700;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 2rem;
-  margin: 0;
-  padding: 0;
-}
-
-<div>
-  <h3
-    class="c0"
-    data-blade-component="title"
-  >
-    Displaying Landing Page Title
-  </h3>
-</div>
-`;
diff --git a/packages/blade/src/components/Typography/Title/index.ts b/packages/blade/src/components/Typography/Title/index.ts
deleted file mode 100644
index 304b1af24b6..00000000000
--- a/packages/blade/src/components/Typography/Title/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Title';
diff --git a/packages/blade/src/components/Typography/index.ts b/packages/blade/src/components/Typography/index.ts
index e0c4ca5e34d..8d753cbde6c 100644
--- a/packages/blade/src/components/Typography/index.ts
+++ b/packages/blade/src/components/Typography/index.ts
@@ -1,4 +1,3 @@
-export * from './Title';
 export * from './Heading';
 export * from './Text';
 export * from './Code';
diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts
index 1c87bffb88d..5c3c0d6887c 100644
--- a/packages/blade/src/components/index.ts
+++ b/packages/blade/src/components/index.ts
@@ -1,44 +1,44 @@
+export * from './Accordion';
 export * from './ActionList';
 export * from './Alert';
+export * from './Amount';
 export * from './Badge';
 export * from './BladeProvider';
+export * from './BottomSheet';
 export * from './Box';
-export * from './Card';
 export * from './Button';
 export * from './Button/IconButton';
-export * from './Counter';
-export * from './Checkbox';
+export * from './Card';
 export * from './Carousel';
+export * from './Checkbox';
 export * from './Chip';
+export * from './Collapsible';
+export * from './Counter';
 export * from './Divider';
 export * from './Dropdown';
 export * from './Icons';
-export * from './Input/TextInput';
+export * from './Indicator';
+export * from './Input/DropdownInputTriggers';
+export * from './Input/OTPInput';
 export * from './Input/PasswordInput';
 export * from './Input/TextArea';
-export * from './Input/OTPInput';
-export * from './Input/DropdownInputTriggers';
-export * from './Indicator';
+export * from './Input/TextInput';
 export * from './Link';
 export * from './List';
 export * from './LiveAnnouncer';
 export * from './Modal';
+export * from './Popover';
 export * from './ProgressBar';
 export * from './Radio';
-export * from './Spinner';
+export * from './Skeleton';
 export * from './SkipNav';
+export * from './Spinner';
+export * from './SpotlightPopoverTour';
 export * from './Switch';
-export * from './Tag';
-export * from './Tabs';
 export * from './Table';
-export * from './Skeleton';
-export * from './Typography';
-export * from './VisuallyHidden';
-export * from './Amount';
-export * from './BottomSheet';
-export * from './Accordion';
-export * from './Collapsible';
+export * from './Tabs';
+export * from './Tag';
 export * from './Tooltip';
-export * from './Popover';
-export * from './SpotlightPopoverTour';
 export * from './types';
+export * from './Typography';
+export * from './VisuallyHidden';
diff --git a/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.native.tsx b/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.native.tsx
index 377c295fab9..08885414ab6 100644
--- a/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.native.tsx
+++ b/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.native.tsx
@@ -24,9 +24,9 @@ const CheckboxItem: React.FC<{ label: string; checked?: boolean; disabled?: bool
   return (
     <BaseBox display="flex" alignItems="center" flexDirection="row" gap="spacing.3">
       {isChecked ? (
-        <EyeIcon color="action.icon.link.active" size="small" />
+        <EyeIcon color="interactive.icon.primary.normal" size="small" />
       ) : (
-        <CloseIcon color="action.icon.link.active" size="small" />
+        <CloseIcon color="interactive.icon.primary.normal" size="small" />
       )}
       <Pressable onPress={toggleChecked} {...checkboxAccessibilityProps} focusable>
         <Text>{label}</Text>
diff --git a/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.web.tsx b/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.web.tsx
index ca974fb19f3..2cab35c7d18 100644
--- a/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.web.tsx
+++ b/packages/blade/src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.web.tsx
@@ -31,9 +31,9 @@ const Checkbox: React.FC<{ label: string; checked?: boolean; disabled?: boolean
   return (
     <BaseBox display="flex" alignItems="center" gap="spacing.3">
       {isChecked ? (
-        <EyeIcon color="action.icon.link.active" size="medium" />
+        <EyeIcon color="interactive.icon.primary.normal" size="medium" />
       ) : (
-        <CloseIcon color="action.icon.link.active" size="medium" />
+        <CloseIcon color="interactive.icon.primary.normal" size="medium" />
       )}
       <BaseBox
         onKeyDown={handleOnKeyDown}
@@ -43,8 +43,8 @@ const Checkbox: React.FC<{ label: string; checked?: boolean; disabled?: boolean
         style={{
           // @ts-ignore
           color: disabled
-            ? theme.colors.action.text.primary.disabled
-            : theme.colors.surface.text.normal.lowContrast,
+            ? theme.colors.interactive.text.primary.disabled
+            : theme.colors.interactive.text.gray.normal,
         }}
       >
         {label}
diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/BrandedComponentKitchenSink.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/BrandedComponentKitchenSink.tsx
index 4bea618c804..5bc1bbb4bd0 100644
--- a/packages/blade/src/storybook-recipes/ThemePlayground/BrandedComponentKitchenSink.tsx
+++ b/packages/blade/src/storybook-recipes/ThemePlayground/BrandedComponentKitchenSink.tsx
@@ -74,13 +74,13 @@ const filteredstories = allStories.filter((Story) => includedStories.includes(St
 
 const BrandedComponentKitchenSink = (): React.ReactElement => {
   return (
-    <Card surfaceLevel={2} elevation="lowRaised">
+    <Card elevation="lowRaised">
       <CardBody>
         {filteredstories.map((Story, index) => {
           return (
             <>
               {index === 0 ? null : <Divider orientation="horizontal" marginBottom="spacing.6" />}
-              <Heading type="subtle" size="large" marginBottom="spacing.4">
+              <Heading size="large" marginBottom="spacing.4">
                 {StoryNameToHeadingMap[Story.storyName] ?? Story.storyName}:
               </Heading>
               <Story />
diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutCard.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutCard.tsx
index 0cd1ebf3169..6ca50fe9f7d 100644
--- a/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutCard.tsx
+++ b/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutCard.tsx
@@ -1,5 +1,7 @@
-import { Box, TextInput, Checkbox, Heading, PasswordInput } from '../../../components';
+import { Box, Checkbox, Heading } from '../../../components';
 import { CheckoutShell } from './CheckoutShell';
+import { PasswordInput } from '~components/Input/PasswordInput';
+import { TextInput } from '~components/Input/TextInput';
 
 const CheckoutCard = (): React.ReactElement => {
   return (
diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutHome.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutHome.tsx
index e22c3306f2b..c91f9bca52b 100644
--- a/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutHome.tsx
+++ b/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutHome.tsx
@@ -28,7 +28,7 @@ const QRImageWrapper = styled.div`
   &:before {
     border-style: solid;
     border-width: 2px;
-    border-color: ${({ theme }) => theme.colors.brand.primary[500]};
+    border-color: ${({ theme }) => theme.colors.surface.icon.primary.normal};
     bottom: 1px;
     content: '';
     left: 1px;
@@ -37,7 +37,7 @@ const QRImageWrapper = styled.div`
     top: 1px;
   }
   &:after {
-    background: ${({ theme }) => theme.colors.surface.background.level2.lowContrast};
+    background: ${({ theme }) => theme.colors.surface.background.gray.intense};
     content: '';
     height: 120%;
     left: -10%;
@@ -62,13 +62,13 @@ const ClickableRow = styled.button(({ theme }) => ({
   display: 'flex',
   flex: 1,
   width: '100%',
-  borderBottom: `2px solid ${theme.colors.surface.border.normal.lowContrast}`,
+  borderBottom: `2px solid ${theme.colors.surface.border.gray.muted}`,
   transition: `background-color ${makeMotionTime(theme.motion.duration.gentle)} ${
     theme.motion.easing.standard.revealing
   }}`,
   padding: `${makeSpace(theme.spacing[4])} ${makeSpace(theme.spacing[4])}`,
   '&:hover': {
-    backgroundColor: theme.colors.brand.primary[300],
+    backgroundColor: theme.colors.interactive.background.primary.faded,
   },
   '&:last-child': {
     borderBottom: 'none',
@@ -115,10 +115,10 @@ const CheckoutHome = (): React.ReactElement => {
                   <UPIRowImage src="https://cdn.razorpay.com/app/paytm.svg" alt="paytm-app-logo" />
                   <UPIRowImage src="https://cdn.razorpay.com/app/bhim.svg" alt="bhim-app-logo" />
                 </Box>
-                <Text type="subdued" size="small">
+                <Text size="small">
                   QR Code is valid for
                   <br />
-                  <Text type="subdued" size="small" color="feedback.text.negative.lowContrast">
+                  <Text size="small" color="feedback.text.negative.intense">
                     12 minutes
                   </Text>
                 </Text>
@@ -140,7 +140,7 @@ const CheckoutHome = (): React.ReactElement => {
               </Box>
               <Text>UPI - Google Pay</Text>
               <Box display="flex" flex={1} alignItems="center" justifyContent="flex-end">
-                <ChevronRightIcon size="xlarge" color="brand.primary.500" />
+                <ChevronRightIcon size="xlarge" color="surface.icon.primary.normal" />
               </Box>
             </ClickableRow>
             <ClickableRow>
@@ -152,7 +152,7 @@ const CheckoutHome = (): React.ReactElement => {
               </Box>
               <Text>UPI - Google Pay</Text>
               <Box display="flex" flex={1} alignItems="center" justifyContent="flex-end">
-                <ChevronRightIcon size="xlarge" color="brand.primary.500" />
+                <ChevronRightIcon size="xlarge" color="surface.icon.primary.normal" />
               </Box>
             </ClickableRow>
           </CardBody>
@@ -171,18 +171,18 @@ const CheckoutHome = (): React.ReactElement => {
                   width="24px"
                 >
                   <path
-                    fill={theme.colors.brand.primary[500]}
+                    fill={theme.colors.surface.icon.primary.normal}
                     d="M2 7v13h18v-5H7V7H2zm0-2h5v10h15v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"
                   />
                   <path
-                    fill={theme.colors.brand.primary[800]}
+                    fill={theme.colors.surface.icon.primary.normal}
                     d="M10.004 13.003a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2h-2zM7 0h18a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 2v13h18V2H7zm-.282 5.005a1 1 0 1 1 0-2h19a1 1 0 0 1 0 2h-19z"
                   />
                 </svg>
               </Box>
               <Text>Card</Text>
               <Box display="flex" flex={1} alignItems="center" justifyContent="flex-end">
-                <ChevronRightIcon size="xlarge" color="brand.primary.500" />
+                <ChevronRightIcon size="xlarge" color="surface.icon.primary.normal" />
               </Box>
             </ClickableRow>
             <ClickableRow>
@@ -194,18 +194,18 @@ const CheckoutHome = (): React.ReactElement => {
                   width="24px"
                 >
                   <path
-                    fill={theme.colors.brand.primary[500]}
+                    fill={theme.colors.surface.icon.primary.normal}
                     d="m9.516 20.254 9.15-8.388-6.1-8.388-1.185 6.516 1.629 2.042-2.359 1.974-1.135 6.244zM12.809.412l8 11a1 1 0 0 1-.133 1.325l-12 11c-.707.648-1.831.027-1.66-.916l1.42-7.805 3.547-3.01-1.986-5.579 1.02-5.606c.157-.865 1.274-1.12 1.792-.41z"
                   />
                   <path
-                    fill={theme.colors.brand.primary[800]}
+                    fill={theme.colors.surface.icon.primary.normal}
                     d="m5.566 3.479-3.05 16.775 9.147-8.388-6.097-8.387zM5.809.412l7.997 11a1 1 0 0 1-.133 1.325l-11.997 11c-.706.648-1.831.027-1.66-.916l4-22C4.174-.044 5.292-.299 5.81.412z"
                   />
                 </svg>
               </Box>
               <Text>UPI / QR</Text>
               <Box display="flex" flex={1} alignItems="center" justifyContent="flex-end">
-                <ChevronRightIcon size="xlarge" color="brand.primary.500" />
+                <ChevronRightIcon size="xlarge" color="surface.icon.primary.normal" />
               </Box>
             </ClickableRow>
             <ClickableRow>
@@ -217,18 +217,18 @@ const CheckoutHome = (): React.ReactElement => {
                   viewBox="0 0 28 25"
                 >
                   <path
-                    fill={theme.colors.brand.primary[500]}
+                    fill={theme.colors.surface.icon.primary.normal}
                     d="M4 15a1 1 0 0 1 2 0v5a1 1 0 0 1-2 0v-5zm6 0a1 1 0 0 1 2 0v5a1 1 0 0 1-2 0v-5zm6 0a1 1 0 0 1 2 0v5a1 1 0 0 1-2 0v-5zM1 25a1 1 0 0 1 0-2h20a1 1 0 0 1 0 2H1zm0-13c-.978 0-1.374-1.259-.573-1.82l10-7a1 1 0 0 1 1.146 0l1.426 1L13 9l1 3H1zm3.172-2h8.814l.017-3.378L11 5.221 4.172 10z"
                   />
                   <path
-                    fill={theme.colors.brand.primary[800]}
+                    fill={theme.colors.surface.icon.primary.normal}
                     d="M20 16a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm3.663-7H27v2h-3.338c-.162 2.156-.85 4.275-2.057 6.352l-1.21-.704c1.084-1.863 1.703-3.744 1.863-5.648H13V7h9.258c-.16-1.904-.78-3.785-1.863-5.648l1.21-.704C22.814 2.725 23.501 4.844 23.663 7zm-4.058 7.648-1.21.704C17 12.955 16.3 10.502 16.3 8c0-2.501.701-4.955 2.095-7.352l1.21.704C18.332 3.54 17.7 5.754 17.7 8c0 2.246.632 4.46 1.905 6.648z"
                   />
                 </svg>
               </Box>
               <Text>Netbanking</Text>
               <Box display="flex" flex={1} alignItems="center" justifyContent="flex-end">
-                <ChevronRightIcon size="xlarge" color="brand.primary.500" />
+                <ChevronRightIcon size="xlarge" color="surface.icon.primary.normal" />
               </Box>
             </ClickableRow>
             <ClickableRow>
@@ -240,18 +240,18 @@ const CheckoutHome = (): React.ReactElement => {
                   viewBox="0 0 25 23"
                 >
                   <path
-                    fill={theme.colors.brand.primary[500]}
+                    fill={theme.colors.surface.background.primary.intense}
                     d="M2 7v14h19v-5h2.011v-6H21V7H2zm0-2h19a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm15 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
                   />
                   <path
-                    fill={theme.colors.brand.primary[800]}
+                    fill={theme.colors.surface.background.primary.intense}
                     d="M7.326 5 16 2.11V5h2V2.11c0-.643-.308-1.352-.83-1.728a2 2 0 0 0-1.802-.276L2 5h5.326zM15 12v4h8v-4h-8zm0-2h8a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2z"
                   />
                 </svg>
               </Box>
               <Text>Wallet</Text>
               <Box display="flex" flex={1} alignItems="center" justifyContent="flex-end">
-                <ChevronRightIcon size="xlarge" color="brand.primary.500" />
+                <ChevronRightIcon size="xlarge" color="surface.icon.primary.normal" />
               </Box>
             </ClickableRow>
             <ClickableRow>
@@ -265,33 +265,36 @@ const CheckoutHome = (): React.ReactElement => {
                 >
                   <path
                     d="M19.514 18v-1.5h8.015c.455 0 .824-.336.824-.75V2.25c0-.414-.369-.75-.824-.75h-9.058c-.455 0-.824.336-.824.75v8.25H16v-9c0-.828.737-1.5 1.647-1.5h10.706C29.263 0 30 .672 30 1.5v15c0 .828-.737 1.5-1.647 1.5h-8.84Zm.604-9c0-1.657 1.475-3 3.294-3 1.82 0 3.294 1.343 3.294 3s-1.475 3-3.294 3c-1.82 0-3.294-1.343-3.294-3Zm1.811 0c0 .746.664 1.35 1.483 1.35.818 0 1.482-.604 1.482-1.35 0-.746-.664-1.35-1.482-1.35-.819 0-1.483.604-1.483 1.35Zm3.403-6.303c-.182-.38.009-.822.426-.987.417-.166.902.008 1.084.388.166.349.475.63.859.78.417.164.61.606.429.986-.18.38-.665.555-1.083.39-.767-.3-1.382-.86-1.715-1.557Zm-.01 12.723c.334-.698.95-1.257 1.716-1.559.418-.164.902.011 1.083.391.18.38-.012.822-.43.986a1.59 1.59 0 0 0-.858.78c-.182.38-.667.554-1.084.389-.417-.166-.608-.607-.427-.987Zm-4.45-12.723c-.333.697-.948 1.256-1.715 1.558-.417.164-.902-.01-1.082-.391-.18-.38.011-.822.429-.986a1.59 1.59 0 0 0 .859-.78c.181-.38.666-.554 1.083-.388.417.165.608.607.427.987Z"
-                    fill={theme.colors.brand.primary[500]}
+                    fill={theme.colors.surface.icon.primary.normal}
                   />
                   <path
                     fillRule="evenodd"
                     clipRule="evenodd"
                     d="M0 19c0 6.075 4.925 11 11 11s11-4.925 11-11S17.075 8 11 8 0 12.925 0 19Zm20 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-                    fill={theme.colors.brand.primary[800]}
+                    fill={theme.colors.surface.icon.primary.normal}
+                  />
+                  <path
+                    d="M20.625 19H1.375h19.25Z"
+                    fill={theme.colors.surface.icon.primary.normal}
                   />
-                  <path d="M20.625 19H1.375h19.25Z" fill={theme.colors.brand.primary[800]} />
                   <path
                     d="M20.625 19H1.375"
-                    stroke={theme.colors.brand.primary[500]}
+                    stroke={theme.colors.surface.icon.primary.normal}
                     strokeWidth={2}
                   />
                   <path
                     d="M20.625 17.625v2.75H1.375v-2.75h19.25Z"
-                    fill={theme.colors.brand.primary[800]}
+                    fill={theme.colors.surface.icon.primary.normal}
                   />
                   <path
                     d="m11.543 9.859 1.664-.968c1.916 3.296 2.88 6.67 2.88 10.109 0 3.44-.964 6.813-2.88 10.109l-1.664-.968c1.75-3.01 2.62-6.052 2.62-9.141 0-3.089-.87-6.131-2.62-9.141ZM10.457 28.141l-1.664.968c-1.916-3.296-2.88-6.67-2.88-10.109 0-3.44.964-6.813 2.88-10.109l1.664.968c-1.75 3.01-2.62 6.052-2.62 9.141 0 3.089.87 6.131 2.62 9.141Z"
-                    fill={theme.colors.brand.primary[800]}
+                    fill={theme.colors.surface.icon.primary.normal}
                   />
                 </svg>
               </Box>
               <Text>Internet Bank Transfer</Text>
               <Box display="flex" flex={1} alignItems="center" justifyContent="flex-end">
-                <ChevronRightIcon size="xlarge" color="brand.primary.500" />
+                <ChevronRightIcon size="xlarge" color="surface.icon.primary.normal" />
               </Box>
             </ClickableRow>
           </CardBody>
diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutShell.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutShell.tsx
index 48eea0c3adf..6a3dd5a8499 100644
--- a/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutShell.tsx
+++ b/packages/blade/src/storybook-recipes/ThemePlayground/Checkout/CheckoutShell.tsx
@@ -13,8 +13,8 @@ import {
   BottomSheet,
   BottomSheetHeader,
   BottomSheetBody,
-  ActionList,
-  ActionListItem,
+  // ActionList,
+  // ActionListItem,
 } from '../../../components';
 
 const StyledHeader = styled.div(({ theme }) => ({
@@ -22,7 +22,7 @@ const StyledHeader = styled.div(({ theme }) => ({
   backgroundImage: 'linear-gradient(to bottom right,rgba(255,255,255,0.2),rgba(0,0,0,0.2))',
   height: '80px',
   width: '100%',
-  backgroundColor: theme.colors.brand.primary[500],
+  backgroundColor: theme.colors.surface.background.primary.intense,
   padding: makeSpace(theme.spacing[4]),
   borderTopLeftRadius: 'medium',
   borderTopRightRadius: 'medium',
@@ -35,7 +35,7 @@ const StyledHeader = styled.div(({ theme }) => ({
 
 const StyledFooter = styled.div(({ theme }) => ({
   boxShadow: `0 -2px 6px  rgba(23,26,30,.15)`, // not in box
-  borderTop: `1px solid ${theme.colors.brand.gray[400].lowContrast}`,
+  borderTop: `1px solid ${theme.colors.surface.border.primary.muted}`,
   zIndex: 2,
   display: 'flex',
   padding: makeSpace(theme.spacing[4]),
@@ -74,14 +74,14 @@ const LanguageSelector = styled.div(({ theme }) => ({
 
 const CheckoutShell = ({ children }: { children: React.ReactNode }): React.ReactElement => {
   const [isLanguageSheetOpen, setIsLanguageSheetOpen] = useState(false);
-  const hideLanguageSheet = (): void => setIsLanguageSheetOpen(false);
+  // const hideLanguageSheet = (): void => setIsLanguageSheetOpen(false);
   return (
     <Box
       maxWidth="375px"
       height="640px"
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       borderWidth="thin"
-      borderColor="surface.border.normal.lowContrast"
+      borderColor="surface.border.gray.muted"
       borderRadius="medium"
       display="flex"
       flexDirection="column"
@@ -90,19 +90,20 @@ const CheckoutShell = ({ children }: { children: React.ReactNode }): React.React
       <BottomSheet isOpen={isLanguageSheetOpen} onDismiss={() => setIsLanguageSheetOpen(false)}>
         <BottomSheetHeader title="Choose Language" />
         <BottomSheetBody>
-          <ActionList>
+          {/* TODO: Uncomment once ActionList is done */}
+          {/* <ActionList>
             <ActionListItem onClick={hideLanguageSheet} title="English" value="English" />
             <ActionListItem onClick={hideLanguageSheet} title="Hindi" value="Hindi" />
             <ActionListItem onClick={hideLanguageSheet} title="Marathi" value="Marathi" />
             <ActionListItem onClick={hideLanguageSheet} title="Gujarati" value="Gujarati" />
             <ActionListItem onClick={hideLanguageSheet} title="Kannada" value="Kannada" />
-          </ActionList>
+          </ActionList> */}
         </BottomSheetBody>
       </BottomSheet>
       <StyledHeader>
         <MerchantAvatar src="https://i.imgur.com/buGhEkT.png" />
         <Box zIndex={1}>
-          <Heading color="action.text.primary.default">Merchant Name</Heading>
+          <Heading color="interactive.text.onPrimary.normal">Merchant Name</Heading>
           <TrustedBusinessWrapper>
             <img
               src="https://checkout-static-next.razorpay.com/build/assets/images/rtb-live.d7eecf4c.svg"
@@ -114,16 +115,16 @@ const CheckoutShell = ({ children }: { children: React.ReactNode }): React.React
               marginLeft="spacing.2"
               marginRight="spacing.2"
               size="small"
-              color="action.text.primary.default"
+              color="interactive.text.onPrimary.normal"
             >
               Razorpay trusted business
             </Text>
-            <InfoIcon size="xsmall" color="action.icon.primary.default" />
+            <InfoIcon size="xsmall" color="interactive.icon.onPrimary.normal" />
           </TrustedBusinessWrapper>
         </Box>
 
         <Box display="flex" alignItems="flex-end" flexDirection="column" flex={1}>
-          <CloseIcon size="medium" color="action.icon.primary.default" />
+          <CloseIcon size="medium" color="interactive.icon.onPrimary.normal" />
           <LanguageSelector onClick={() => setIsLanguageSheetOpen(true)}>
             <svg
               width="15px"
@@ -172,7 +173,7 @@ const CheckoutShell = ({ children }: { children: React.ReactNode }): React.React
                 mask="url(#path-5-outside-1_4902_36286)"
               />
             </svg>
-            <ChevronDownIcon size="xsmall" color="action.icon.primary.default" />
+            <ChevronDownIcon size="xsmall" color="interactive.icon.onPrimary.normal" />
           </LanguageSelector>
         </Box>
       </StyledHeader>
@@ -182,9 +183,7 @@ const CheckoutShell = ({ children }: { children: React.ReactNode }): React.React
       <StyledFooter>
         <Box flex={1} flexDirection="column">
           <Amount value={5500} />
-          <Text size="small" type="subdued">
-            View Details
-          </Text>
+          <Text size="small">View Details</Text>
         </Box>
         <Box flex={2}>
           <Button size="large" isFullWidth>
diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/PhantomUI.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/PhantomUI.tsx
index 6f6cb9371b7..96ef04a663e 100644
--- a/packages/blade/src/storybook-recipes/ThemePlayground/PhantomUI.tsx
+++ b/packages/blade/src/storybook-recipes/ThemePlayground/PhantomUI.tsx
@@ -10,19 +10,15 @@ const PhantomUI = (): React.ReactElement => {
   const [selectedBusinessType, setSelectedBusinessType] = useState('Individual');
   return (
     <Box maxWidth="375px">
-      <Card surfaceLevel={2} elevation="lowRaised">
+      <Card elevation="lowRaised">
         <CardBody>
           <Box>
             <Heading size="large">What's your business type?</Heading>
-            <Text size="medium" type="subdued">
-              Pick only one that applies to your business
-            </Text>
+            <Text size="medium">Pick only one that applies to your business</Text>
           </Box>
           <Box marginTop="spacing.10">
             <Box display="flex" flexDirection="row" gap="spacing.2">
-              <Text size="medium" type="subdued">
-                NOT REGISTERED
-              </Text>
+              <Text size="medium">NOT REGISTERED</Text>
               <IconButton
                 icon={InfoIcon}
                 onClick={() => {
@@ -44,9 +40,7 @@ const PhantomUI = (): React.ReactElement => {
           </Box>
           <Box marginTop="spacing.8">
             <Box display="flex" flexDirection="row" gap="spacing.2">
-              <Text size="medium" type="subdued">
-                REGISTERED
-              </Text>
+              <Text size="medium">REGISTERED</Text>
               <IconButton
                 icon={InfoIcon}
                 onClick={() => {
@@ -85,11 +79,11 @@ const PhantomUI = (): React.ReactElement => {
             </Button>
             <Box display="flex" flexDirection="row" marginTop="spacing.3" alignItems="center">
               <RazorpayIcon
-                color="surface.action.icon.default.lowContrast"
+                color="interactive.icon.gray.normal"
                 size="medium"
                 marginRight="spacing.2"
               />
-              <Text type="subtle">Powered by Razorpay</Text>
+              <Text>Powered by Razorpay</Text>
             </Box>
           </Box>
         </CardBody>
diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/ThemeSelector.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/ThemeSelector.tsx
index 2a897aa9b30..8c3fe24252e 100644
--- a/packages/blade/src/storybook-recipes/ThemePlayground/ThemeSelector.tsx
+++ b/packages/blade/src/storybook-recipes/ThemePlayground/ThemeSelector.tsx
@@ -18,8 +18,10 @@ const ColorSelection = styled.button<{ color: string; isSelected?: boolean }>(
     width: '24px',
     height: '24px',
     borderRadius: makeBorderSize(theme.border.radius.round),
-    outline: `1px solid ${theme.colors.surface.background.level1.lowContrast}`,
-    boxShadow: `0px 0px 4px 3px ${isSelected ? theme.colors.brand.primary[500] : 'transparent'}`,
+    outline: `1px solid ${theme.colors.surface.background.gray.subtle}`,
+    boxShadow: `0px 0px 4px 3px ${
+      isSelected ? theme.colors.feedback.background.information : 'transparent'
+    }`,
     border: 'none',
     backgroundColor: color,
     display: 'flex',
@@ -40,8 +42,10 @@ const ColorPickerTrigger = styled.label<{ isSelected?: boolean }>(({ isSelected,
   cursor: 'pointer',
   position: 'relative',
   background: 'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)',
-  outline: `1px solid ${theme.colors.surface.background.level1.lowContrast}`,
-  boxShadow: `0px 0px 4px 3px ${isSelected ? theme.colors.brand.primary[500] : 'transparent'}`,
+  outline: `1px solid ${theme.colors.surface.background.gray.subtle}`,
+  boxShadow: `0px 0px 4px 3px ${
+    isSelected ? theme.colors.feedback.background.information : 'transparent'
+  }`,
 }));
 
 const ColorPickerInput = styled.input({
@@ -68,11 +72,24 @@ const ColorSelector = ({
 }): React.ReactElement => {
   return (
     <ColorSelection color={color} onClick={onClick} isSelected={isSelected}>
-      {isSelected ? <CheckIcon size="large" color="action.icon.primary.default" /> : null}
+      {isSelected ? <CheckIcon size="large" color="interactive.icon.onPrimary.normal" /> : null}
     </ColorSelection>
   );
 };
 
+type ThemeSelectorProps = {
+  selectedColor?: string;
+  setSelectedColor: React.Dispatch<React.SetStateAction<string | undefined>>;
+  colorScheme: ColorSchemeNames;
+  setColorScheme: React.Dispatch<React.SetStateAction<ColorSchemeNames>>;
+  selectedPreBuiltTheme?: string;
+  setSelectedPreBuiltTheme: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setBorderBase: React.Dispatch<React.SetStateAction<string>>;
+  borderBase: string;
+  setShowInternalDemoConfig: React.Dispatch<React.SetStateAction<boolean>>;
+  showInternalDemoConfig: boolean;
+};
+
 const ThemeSelector = ({
   selectedColor,
   setSelectedColor,
@@ -84,18 +101,7 @@ const ThemeSelector = ({
   setBorderBase,
   setShowInternalDemoConfig,
   showInternalDemoConfig,
-}: {
-  selectedColor?: string;
-  setSelectedColor: React.Dispatch<React.SetStateAction<string | undefined>>;
-  colorScheme: ColorSchemeNames;
-  setColorScheme: React.Dispatch<React.SetStateAction<ColorSchemeNames>>;
-  selectedPreBuiltTheme?: string;
-  setSelectedPreBuiltTheme: React.Dispatch<React.SetStateAction<string | undefined>>;
-  setBorderBase: React.Dispatch<React.SetStateAction<string>>;
-  borderBase: string;
-  setShowInternalDemoConfig: React.Dispatch<React.SetStateAction<boolean>>;
-  showInternalDemoConfig: boolean;
-}): React.ReactElement => {
+}: ThemeSelectorProps): React.ReactElement => {
   const colorOptions = [
     '#EE681A',
     '#83003D',
@@ -130,7 +136,7 @@ const ThemeSelector = ({
       zIndex={50}
       height="100%"
     >
-      <Card surfaceLevel={3} elevation="highRaised" height="100%">
+      <Card elevation="highRaised" height="100%">
         <CardBody>
           <Box width={isDesktop ? '400px' : '100%'} marginTop="spacing.6">
             <Box display="flex" flexDirection="row" gap="spacing.4">
@@ -154,19 +160,13 @@ const ThemeSelector = ({
                   setSelectedColor(undefined);
                 }}
               >
-                <Radio value="paymentTheme">Payment Theme</Radio>
-                <Radio value="bankingTheme">Banking Theme</Radio>
+                {/* TODO: remove the section that allows you to select theme */}
+                <Radio value="bladeTheme">Blade Theme</Radio>
               </RadioGroup>
             </Box>
             <Box marginTop="spacing.8" />
             <Box display="flex" flexDirection="column" gap="spacing.2" flexWrap="wrap">
-              <Text
-                size="small"
-                type="subdued"
-                weight="bold"
-                marginRight="spacing.8"
-                marginBottom="spacing.2"
-              >
+              <Text size="small" weight="semibold" marginRight="spacing.8" marginBottom="spacing.2">
                 {'Theme with custom brand color:'}
               </Text>
               <Box display="flex" flexDirection="row" gap="spacing.3">
@@ -239,7 +239,7 @@ const ThemeSelector = ({
             ) : null}
 
             <Box marginTop="spacing.8" />
-            <Text type="subdued" weight="bold" marginRight="spacing.8" marginBottom="spacing.3">
+            <Text weight="semibold" marginRight="spacing.8" marginBottom="spacing.3">
               Code:
             </Text>
             <Box>
diff --git a/packages/blade/src/storybook-recipes/ThemePlayground/index.tsx b/packages/blade/src/storybook-recipes/ThemePlayground/index.tsx
index 114cbad8351..dea8f422250 100644
--- a/packages/blade/src/storybook-recipes/ThemePlayground/index.tsx
+++ b/packages/blade/src/storybook-recipes/ThemePlayground/index.tsx
@@ -6,10 +6,10 @@ import { PhantomUI } from './PhantomUI';
 import { ThemeSelector } from './ThemeSelector';
 import { BrandedComponentKitchenSink } from './BrandedComponentKitchenSink';
 import { BladeProvider } from '~components/BladeProvider';
-import { bankingTheme, createTheme, overrideTheme, paymentTheme } from '~tokens/theme';
+import { bladeTheme, createTheme, overrideTheme } from '~tokens/theme';
 import type { ColorSchemeNames, ThemeTokens } from '~tokens/theme';
 import { Box } from '~components/Box';
-import { Title } from '~components/Typography';
+import { Heading } from '~components/Typography';
 import { Card, CardBody } from '~components/Card';
 
 const ThemePlayground = (): React.ReactElement => {
@@ -17,7 +17,7 @@ const ThemePlayground = (): React.ReactElement => {
   const [borderBase, setBorderBase] = useState<string>('2');
   const [colorScheme, setColorScheme] = useState<ColorSchemeNames>('light');
   const [selectedPreBuiltTheme, setSelectedPreBuiltTheme] = useState<string | undefined>(
-    'paymentTheme',
+    'bladeTheme',
   );
   const [showInternalDemoConfig, setShowInternalDemoConfig] = useState(false);
   const getTheme = (): ThemeTokens => {
@@ -25,10 +25,10 @@ const ThemePlayground = (): React.ReactElement => {
       return createTheme({ brandColor: selectedColor });
     }
     if (selectedPreBuiltTheme === 'paymentTheme') {
-      return paymentTheme;
+      return bladeTheme;
     }
 
-    return bankingTheme;
+    return bladeTheme;
   };
 
   const getOverriddenTheme = (): ThemeTokens => {
@@ -72,31 +72,31 @@ const ThemePlayground = (): React.ReactElement => {
             showInternalDemoConfig={showInternalDemoConfig}
             setShowInternalDemoConfig={setShowInternalDemoConfig}
           />
-          <Card surfaceLevel={3}>
+          <Card>
             <CardBody>
               <Box>
                 <Box flex={1}>
-                  <Title size="medium" marginBottom="spacing.4">
+                  <Heading size="medium" marginBottom="spacing.4">
                     Checkout Home Page
-                  </Title>
+                  </Heading>
                   <CheckoutHome />
                 </Box>
                 <Box flex={1} marginTop="spacing.8">
-                  <Title size="medium" marginBottom="spacing.4">
+                  <Heading size="medium" marginBottom="spacing.4">
                     Checkout Card
-                  </Title>
+                  </Heading>
                   <CheckoutCard />
                 </Box>
                 <Box flex={1} marginTop="spacing.8">
-                  <Title size="medium" marginBottom="spacing.4">
+                  <Heading size="medium" marginBottom="spacing.4">
                     Phantom UI
-                  </Title>
+                  </Heading>
                   <PhantomUI />
                 </Box>
                 <Box marginTop="spacing.8">
-                  <Title size="medium" marginBottom="spacing.4">
+                  <Heading size="medium" marginBottom="spacing.4">
                     Component Showcase
-                  </Title>
+                  </Heading>
                   <BrandedComponentKitchenSink />
                 </Box>
               </Box>
diff --git a/packages/blade/src/tokens/global/border.ts b/packages/blade/src/tokens/global/border.ts
index 1bd42f73803..f17e3b3ec35 100644
--- a/packages/blade/src/tokens/global/border.ts
+++ b/packages/blade/src/tokens/global/border.ts
@@ -1,12 +1,18 @@
 type BorderRadius = Readonly<{
   /** none: 0(px/rem/pt) */
   none: 0;
+  /** xsmall: 1(px/rem/pt) */
+  xsmall: 1;
   /** small: 2(px/rem/pt) */
   small: 2;
   /** medium: 4(px/rem/pt) */
   medium: 4;
   /** large: 8(px/rem/pt) */
   large: 8;
+  /** xlarge: 12(px/rem/pt) */
+  xlarge: 12;
+  /** 2xlarge: 16(px/rem/pt) */
+  '2xlarge': 16;
   /** max: 9999(px/rem/pt). This will round the left and right side of the box element */
   max: 9999;
   /** round: 50%(pt). This will turn the box element into a circle */
@@ -34,9 +40,12 @@ export type Border = Readonly<{
 export const border: Border = {
   radius: {
     none: 0,
+    xsmall: 1,
     small: 2,
     medium: 4,
     large: 8,
+    xlarge: 12,
+    '2xlarge': 16,
     max: 9999,
     round: '50%', // this needs to be in % but need to figure out how will we store unitless things
   },
diff --git a/packages/blade/src/tokens/global/colors.ts b/packages/blade/src/tokens/global/colors.ts
index dbc2815f624..693f929eee0 100644
--- a/packages/blade/src/tokens/global/colors.ts
+++ b/packages/blade/src/tokens/global/colors.ts
@@ -11,14 +11,14 @@ export type ColorChromaticScale = Readonly<{
   700: string;
   800: string;
   900: string;
-  950: string;
-  a00: string;
+  1000: string;
   a50: string;
   a100: string;
+  a150: string;
   a200: string;
 }>;
 
-export type ColorNeutralScale = Readonly<{
+export type ColorNeutralGrayScale = Readonly<{
   0: string;
   50: string;
   100: string;
@@ -34,14 +34,23 @@ export type ColorNeutralScale = Readonly<{
   1100: string;
   1200: string;
   1300: string;
-  a00: string;
   a50: string;
+  a75: string;
   a100: string;
   a200: string;
-  a300: string;
   a400: string;
-  a500: string;
-  a1100: string;
+}>;
+
+export type ColorNeutralStaticScale = Readonly<{
+  10: string;
+  25: string;
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  450: string;
+  500: string;
 }>;
 
 export type Color = Readonly<{
@@ -50,292 +59,270 @@ export type Color = Readonly<{
     emerald: ColorChromaticScale;
     crimson: ColorChromaticScale;
     cider: ColorChromaticScale;
-    orchid: ColorChromaticScale;
-    magenta: ColorChromaticScale;
     sapphire: ColorChromaticScale;
+    sea: ColorChromaticScale;
+    cloud: ColorChromaticScale;
+    forest: ColorChromaticScale;
   };
   neutral: {
-    blueGrayLight: ColorNeutralScale;
-    blueGrayDark: ColorNeutralScale;
-    navyGrayLight: ColorNeutralScale;
-    navyGrayDark: ColorNeutralScale;
-    ashGrayLight: ColorNeutralScale;
-    ashGrayDark: ColorNeutralScale;
+    blueGrayLight: ColorNeutralGrayScale;
+    blueGrayDark: ColorNeutralGrayScale;
+    ashGrayLight: ColorNeutralGrayScale;
+    ashGrayDark: ColorNeutralGrayScale;
+    white: ColorNeutralStaticScale;
+    black: ColorNeutralStaticScale;
   };
 }>;
 
 export const colors: Color = {
   chromatic: {
     azure: {
-      50: `hsla(222, 100%, 96%, ${opacity[9]})`,
-      100: `hsla(218, 93%, 88%, ${opacity[9]})`,
-      200: `hsla(216, 92%, 81%, ${opacity[9]})`,
-      300: `hsla(215, 91%, 74%, ${opacity[9]})`,
-      400: `hsla(213, 91%, 66%, ${opacity[9]})`,
-      500: `hsla(213, 89%, 56%, ${opacity[9]})`,
-      600: `hsla(218, 89%, 51%, ${opacity[9]})`,
-      700: `hsla(223, 95%, 48%, ${opacity[9]})`,
-      800: `hsla(227, 100%, 45%, ${opacity[9]})`,
-      900: `hsla(230, 100%, 42%, ${opacity[9]})`,
-      950: `hsla(234, 100%, 34%, ${opacity[9]})`,
-      a00: `hsla(218, 89%, 51%, ${opacity[0]})`,
-      a50: `hsla(218, 89%, 51%, ${opacity[1]})`,
-      a100: `hsla(218, 89%, 51%, ${opacity[2]})`,
-      a200: `hsla(218, 89%, 51%, ${opacity[3]})`,
+      '50': `hsla(222, 100%, 98%, ${opacity[12]})`,
+      '100': `hsla(221, 90%, 92%, ${opacity[12]})`,
+      '200': `hsla(219, 95%, 85%, ${opacity[12]})`,
+      '300': `hsla(220, 100%, 73%, ${opacity[12]})`,
+      '400': `hsla(223, 100%, 65%, ${opacity[12]})`,
+      '500': `hsla(227, 100%, 59%, ${opacity[12]})`,
+      '600': `hsla(227, 71%, 51%, ${opacity[12]})`,
+      '700': `hsla(227, 69%, 42%, ${opacity[12]})`,
+      '800': `hsla(227, 69%, 34%, ${opacity[12]})`,
+      '900': `hsla(227, 69%, 25%, ${opacity[12]})`,
+      '1000': `hsla(227, 69%, 17%, ${opacity[12]})`,
+      a50: `hsla(227, 100%, 59%, ${opacity[1]})`,
+      a100: `hsla(227, 100%, 59%, ${opacity[3]})`,
+      a150: `hsla(227, 100%, 59%, ${opacity[4]})`,
+      a200: `hsla(227, 100%, 59%, ${opacity[5]})`,
     },
     emerald: {
-      50: `hsla(107, 100%, 96%, ${opacity[9]})`,
-      100: `hsla(113, 69%, 83%, ${opacity[9]})`,
-      200: `hsla(121, 65%, 71%, ${opacity[9]})`,
-      300: `hsla(130, 62%, 60%, ${opacity[9]})`,
-      400: `hsla(137, 60%, 50%, ${opacity[9]})`,
-      500: `hsla(149, 99%, 35%, ${opacity[9]})`,
-      600: `hsla(155, 100%, 31%, ${opacity[9]})`,
-      700: `hsla(160, 100%, 26%, ${opacity[9]})`,
-      800: `hsla(163, 100%, 22%, ${opacity[9]})`,
-      900: `hsla(164, 100%, 17%, ${opacity[9]})`,
-      950: `hsla(165, 100%, 13%, ${opacity[9]})`,
-      a00: `hsla(155, 100%, 31%, ${opacity[0]})`,
-      a50: `hsla(155, 100%, 31%, ${opacity[1]})`,
-      a100: `hsla(155, 100%, 31%, ${opacity[2]})`,
-      a200: `hsla(155, 100%, 31%, ${opacity[3]})`,
+      '50': `hsla(152, 60%, 95%, ${opacity[12]})`,
+      '100': `hsla(151, 57%, 91%, ${opacity[12]})`,
+      '200': `hsla(150, 59%, 82%, ${opacity[12]})`,
+      '300': `hsla(150, 59%, 73%, ${opacity[12]})`,
+      '400': `hsla(150, 59%, 55%, ${opacity[12]})`,
+      '500': `hsla(150, 100%, 37%, ${opacity[12]})`,
+      '600': `hsla(150, 100%, 32%, ${opacity[12]})`,
+      '700': `hsla(150, 100%, 27%, ${opacity[12]})`,
+      '800': `hsla(150, 100%, 21%, ${opacity[12]})`,
+      '900': `hsla(150, 100%, 16%, ${opacity[12]})`,
+      '1000': `hsla(150, 100%, 11%, ${opacity[12]})`,
+      a50: `hsla(150, 100%, 32%, ${opacity[1]})`,
+      a100: `hsla(150, 100%, 32%, ${opacity[3]})`,
+      a150: `hsla(150, 100%, 32%, ${opacity[4]})`,
+      a200: `hsla(150, 100%, 32%, ${opacity[5]})`,
     },
     crimson: {
-      50: `hsla(0, 100%, 97%, ${opacity[9]})`,
-      100: `hsla(0, 100%, 92%, ${opacity[9]})`,
-      200: `hsla(3, 100%, 86%, ${opacity[9]})`,
-      300: `hsla(5, 100%, 80%, ${opacity[9]})`,
-      400: `hsla(6, 100%, 75%, ${opacity[9]})`,
-      500: `hsla(8, 99%, 65%, ${opacity[9]})`,
-      600: `hsla(9, 91%, 56%, ${opacity[9]})`,
-      700: `hsla(8, 73%, 47%, ${opacity[9]})`,
-      800: `hsla(7, 72%, 40%, ${opacity[9]})`,
-      900: `hsla(5, 69%, 32%, ${opacity[9]})`,
-      950: `hsla(3, 66%, 24%, ${opacity[9]})`,
-      a00: `hsla(9, 91%, 56%, ${opacity[0]})`,
-      a50: `hsla(9, 91%, 56%, ${opacity[1]})`,
-      a100: `hsla(9, 91%, 56%, ${opacity[2]})`,
-      a200: `hsla(9, 91%, 56%, ${opacity[3]})`,
+      '50': `hsla(0, 100%, 98%, ${opacity[12]})`,
+      '100': `hsla(4, 93%, 94%, ${opacity[12]})`,
+      '200': `hsla(3, 97%, 88%, ${opacity[12]})`,
+      '300': `hsla(4, 96%, 79%, ${opacity[12]})`,
+      '400': `hsla(4, 93%, 68%, ${opacity[12]})`,
+      '500': `hsla(4, 86%, 58%, ${opacity[12]})`,
+      '600': `hsla(4, 74%, 49%, ${opacity[12]})`,
+      '700': `hsla(4, 77%, 40%, ${opacity[12]})`,
+      '800': `hsla(0, 83%, 33%, ${opacity[12]})`,
+      '900': `hsla(0, 84%, 29%, ${opacity[12]})`,
+      '1000': `hsla(0, 84%, 25%, ${opacity[12]})`,
+      a50: `hsla(4, 74%, 49%, ${opacity[1]})`,
+      a100: `hsla(4, 74%, 49%, ${opacity[3]})`,
+      a150: `hsla(4, 74%, 49%, ${opacity[4]})`,
+      a200: `hsla(4, 74%, 49%, ${opacity[5]})`,
     },
     cider: {
-      50: `hsla(32, 100%, 94%, ${opacity[9]})`,
-      100: `hsla(32, 97%, 86%, ${opacity[9]})`,
-      200: `hsla(33, 94%, 79%, ${opacity[9]})`,
-      300: `hsla(33, 94%, 72%, ${opacity[9]})`,
-      400: `hsla(34, 93%, 65%, ${opacity[9]})`,
-      500: `hsla(35, 84%, 54%, ${opacity[9]})`,
-      600: `hsla(36, 100%, 44%, ${opacity[9]})`,
-      700: `hsla(38, 97%, 38%, ${opacity[9]})`,
-      800: `hsla(40, 90%, 32%, ${opacity[9]})`,
-      900: `hsla(41, 82%, 26%, ${opacity[9]})`,
-      950: `hsla(42, 74%, 20%, ${opacity[9]})`,
-      a00: `hsla(36, 100%, 44%, ${opacity[0]})`,
-      a50: `hsla(36, 100%, 44%, ${opacity[1]})`,
-      a100: `hsla(36, 100%, 44%, ${opacity[2]})`,
-      a200: `hsla(36, 100%, 44%, ${opacity[3]})`,
+      '50': `hsla(24, 100%, 96%, ${opacity[12]})`,
+      '100': `hsla(25, 100%, 90%, ${opacity[12]})`,
+      '200': `hsla(25, 100%, 80%, ${opacity[12]})`,
+      '300': `hsla(25, 100%, 72%, ${opacity[12]})`,
+      '400': `hsla(25, 100%, 63%, ${opacity[12]})`,
+      '500': `hsla(25, 100%, 55%, ${opacity[12]})`,
+      '600': `hsla(25, 90%, 48%, ${opacity[12]})`,
+      '700': `hsla(25, 85%, 42%, ${opacity[12]})`,
+      '800': `hsla(25, 82%, 35%, ${opacity[12]})`,
+      '900': `hsla(25, 80%, 28%, ${opacity[12]})`,
+      '1000': `hsla(25, 82%, 20%, ${opacity[12]})`,
+      a50: `hsla(25, 90%, 48%, ${opacity[1]})`,
+      a100: `hsla(25, 90%, 48%, ${opacity[3]})`,
+      a150: `hsla(25, 90%, 48%, ${opacity[4]})`,
+      a200: `hsla(25, 90%, 48%, ${opacity[5]})`,
     },
-    orchid: {
-      50: `hsla(258, 100%, 96%, ${opacity[9]})`,
-      100: `hsla(263, 100%, 92%, ${opacity[9]})`,
-      200: `hsla(264, 100%, 87%, ${opacity[9]})`,
-      300: `hsla(267, 100%, 83%, ${opacity[9]})`,
-      400: `hsla(268, 100%, 79%, ${opacity[9]})`,
-      500: `hsla(269, 100%, 69%, ${opacity[9]})`,
-      600: `hsla(271, 96%, 61%, ${opacity[9]})`,
-      700: `hsla(276, 79%, 47%, ${opacity[9]})`,
-      800: `hsla(280, 95%, 36%, ${opacity[9]})`,
-      900: `hsla(283, 96%, 29%, ${opacity[9]})`,
-      950: `hsla(286, 96%, 22%, ${opacity[9]})`,
-      a00: `hsla(271, 96%, 61%, ${opacity[0]})`,
-      a50: `hsla(271, 96%, 61%, ${opacity[1]})`,
-      a100: `hsla(271, 96%, 61%, ${opacity[2]})`,
-      a200: `hsla(271, 96%, 61%, ${opacity[3]})`,
+    sapphire: {
+      '50': `hsla(201, 92%, 95%, ${opacity[12]})`,
+      '100': `hsla(200, 88%, 90%, ${opacity[12]})`,
+      '200': `hsla(200, 89%, 82%, ${opacity[12]})`,
+      '300': `hsla(200, 90%, 72%, ${opacity[12]})`,
+      '400': `hsla(200, 90%, 65%, ${opacity[12]})`,
+      '500': `hsla(198, 90%, 52%, ${opacity[12]})`,
+      '600': `hsla(200, 84%, 44%, ${opacity[12]})`,
+      '700': `hsla(200, 84%, 37%, ${opacity[12]})`,
+      '800': `hsla(200, 84%, 29%, ${opacity[12]})`,
+      '900': `hsla(200, 84%, 22%, ${opacity[12]})`,
+      '1000': `hsla(199, 84%, 15%, ${opacity[12]})`,
+      a50: `hsla(200, 84%, 44%, ${opacity[1]})`,
+      a100: `hsla(200, 84%, 44%, ${opacity[3]})`,
+      a150: `hsla(200, 84%, 44%, ${opacity[4]})`,
+      a200: `hsla(200, 84%, 44%, ${opacity[5]})`,
     },
-    magenta: {
-      50: `hsla(309, 100%, 96%, ${opacity[9]})`,
-      100: `hsla(307, 100%, 91%, ${opacity[9]})`,
-      200: `hsla(303, 100%, 85%, ${opacity[9]})`,
-      300: `hsla(301, 100%, 80%, ${opacity[9]})`,
-      400: `hsla(300, 100%, 75%, ${opacity[9]})`,
-      500: `hsla(303, 100%, 65%, ${opacity[9]})`,
-      600: `hsla(308, 75%, 51%, ${opacity[9]})`,
-      700: `hsla(313, 88%, 40%, ${opacity[9]})`,
-      800: `hsla(317, 100%, 32%, ${opacity[9]})`,
-      900: `hsla(321, 100%, 26%, ${opacity[9]})`,
-      950: `hsla(324, 100%, 20%, ${opacity[9]})`,
-      a00: `hsla(308, 75%, 51%, ${opacity[0]})`,
-      a50: `hsla(308, 75%, 51%, ${opacity[1]})`,
-      a100: `hsla(308, 75%, 51%, ${opacity[2]})`,
-      a200: `hsla(308, 75%, 51%, ${opacity[3]})`,
+    sea: {
+      '50': `hsla(180, 39%, 95%, ${opacity[12]})`,
+      '100': `hsla(180, 42%, 92%, ${opacity[12]})`,
+      '200': `hsla(180, 33%, 82%, ${opacity[12]})`,
+      '300': `hsla(180, 35%, 70%, ${opacity[12]})`,
+      '400': `hsla(180, 30%, 52%, ${opacity[12]})`,
+      '500': `hsla(180, 45%, 40%, ${opacity[12]})`,
+      '600': `hsla(180, 60%, 30%, ${opacity[12]})`,
+      '700': `hsla(180, 55%, 25%, ${opacity[12]})`,
+      '800': `hsla(180, 61%, 20%, ${opacity[12]})`,
+      '900': `hsla(180, 91%, 13%, ${opacity[12]})`,
+      '1000': `hsla(180, 91%, 8%, ${opacity[12]})`,
+      a50: `hsla(180, 60%, 30%, ${opacity[1]})`,
+      a100: `hsla(180, 60%, 30%, ${opacity[3]})`,
+      a150: `hsla(180, 60%, 30%, ${opacity[4]})`,
+      a200: `hsla(180, 60%, 30%, ${opacity[5]})`,
     },
-    sapphire: {
-      50: `hsla(180, 100%, 97%, ${opacity[9]})`,
-      100: `hsla(181, 75%, 85%, ${opacity[9]})`,
-      200: `hsla(184, 72%, 73%, ${opacity[9]})`,
-      300: `hsla(185, 70%, 62%, ${opacity[9]})`,
-      400: `hsla(187, 68%, 52%, ${opacity[9]})`,
-      500: `hsla(190, 100%, 39%, ${opacity[9]})`,
-      600: `hsla(193, 100%, 35%, ${opacity[9]})`,
-      700: `hsla(195, 100%, 31%, ${opacity[9]})`,
-      800: `hsla(196, 100%, 27%, ${opacity[9]})`,
-      900: `hsla(197, 100%, 23%, ${opacity[9]})`,
-      950: `hsla(198, 100%, 20%, ${opacity[9]})`,
-      a00: `hsla(193, 100%, 35%, ${opacity[0]})`,
-      a50: `hsla(193, 100%, 35%, ${opacity[1]})`,
-      a100: `hsla(193, 100%, 35%, ${opacity[2]})`,
-      a200: `hsla(193, 100%, 35%, ${opacity[3]})`,
+    cloud: {
+      '50': `hsla(198, 39%, 95%, ${opacity[12]})`,
+      '100': `hsla(201, 39%, 93%, ${opacity[12]})`,
+      '200': `hsla(200, 35%, 85%, ${opacity[12]})`,
+      '300': `hsla(200, 35%, 70%, ${opacity[12]})`,
+      '400': `hsla(200, 30%, 52%, ${opacity[12]})`,
+      '500': `hsla(200, 45%, 40%, ${opacity[12]})`,
+      '600': `hsla(200, 60%, 30%, ${opacity[12]})`,
+      '700': `hsla(201, 55%, 25%, ${opacity[12]})`,
+      '800': `hsla(200, 61%, 20%, ${opacity[12]})`,
+      '900': `hsla(200, 91%, 13%, ${opacity[12]})`,
+      '1000': `hsla(200, 91%, 8%, ${opacity[12]})`,
+      a50: `hsla(200, 60%, 30%, ${opacity[1]})`,
+      a100: `hsla(200, 60%, 30%, ${opacity[3]})`,
+      a150: `hsla(200, 60%, 30%, ${opacity[4]})`,
+      a200: `hsla(200, 60%, 30%, ${opacity[5]})`,
+    },
+    forest: {
+      '50': `hsla(152, 60%, 95%, ${opacity[12]})`,
+      '100': `hsla(151, 57%, 91%, ${opacity[12]})`,
+      '200': `hsla(150, 59%, 82%, ${opacity[12]})`,
+      '300': `hsla(150, 59%, 73%, ${opacity[12]})`,
+      '400': `hsla(150, 59%, 55%, ${opacity[12]})`,
+      '500': `hsla(155, 100%, 37%, ${opacity[12]})`,
+      '600': `hsla(155, 100%, 31%, ${opacity[12]})`,
+      '700': `hsla(155, 100%, 27%, ${opacity[12]})`,
+      '800': `hsla(155, 100%, 21%, ${opacity[12]})`,
+      '900': `hsla(155, 100%, 16%, ${opacity[12]})`,
+      '1000': `hsla(155, 100%, 11%, ${opacity[12]})`,
+      a50: `hsla(155, 100%, 31%, ${opacity[1]})`,
+      a100: `hsla(155, 100%, 31%, ${opacity[3]})`,
+      a150: `hsla(155, 100%, 31%, ${opacity[4]})`,
+      a200: `hsla(155, 100%, 31%, ${opacity[5]})`,
     },
   },
   neutral: {
     blueGrayLight: {
-      0: `hsla(0, 0%, 100%, ${opacity[9]})`,
-      50: `hsla(220, 27%, 98%, ${opacity[9]})`,
-      100: `hsla(220, 30%, 96%, ${opacity[9]})`,
-      200: `hsla(214, 21%, 94%, ${opacity[9]})`,
-      300: `hsla(216, 19%, 89%, ${opacity[9]})`,
-      400: `hsla(218, 19%, 81%, ${opacity[9]})`,
-      500: `hsla(214, 18%, 69%, ${opacity[9]})`,
-      600: `hsla(216, 16%, 60%, ${opacity[9]})`,
-      700: `hsla(216, 15%, 54%, ${opacity[9]})`,
-      800: `hsla(217, 18%, 45%, ${opacity[9]})`,
-      900: `hsla(216, 27%, 36%, ${opacity[9]})`,
-      1000: `hsla(216, 33%, 29%, ${opacity[9]})`,
-      1100: `hsla(216, 44%, 23%, ${opacity[9]})`,
-      1200: `hsla(217, 56%, 17%, ${opacity[9]})`,
-      1300: `hsla(215, 70%, 13%, ${opacity[9]})`,
-      a00: `hsla(216, 44%, 23%, ${opacity[0]})`,
-      a50: `hsla(216, 15%, 54%, ${opacity[1]})`,
-      a100: `hsla(216, 15%, 54%, ${opacity[2]})`,
-      a200: `hsla(216, 15%, 54%, ${opacity[3]})`,
-      a300: `hsla(214, 21%, 94%, ${opacity[1]})`,
-      a400: `hsla(214, 21%, 94%, ${opacity[2]})`,
-      a500: `hsla(214, 21%, 94%, ${opacity[3]})`,
-      a1100: `hsla(214, 18%, 69%, ${opacity[6]})`,
+      '0': `hsla(0, 0%, 100%, ${opacity[12]})`,
+      '50': `hsla(210, 40%, 98%, ${opacity[12]})`,
+      '100': `hsla(213, 47%, 96%, ${opacity[12]})`,
+      '200': `hsla(214, 40%, 92%, ${opacity[12]})`,
+      '300': `hsla(214, 28%, 84%, ${opacity[12]})`,
+      '400': `hsla(211, 27%, 76%, ${opacity[12]})`,
+      '500': `hsla(211, 24%, 65%, ${opacity[12]})`,
+      '600': `hsla(211, 22%, 56%, ${opacity[12]})`,
+      '700': `hsla(211, 20%, 52%, ${opacity[12]})`,
+      '800': `hsla(211, 23%, 45%, ${opacity[12]})`,
+      '900': `hsla(211, 26%, 34%, ${opacity[12]})`,
+      '1000': `hsla(211, 29%, 26%, ${opacity[12]})`,
+      '1100': `hsla(211, 33%, 21%, ${opacity[12]})`,
+      '1200': `hsla(212, 39%, 16%, ${opacity[12]})`,
+      '1300': `hsla(211, 53%, 10%, ${opacity[12]})`,
+      a50: `hsla(211, 20%, 52%, ${opacity[1]})`,
+      a75: `hsla(211, 20%, 52%, ${opacity[2]})`,
+      a100: `hsla(211, 20%, 52%, ${opacity[3]})`,
+      a200: `hsla(211, 20%, 52%, ${opacity[5]})`,
+      a400: `hsla(211, 20%, 52%, ${opacity[8]})`,
     },
     blueGrayDark: {
-      0: `hsla(0, 0%, 99%, ${opacity[9]})`,
-      50: `hsla(215, 12%, 92%, ${opacity[9]})`,
-      100: `hsla(218, 11%, 84%, ${opacity[9]})`,
-      200: `hsla(218, 11%, 76%, ${opacity[9]})`,
-      300: `hsla(219, 10%, 60%, ${opacity[9]})`,
-      400: `hsla(219, 12%, 45%, ${opacity[9]})`,
-      500: `hsla(220, 16%, 37%, ${opacity[9]})`,
-      600: `hsla(220, 23%, 29%, ${opacity[9]})`,
-      700: `hsla(220, 35%, 22%, ${opacity[9]})`,
-      800: `hsla(219, 41%, 19%, ${opacity[9]})`,
-      900: `hsla(218, 49%, 17%, ${opacity[9]})`,
-      1000: `hsla(218, 52%, 16%, ${opacity[9]})`,
-      1100: `hsla(218, 54%, 15%, ${opacity[9]})`,
-      1200: `hsla(218, 59%, 13%, ${opacity[9]})`,
-      1300: `hsla(218, 67%, 10%, ${opacity[9]})`,
-      a00: `hsla(220, 11%, 84%, ${opacity[0]})`,
-      a50: `hsla(220, 11%, 84%, ${opacity[1]})`,
-      a100: `hsla(220, 11%, 84%, ${opacity[2]})`,
-      a200: `hsla(220, 11%, 84%, ${opacity[3]})`,
-      a300: `hsla(217, 11%, 76%, ${opacity[1]})`,
-      a400: `hsla(217, 11%, 76%, ${opacity[2]})`,
-      a500: `hsla(217, 11%, 76%, ${opacity[3]})`,
-      a1100: `hsla(221, 16%, 37%, ${opacity[6]})`,
-    },
-    navyGrayLight: {
-      0: `hsla(0, 0%, 100%, ${opacity[9]})`,
-      50: `hsla(230, 27%, 98%, ${opacity[9]})`,
-      100: `hsla(230, 30%, 96%, ${opacity[9]})`,
-      200: `hsla(224, 21%, 94%, ${opacity[9]})`,
-      300: `hsla(226, 19%, 89%, ${opacity[9]})`,
-      400: `hsla(228, 19%, 81%, ${opacity[9]})`,
-      500: `hsla(225, 18%, 69%, ${opacity[9]})`,
-      600: `hsla(226, 16%, 60%, ${opacity[9]})`,
-      700: `hsla(226, 15%, 54%, ${opacity[9]})`,
-      800: `hsla(227, 18%, 45%, ${opacity[9]})`,
-      900: `hsla(226, 27%, 36%, ${opacity[9]})`,
-      1000: `hsla(226, 33%, 29%, ${opacity[9]})`,
-      1100: `hsla(226, 44%, 23%, ${opacity[9]})`,
-      1200: `hsla(228, 56%, 17%, ${opacity[9]})`,
-      1300: `hsla(226, 70%, 13%, ${opacity[9]})`,
-      a00: `hsla(226, 44%, 23%, ${opacity[0]})`,
-      a50: `hsla(226, 15%, 54%, ${opacity[1]})`,
-      a100: `hsla(226, 15%, 54%, ${opacity[2]})`,
-      a200: `hsla(226, 15%, 54%, ${opacity[3]})`,
-      a300: `hsla(223, 21%, 94%, ${opacity[1]})`,
-      a400: `hsla(223, 21%, 94%, ${opacity[2]})`,
-      a500: `hsla(223, 21%, 94%, ${opacity[3]})`,
-      a1100: `hsla(225, 18%, 69%, ${opacity[6]})`,
-    },
-    navyGrayDark: {
-      0: `hsla(0, 0%, 99%, ${opacity[9]})`,
-      50: `hsla(228, 12%, 92%, ${opacity[9]})`,
-      100: `hsla(233, 11%, 84%, ${opacity[9]})`,
-      200: `hsla(231, 11%, 76%, ${opacity[9]})`,
-      300: `hsla(229, 10%, 60%, ${opacity[9]})`,
-      400: `hsla(229, 12%, 45%, ${opacity[9]})`,
-      500: `hsla(230, 16%, 37%, ${opacity[9]})`,
-      600: `hsla(230, 23%, 29%, ${opacity[9]})`,
-      700: `hsla(231, 35%, 22%, ${opacity[9]})`,
-      800: `hsla(231, 41%, 19%, ${opacity[9]})`,
-      900: `hsla(230, 49%, 17%, ${opacity[9]})`,
-      1000: `hsla(230, 52%, 16%, ${opacity[9]})`,
-      1100: `hsla(231, 54%, 15%, ${opacity[9]})`,
-      1200: `hsla(231, 59%, 13%, ${opacity[9]})`,
-      1300: `hsla(231, 67%, 10%, ${opacity[9]})`,
-      a00: `hsla(233, 11%, 84%, ${opacity[0]})`,
-      a50: `hsla(233, 11%, 84%, ${opacity[1]})`,
-      a100: `hsla(233, 11%, 84%, ${opacity[2]})`,
-      a200: `hsla(233, 11%, 84%, ${opacity[3]})`,
-      a300: `hsla(231, 11%, 76%, ${opacity[1]})`,
-      a400: `hsla(231, 11%, 76%, ${opacity[2]})`,
-      a500: `hsla(231, 11%, 76%, ${opacity[3]})`,
-      a1100: `hsla(230, 16%, 37%, ${opacity[6]})`,
+      '0': `hsla(240, 20%, 99%, ${opacity[12]})`,
+      '50': `hsla(210, 40%, 98%, ${opacity[12]})`,
+      '100': `hsla(213, 47%, 96%, ${opacity[12]})`,
+      '200': `hsla(214, 40%, 92%, ${opacity[12]})`,
+      '300': `hsla(214, 28%, 84%, ${opacity[12]})`,
+      '400': `hsla(211, 27%, 76%, ${opacity[12]})`,
+      '500': `hsla(211, 24%, 65%, ${opacity[12]})`,
+      '600': `hsla(211, 22%, 56%, ${opacity[12]})`,
+      '700': `hsla(211, 20%, 52%, ${opacity[12]})`,
+      '800': `hsla(211, 23%, 45%, ${opacity[12]})`,
+      '900': `hsla(211, 26%, 34%, ${opacity[12]})`,
+      '1000': `hsla(211, 29%, 26%, ${opacity[12]})`,
+      '1100': `hsla(211, 33%, 21%, ${opacity[12]})`,
+      '1200': `hsla(212, 39%, 16%, ${opacity[12]})`,
+      '1300': `hsla(211, 53%, 10%, ${opacity[12]})`,
+      a50: `hsla(214, 40%, 92%, ${opacity[1]})`,
+      a75: `hsla(214, 40%, 92%, ${opacity[2]})`,
+      a100: `hsla(214, 40%, 92%, ${opacity[3]})`,
+      a200: `hsla(214, 40%, 92%, ${opacity[5]})`,
+      a400: `hsla(214, 40%, 92%, ${opacity[8]})`,
     },
     ashGrayLight: {
-      0: `hsla(0, 0%, 100%, ${opacity[9]})`,
-      50: `hsla(216, 9%, 98%, ${opacity[9]})`,
-      100: `hsla(216, 9%, 96%, ${opacity[9]})`,
-      200: `hsla(216, 6%, 94%, ${opacity[9]})`,
-      300: `hsla(216, 4%, 89%, ${opacity[9]})`,
-      400: `hsla(214, 7%, 81%, ${opacity[9]})`,
-      500: `hsla(216, 6%, 69%, ${opacity[9]})`,
-      600: `hsla(215, 6%, 60%, ${opacity[9]})`,
-      700: `hsla(214, 6%, 55%, ${opacity[9]})`,
-      800: `hsla(216, 7%, 45%, ${opacity[9]})`,
-      900: `hsla(218, 9%, 36%, ${opacity[9]})`,
-      1000: `hsla(219, 12%, 28%, ${opacity[9]})`,
-      1100: `hsla(214, 15%, 18%, ${opacity[9]})`,
-      1200: `hsla(216, 15%, 13%, ${opacity[9]})`,
-      1300: `hsla(214, 24%, 6%, ${opacity[9]})`,
-      a00: `hsla(214, 15%, 18%, ${opacity[0]})`,
-      a50: `hsla(214, 15%, 18%, ${opacity[1]})`,
-      a100: `hsla(214, 15%, 18%, ${opacity[2]})`,
-      a200: `hsla(214, 15%, 18%, ${opacity[3]})`,
-      a300: `hsla(210, 6%, 94%, ${opacity[1]})`,
-      a400: `hsla(210, 6%, 94%, ${opacity[2]})`,
-      a500: `hsla(210, 6%, 94%, ${opacity[3]})`,
-      a1100: `hsla(214, 15%, 18%, ${opacity[6]})`,
+      '0': `hsla(0, 0%, 100%, ${opacity[12]})`,
+      '50': `hsla(240, 9%, 98%, ${opacity[12]})`,
+      '100': `hsla(210, 9%, 96%, ${opacity[12]})`,
+      '200': `hsla(210, 6%, 94%, ${opacity[12]})`,
+      '300': `hsla(210, 4%, 89%, ${opacity[12]})`,
+      '400': `hsla(214, 7%, 81%, ${opacity[12]})`,
+      '500': `hsla(216, 6%, 69%, ${opacity[12]})`,
+      '600': `hsla(215, 6%, 60%, ${opacity[12]})`,
+      '700': `hsla(214, 6%, 55%, ${opacity[12]})`,
+      '800': `hsla(216, 7%, 45%, ${opacity[12]})`,
+      '900': `hsla(218, 9%, 36%, ${opacity[12]})`,
+      '1000': `hsla(219, 12%, 28%, ${opacity[12]})`,
+      '1100': `hsla(214, 15%, 18%, ${opacity[12]})`,
+      '1200': `hsla(216, 15%, 13%, ${opacity[12]})`,
+      '1300': `hsla(214, 24%, 6%, ${opacity[12]})`,
+      a50: `hsla(214, 6%, 55%, ${opacity[1]})`,
+      a75: `hsla(214, 6%, 55%, ${opacity[1]})`,
+      a100: `hsla(214, 6%, 55%, ${opacity[3]})`,
+      a200: `hsla(214, 6%, 55%, ${opacity[5]})`,
+      a400: `hsla(214, 6%, 55%, ${opacity[5]})`,
     },
     ashGrayDark: {
-      0: `hsla(0, 0%, 99%, ${opacity[9]})`,
-      50: `hsla(240, 2%, 92%, ${opacity[9]})`,
-      100: `hsla(240, 1%, 84%, ${opacity[9]})`,
-      200: `hsla(228, 4%, 76%, ${opacity[9]})`,
-      300: `hsla(227, 4%, 60%, ${opacity[9]})`,
-      400: `hsla(229, 4%, 50%, ${opacity[9]})`,
-      500: `hsla(232, 4%, 40%, ${opacity[9]})`,
-      600: `hsla(232, 5%, 32%, ${opacity[9]})`,
-      700: `hsla(230, 5%, 22%, ${opacity[9]})`,
-      800: `hsla(230, 6%, 19%, ${opacity[9]})`,
-      900: `hsla(230, 7%, 17%, ${opacity[9]})`,
-      1000: `hsla(230, 8%, 15%, ${opacity[9]})`,
-      1100: `hsla(231, 11%, 12%, ${opacity[9]})`,
-      1200: `hsla(231, 17%, 8%, ${opacity[9]})`,
-      1300: `hsla(228, 5%, 4%, ${opacity[9]})`,
-      a00: `hsla(240, 1%, 84%, ${opacity[0]})`,
-      a50: `hsla(240, 1%, 84%, ${opacity[1]})`,
-      a100: `hsla(240, 1%, 84%, ${opacity[2]})`,
-      a200: `hsla(240, 1%, 84%, ${opacity[3]})`,
-      a300: `hsla(228, 4%, 76%, ${opacity[1]})`,
-      a400: `hsla(228, 4%, 76%, ${opacity[2]})`,
-      a500: `hsla(228, 4%, 76%, ${opacity[3]})`,
-      a1100: `hsla(231, 11%, 12%, ${opacity[7]})`,
+      '0': `hsla(0, 0%, 99%, ${opacity[12]})`,
+      '50': `hsla(240, 2%, 92%, ${opacity[12]})`,
+      '100': `hsla(240, 1%, 84%, ${opacity[12]})`,
+      '200': `hsla(228, 4%, 76%, ${opacity[12]})`,
+      '300': `hsla(227, 4%, 60%, ${opacity[12]})`,
+      '400': `hsla(229, 4%, 50%, ${opacity[12]})`,
+      '500': `hsla(233, 4%, 40%, ${opacity[12]})`,
+      '600': `hsla(233, 5%, 32%, ${opacity[12]})`,
+      '700': `hsla(230, 6%, 22%, ${opacity[12]})`,
+      '800': `hsla(230, 6%, 19%, ${opacity[12]})`,
+      '900': `hsla(230, 7%, 17%, ${opacity[12]})`,
+      '1000': `hsla(230, 8%, 15%, ${opacity[12]})`,
+      '1100': `hsla(231, 12%, 12%, ${opacity[12]})`,
+      '1200': `hsla(231, 17%, 8%, ${opacity[12]})`,
+      '1300': `hsla(240, 5%, 4%, ${opacity[12]})`,
+      a50: `hsla(228, 4%, 76%, ${opacity[1]})`,
+      a75: `hsla(228, 4%, 76%, ${opacity[1]})`,
+      a100: `hsla(228, 4%, 76%, ${opacity[3]})`,
+      a200: `hsla(228, 4%, 76%, ${opacity[5]})`,
+      a400: `hsla(228, 4%, 76%, ${opacity[5]})`,
+    },
+    white: {
+      '10': `hsla(0, 0%, 100%, ${opacity[1]})`,
+      '25': `hsla(0, 0%, 100%, ${opacity[2]})`,
+      '50': `hsla(0, 0%, 100%, ${opacity[3]})`,
+      '100': `hsla(0, 0%, 100%, ${opacity[5]})`,
+      '200': `hsla(0, 0%, 100%, ${opacity[6]})`,
+      '300': `hsla(0, 0%, 100%, ${opacity[8]})`,
+      '400': `hsla(0, 0%, 100%, ${opacity[10]})`,
+      '450': `hsla(0, 0%, 100%, ${opacity[11]})`,
+      '500': `hsla(0, 0%, 100%, ${opacity[12]})`,
+    },
+    black: {
+      '10': `hsla(0, 0%, 0%, ${opacity[1]})`,
+      '25': `hsla(0, 0%, 0%, ${opacity[2]})`,
+      '50': `hsla(0, 0%, 0%, ${opacity[3]})`,
+      '100': `hsla(0, 0%, 0%, ${opacity[5]})`,
+      '200': `hsla(0, 0%, 0%, ${opacity[7]})`,
+      '300': `hsla(0, 0%, 0%, ${opacity[9]})`,
+      '400': `hsla(0, 0%, 0%, ${opacity[10]})`,
+      '450': `hsla(0, 0%, 0%, ${opacity[11]})`,
+      '500': `hsla(0, 0%, 0%, ${opacity[12]})`,
     },
   },
 };
diff --git a/packages/blade/src/tokens/global/elevation/elevation.native.ts b/packages/blade/src/tokens/global/elevation/elevation.native.ts
index 8a651f1af0d..afac64c825a 100644
--- a/packages/blade/src/tokens/global/elevation/elevation.native.ts
+++ b/packages/blade/src/tokens/global/elevation/elevation.native.ts
@@ -13,33 +13,33 @@ export const elevation: ElevationWithColorModes = {
       },
     },
     lowRaised: {
-      elevation: 4,
-      shadowColor: 'hsla(217, 56%, 17%, 0.64)',
-      shadowOpacity: 0.12,
-      shadowRadius: 2,
+      elevation: 8,
+      shadowColor: `hsla(217, 56%, 17%, 0.4)`,
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
       shadowOffset: {
         width: 0,
-        height: 3,
+        height: 2,
       },
     },
     midRaised: {
-      elevation: 12,
-      shadowColor: 'hsla(217, 56%, 17%, 0.64)',
-      shadowOpacity: 0.1,
-      shadowRadius: 4,
+      elevation: 16,
+      shadowColor: `hsla(217, 56%, 17%, 0.55)`,
+      shadowOpacity: 0.17,
+      shadowRadius: 6,
       shadowOffset: {
         width: 0,
-        height: 8,
+        height: 4,
       },
     },
     highRaised: {
-      elevation: 26,
-      shadowColor: 'hsla(217, 56%, 17%, 0.64)',
-      shadowOpacity: 0.2,
-      shadowRadius: 12,
+      elevation: 24,
+      shadowColor: `hsla(217, 56%, 17%, 0.8)`,
+      shadowOpacity: 0.16,
+      shadowRadius: 14,
       shadowOffset: {
         width: 0,
-        height: 18,
+        height: 6,
       },
     },
   },
@@ -55,33 +55,33 @@ export const elevation: ElevationWithColorModes = {
       },
     },
     lowRaised: {
-      elevation: 4,
-      shadowColor: 'hsla(231, 67%, 10%, 0.64)',
-      shadowOpacity: 0.12,
-      shadowRadius: 2,
+      elevation: 8,
+      shadowColor: `hsla(217, 56%, 17%, 0.4)`,
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
       shadowOffset: {
         width: 0,
-        height: 3,
+        height: 2,
       },
     },
     midRaised: {
-      elevation: 12,
-      shadowColor: 'hsla(231, 67%, 10%, 0.64)',
-      shadowOpacity: 0.1,
-      shadowRadius: 4,
+      elevation: 16,
+      shadowColor: `hsla(217, 56%, 17%, 0.55)`,
+      shadowOpacity: 0.17,
+      shadowRadius: 6,
       shadowOffset: {
         width: 0,
-        height: 8,
+        height: 4,
       },
     },
     highRaised: {
-      elevation: 26,
-      shadowColor: 'hsla(231, 67%, 10%, 0.64)',
-      shadowOpacity: 0.2,
-      shadowRadius: 12,
+      elevation: 24,
+      shadowColor: `hsla(217, 56%, 17%, 0.8)`,
+      shadowOpacity: 0.16,
+      shadowRadius: 14,
       shadowOffset: {
         width: 0,
-        height: 18,
+        height: 6,
       },
     },
   },
diff --git a/packages/blade/src/tokens/global/elevation/elevation.web.ts b/packages/blade/src/tokens/global/elevation/elevation.web.ts
index 89152560cd3..c6126fcf197 100644
--- a/packages/blade/src/tokens/global/elevation/elevation.web.ts
+++ b/packages/blade/src/tokens/global/elevation/elevation.web.ts
@@ -4,15 +4,15 @@ export const elevation: ElevationWithColorModes = {
   onLight: {
     none: 'none',
     /** offset-x | offset-y | blur-radius | spread-radius | color, offset-x | offset-y | blur-radius | spread-radius | color */
-    lowRaised: `0 4px 8px -2px hsla(217, 56%, 17%, 0.1), 0 2px 4px -2px hsla(217, 56%, 17%, 0.06)`,
-    midRaised: `0 12px 16px -4px hsla(217, 56%, 17%, 0.08), 0 4px 6px -2px hsla(217, 56%, 17%, 0.03)`,
-    highRaised: `0 24px 48px -12px hsla(217, 56%, 17%, 0.18)`,
+    lowRaised: `0px 2px 16px 0px hsla(217, 56%, 17%, 0.10)`,
+    midRaised: `0px 8px 24px 0px hsla(217, 56%, 17%, 0.12)`,
+    highRaised: `0px 16px 48px -4px hsla(217, 56%, 17%, 0.18)`,
   },
   onDark: {
     none: 'none',
     // @TODO: replace the values with correct dark mode values
-    lowRaised: `0 4px 8px -2px hsla(231, 67%, 10%, 0.10), 0 2px 4px -2px hsla(231, 67%, 10%, 0.06)`,
-    midRaised: `0 12px 16px -4px hsla(231, 67%, 10%, 0.08), 0 4px 6px -2px hsla(231, 67%, 10%, 0.03)`,
-    highRaised: `0 24px 48px -12px hsla(231, 67%, 10%, 0.18)`,
+    lowRaised: `0px 2px 16px 0px hsla(217, 56%, 17%, 0.10)`,
+    midRaised: `0px 8px 24px 0px hsla(217, 56%, 17%, 0.12)`,
+    highRaised: `0px 16px 48px -4px hsla(217, 56%, 17%, 0.18)`,
   },
 };
diff --git a/packages/blade/src/tokens/global/fontFamily/fontFamily.native.ts b/packages/blade/src/tokens/global/fontFamily/fontFamily.native.ts
index 55af438c247..45667002fd4 100644
--- a/packages/blade/src/tokens/global/fontFamily/fontFamily.native.ts
+++ b/packages/blade/src/tokens/global/fontFamily/fontFamily.native.ts
@@ -2,6 +2,7 @@ import { Platform } from 'react-native';
 import type { FontFamily } from './types';
 
 export const fontFamily: FontFamily = {
-  text: 'Lato',
-  code: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+  text: 'Inter',
+  heading: 'TASA Orbiter Display',
+  code: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
 };
diff --git a/packages/blade/src/tokens/global/fontFamily/fontFamily.web.ts b/packages/blade/src/tokens/global/fontFamily/fontFamily.web.ts
index 0ca3a40b679..cea589c27cb 100644
--- a/packages/blade/src/tokens/global/fontFamily/fontFamily.web.ts
+++ b/packages/blade/src/tokens/global/fontFamily/fontFamily.web.ts
@@ -2,6 +2,8 @@ import type { FontFamily } from './types';
 
 export const fontFamily: FontFamily = {
   text:
-    'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-  code: 'monospace',
+    '"Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif',
+  heading:
+    '"TASA Orbiter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif',
+  code: '"Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace',
 };
diff --git a/packages/blade/src/tokens/global/fontFamily/types.ts b/packages/blade/src/tokens/global/fontFamily/types.ts
index 67266a550e4..2e49ad8cf67 100644
--- a/packages/blade/src/tokens/global/fontFamily/types.ts
+++ b/packages/blade/src/tokens/global/fontFamily/types.ts
@@ -1,6 +1,8 @@
 export type FontFamily = {
-  /** Used for all type of textual content except code snippets */
+  /** Used for all type of textual content except code snippets, and headings */
   text: string;
   /** Used for code snippets  */
   code: string;
+  /** Used for headings */
+  heading: string;
 };
diff --git a/packages/blade/src/tokens/global/motion.ts b/packages/blade/src/tokens/global/motion.ts
index 7a643f11f50..9ec06b2174c 100644
--- a/packages/blade/src/tokens/global/motion.ts
+++ b/packages/blade/src/tokens/global/motion.ts
@@ -35,7 +35,7 @@ type Delay = {
 };
 
 export type EasingFactoryFn = { factory: () => (value: number) => number }; // similar to EasingFactoryFn of `react-native-reanimated`
-type EasingType<Value extends string> = Platform.Select<{
+export type EasingType<Value extends string> = Platform.Select<{
   web: Value;
   native: EasingFactoryFn;
 }>;
diff --git a/packages/blade/src/tokens/global/opacity.ts b/packages/blade/src/tokens/global/opacity.ts
index 9bf31e4634e..32c11eb82ca 100644
--- a/packages/blade/src/tokens/global/opacity.ts
+++ b/packages/blade/src/tokens/global/opacity.ts
@@ -3,33 +3,42 @@ export type Opacity = Readonly<{
   0: number;
   /**1: 0.09 */
   1: number;
-  /**2: 0.18 */
+  /**2: 0.12 */
   2: number;
-  /**3: 0.32 */
+  /**3: 0.18 */
   3: number;
-  /**4: 0.48 */
+  /**4: 0.24 */
   4: number;
-  /**5: 0.56 */
+  /**5: 0.32 */
   5: number;
-  /**6: 0.64 */
+  /**6: 0.48 */
   6: number;
-  /**7: 0.72 */
+  /**7: 0.56 */
   7: number;
-  /**8: 1.0 */
+  /**8: 0.64 */
   8: number;
-  /**9: 1.0 */
+  /**9: 0.72 */
   9: number;
+  /**10: 0.8 */
+  10: number;
+  /**11: 0.88 */
+  11: number;
+  /**12: 1.0 */
+  12: number;
 }>;
 
 export const opacity: Opacity = {
-  0: 0,
+  0: 0.0,
   1: 0.09,
-  2: 0.18,
-  3: 0.32,
-  4: 0.48,
-  5: 0.56,
-  6: 0.64,
-  7: 0.72,
-  8: 1.0,
-  9: 1.0,
+  2: 0.12,
+  3: 0.18,
+  4: 0.24,
+  5: 0.32,
+  6: 0.48,
+  7: 0.56,
+  8: 0.64,
+  9: 0.72,
+  10: 0.8,
+  11: 0.88,
+  12: 1.0,
 };
diff --git a/packages/blade/src/tokens/global/typography.ts b/packages/blade/src/tokens/global/typography.ts
index 07fbaf8627c..7874da4af63 100644
--- a/packages/blade/src/tokens/global/typography.ts
+++ b/packages/blade/src/tokens/global/typography.ts
@@ -3,6 +3,8 @@ import type { FontFamily } from './fontFamily/types';
 
 type FontWeight = {
   regular: 400;
+  medium: 500;
+  semibold: 600;
   bold: 700;
 };
 
@@ -14,11 +16,6 @@ type FontWeight = {
  */
 
 export type FontSize = {
-  /** desktop: 9(px/rem/pt)
-   *
-   * mobile: 9(px/rem/pt)
-   */
-  10: number;
   /** desktop: 10(px/rem/pt)
    *
    * mobile: 10(px/rem/pt)
@@ -54,60 +51,47 @@ export type FontSize = {
    * mobile: 18(px/rem/pt)
    */
   400: number;
-  /** desktop: 22(px/rem/pt)
+  /** desktop: 24(px/rem/pt)
    *
    * mobile: 20(px/rem/pt)
    */
   500: number;
-  /** desktop: 24(px/rem/pt)
+  /** desktop: 32(px/rem/pt)
    *
-   * mobile: 20(px/rem/pt)
+   * mobile: 24(px/rem/pt)
    */
   600: number;
-  /** desktop: 28(px/rem/pt)
+  /** desktop: 40(px/rem/pt)
    *
-   * mobile: 24(px/rem/pt)
+   * mobile: 32(px/rem/pt)
    */
   700: number;
-  /** desktop: 32(px/rem/pt)
+  /** desktop: 48(px/rem/pt)
    *
-   * mobile: 28(px/rem/pt)
+   * mobile: 34(px/rem/pt)
    */
   800: number;
-  /** desktop: 36(px/rem/pt)
+  /** desktop: 56(px/rem/pt)
    *
-   * mobile: 32(px/rem/pt)
+   * mobile: 36(px/rem/pt)
    */
   900: number;
-  /** desktop: 40(px/rem/pt)
+  /** desktop: 64(px/rem/pt)
    *
-   * mobile: 32(px/rem/pt)
+   * mobile: 38(px/rem/pt)
    */
   1000: number;
-  /** desktop: 48(px/rem/pt)
+  /** desktop: 72(px/rem/pt)
    *
    * mobile: 40(px/rem/pt)
    */
   1100: number;
-  /** desktop: 56(px/rem/pt)
-   *
-   * mobile: 48(px/rem/pt)
-   */
-  1200: number;
-  /** desktop: 64(px/rem/pt)
-   *
-   * mobile: 56(px/rem/pt)
-   */
-  1300: number;
-  /** desktop: 88(px/rem/pt)
-   *
-   * mobile: 64(px/rem/pt)
-   */
-  1600: number;
 };
 
 const fontWeight: FontWeight = {
   regular: 400,
+  medium: 500,
+  semibold: 600,
   bold: 700,
 };
 
@@ -145,61 +129,61 @@ export type Typography = {
     100: number;
     /** desktop: 24(px/rem/pt)
      *
-     * mobile: 20(px/rem/pt)
+     * mobile: 24(px/rem/pt)
      */
     200: number;
     /** desktop: 24(px/rem/pt)
      *
-     * mobile: 24(px/rem/pt)
+     * mobile: 22(px/rem/pt)
      */
     300: number;
-    /** desktop: 28(px/rem/pt)
+    /** desktop: 26(px/rem/pt)
      *
      * mobile: 24(px/rem/pt)
      */
     400: number;
     /** desktop: 32(px/rem/pt)
      *
-     * mobile: 28(px/rem/pt)
+     * mobile: 26(px/rem/pt)
      */
     500: number;
-    /** desktop: 40(px/rem/pt)
+    /** desktop: 38(px/rem/pt)
      *
      * mobile: 32(px/rem/pt)
      */
     600: number;
-    /** desktop: 40(px/rem/pt)
+    /** desktop: 46(px/rem/pt)
      *
-     * mobile: 40(px/rem/pt)
+     * mobile: 38(px/rem/pt)
      */
     700: number;
-    /** desktop: 48(px/rem/pt)
+    /** desktop: 56(px/rem/pt)
      *
      * mobile: 40(px/rem/pt)
      */
     800: number;
-    /** desktop: 56(px/rem/pt)
+    /** desktop: 64(px/rem/pt)
      *
-     * mobile: 48(px/rem/pt)
+     * mobile: 42(px/rem/pt)
      */
     900: number;
-    /** desktop: 64(px/rem/pt)
+    /** desktop: 70(px/rem/pt)
      *
-     * mobile: 56(px/rem/pt)
+     * mobile: 46(px/rem/pt)
      */
     1000: number;
-    /** desktop: 72(px/rem/pt)
+    /** desktop: 78(px/rem/pt)
      *
-     * mobile: 64(px/rem/pt)
+     * mobile: 48(px/rem/pt)
      */
     1100: number;
-    /** desktop: 104(px/rem/pt)
-     *
-     * mobile: 72(px/rem/pt)
-     */
-    1500: number;
   };
-  // letterSpacings: {};
+  letterSpacings: {
+    /** -1% */
+    50: number;
+    /** 0% */
+    100: number;
+  };
 };
 
 export type TypographyPlatforms = 'onDesktop' | 'onMobile';
@@ -213,7 +197,6 @@ export const typography: TypographyWithPlatforms = {
         ...fontFamily,
       },
       size: {
-        10: 9,
         25: 10,
         50: 11,
         75: 12,
@@ -221,16 +204,13 @@ export const typography: TypographyWithPlatforms = {
         200: 16,
         300: 18,
         400: 20,
-        500: 22,
-        600: 24,
-        700: 28,
-        800: 32,
-        900: 36,
-        1000: 40,
-        1100: 48,
-        1200: 56,
-        1300: 64,
-        1600: 88,
+        500: 24,
+        600: 32,
+        700: 40,
+        800: 48,
+        900: 56,
+        1000: 64,
+        1100: 72,
       },
       weight: {
         ...fontWeight,
@@ -244,17 +224,19 @@ export const typography: TypographyWithPlatforms = {
       100: 20,
       200: 24,
       300: 24,
-      400: 28,
+      400: 26,
       500: 32,
-      600: 40,
-      700: 40,
-      800: 48,
-      900: 56,
-      1000: 64,
-      1100: 72,
-      1500: 104,
+      600: 38,
+      700: 46,
+      800: 56,
+      900: 64,
+      1000: 70,
+      1100: 78,
+    },
+    letterSpacings: {
+      50: -1,
+      100: 0,
     },
-    // letterSpacings: {},
   },
   onMobile: {
     fonts: {
@@ -262,7 +244,6 @@ export const typography: TypographyWithPlatforms = {
         ...fontFamily,
       },
       size: {
-        10: 9,
         25: 10,
         50: 11,
         75: 12,
@@ -271,15 +252,12 @@ export const typography: TypographyWithPlatforms = {
         300: 16,
         400: 18,
         500: 20,
-        600: 20,
-        700: 24,
-        800: 28,
-        900: 32,
-        1000: 32,
+        600: 24,
+        700: 32,
+        800: 34,
+        900: 36,
+        1000: 38,
         1100: 40,
-        1200: 48,
-        1300: 56,
-        1600: 64,
       },
       weight: {
         ...fontWeight,
@@ -291,18 +269,20 @@ export const typography: TypographyWithPlatforms = {
       50: 16,
       75: 18,
       100: 20,
-      200: 20,
-      300: 24,
+      200: 24,
+      300: 22,
       400: 24,
-      500: 28,
+      500: 26,
       600: 32,
-      700: 40,
+      700: 38,
       800: 40,
-      900: 48,
-      1000: 56,
-      1100: 64,
-      1500: 72,
+      900: 42,
+      1000: 46,
+      1100: 48,
+    },
+    letterSpacings: {
+      50: -1,
+      100: 0,
     },
-    // letterSpacings: {},
   },
 };
diff --git a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap
index 0872cd10ebf..7cf5644b4d3 100644
--- a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap
+++ b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap
@@ -4,12 +4,15 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
 {
   "border": {
     "radius": {
+      "2xlarge": 16,
       "large": 8,
       "max": 9999,
       "medium": 4,
       "none": 0,
       "round": "50%",
       "small": 2,
+      "xlarge": 12,
+      "xsmall": 1,
     },
     "width": {
       "none": 0,
@@ -29,3099 +32,937 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
   },
   "colors": {
     "onDark": {
-      "action": {
+      "feedback": {
         "background": {
-          "primary": {
-            "active": "hsl(332, 100%, 20%)",
-            "default": "hsl(332, 81%, 32%)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsl(332, 100%, 23%)",
-            "hover": "hsl(332, 100%, 26%)",
-          },
-          "secondary": {
-            "active": "hsla(332, 100%, 26%, 0.32)",
-            "default": "hsla(332, 100%, 26%, 0)",
-            "disabled": "hsla(220, 11%, 84%, 0)",
-            "focus": "hsla(332, 100%, 26%, 0.18)",
-            "hover": "hsla(332, 100%, 26%, 0.09)",
-          },
-          "tertiary": {
-            "active": "hsla(216, 15%, 54%, 0.32)",
-            "default": "hsla(220, 11%, 84%, 0.09)",
-            "disabled": "hsla(220, 11%, 84%, 0.09)",
-            "focus": "hsla(220, 11%, 84%, 0.32)",
-            "hover": "hsla(220, 11%, 84%, 0.18)",
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.18)",
           },
-        },
-        "border": {
-          "primary": {
-            "active": "hsl(332, 100%, 20%)",
-            "default": "hsl(332, 81%, 32%)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsl(332, 100%, 23%)",
-            "hover": "hsl(332, 100%, 26%)",
-          },
-          "secondary": {
-            "active": "hsl(332, 69%, 37%)",
-            "default": "hsl(332, 69%, 37%)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsl(332, 69%, 37%)",
-            "hover": "hsl(332, 69%, 37%)",
-          },
-          "tertiary": {
-            "active": "hsla(219, 12%, 45%, 1)",
-            "default": "hsla(220, 11%, 84%, 0)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsla(219, 12%, 45%, 1)",
-            "hover": "hsla(219, 12%, 45%, 1)",
+          "negative": {
+            "intense": "hsla(4, 77%, 40%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.18)",
           },
-        },
-        "icon": {
-          "link": {
-            "active": "hsla(213, 89%, 56%, 1)",
-            "default": "hsla(215, 91%, 74%, 1)",
-            "disabled": "hsla(219, 12%, 45%, 1)",
-            "focus": "hsla(213, 89%, 56%, 1)",
-            "hover": "hsla(213, 91%, 66%, 1)",
-            "visited": "hsla(267, 100%, 83%, 1)",
+          "neutral": {
+            "intense": "hsla(214, 40%, 92%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "primary": {
-            "active": "hsl(0, 0%, 99%)",
-            "default": "hsl(0, 0%, 99%)",
-            "disabled": "hsla(219, 10%, 60%, 1)",
-            "focus": "hsl(0, 0%, 99%)",
-            "hover": "hsl(0, 0%, 99%)",
-          },
-          "secondary": {
-            "active": "hsla(0, 0%, 99%, 1)",
-            "default": "hsla(0, 0%, 99%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(0, 0%, 99%, 1)",
-            "hover": "hsla(0, 0%, 99%, 1)",
-          },
-          "tertiary": {
-            "active": "hsla(218, 11%, 84%, 1)",
-            "default": "hsla(218, 11%, 84%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(218, 11%, 84%, 1)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.18)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.18)",
           },
         },
-        "text": {
-          "link": {
-            "active": "hsla(213, 89%, 56%, 1)",
-            "default": "hsla(215, 91%, 74%, 1)",
-            "disabled": "hsla(219, 12%, 45%, 1)",
-            "focus": "hsla(213, 89%, 56%, 1)",
-            "hover": "hsla(213, 91%, 66%, 1)",
-            "visited": "hsla(267, 100%, 83%, 1)",
+        "border": {
+          "information": {
+            "intense": "hsla(200, 84%, 29%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.32)",
           },
-          "primary": {
-            "active": "hsl(0, 0%, 99%)",
-            "default": "hsl(0, 0%, 99%)",
-            "disabled": "hsla(219, 10%, 60%, 1)",
-            "focus": "hsl(0, 0%, 99%)",
-            "hover": "hsl(0, 0%, 99%)",
-          },
-          "secondary": {
-            "active": "hsla(0, 0%, 99%, 1)",
-            "default": "hsla(0, 0%, 99%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(0, 0%, 99%, 1)",
-            "hover": "hsla(0, 0%, 99%, 1)",
-          },
-          "tertiary": {
-            "active": "hsla(218, 11%, 84%, 1)",
-            "default": "hsla(218, 11%, 84%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(218, 11%, 84%, 1)",
-            "hover": "hsla(218, 11%, 84%, 1)",
+          "negative": {
+            "intense": "hsla(0, 83%, 33%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.32)",
           },
-        },
-      },
-      "badge": {
-        "background": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.18)",
+          "neutral": {
+            "intense": "hsla(214, 28%, 84%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-        },
-        "border": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.32)",
+          "notice": {
+            "intense": "hsla(25, 82%, 35%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.32)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 21%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.32)",
           },
         },
         "icon": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(213, 91%, 66%, 1)",
+          "information": {
+            "intense": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(201, 92%, 95%, 1)",
           },
-        },
-        "text": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(213, 91%, 66%, 1)",
+          "negative": {
+            "intense": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(0, 100%, 98%, 1)",
           },
-        },
-      },
-      "brand": {
-        "gray": {
-          "200": {
-            "highContrast": "hsla(220, 23%, 29%, 1)",
-            "lowContrast": "hsl(0, 0%, 99%)",
+          "neutral": {
+            "intense": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 1)",
           },
-          "300": {
-            "highContrast": "hsla(220, 16%, 37%, 1)",
-            "lowContrast": "hsla(220, 35%, 22%, 1)",
+          "notice": {
+            "intense": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(24, 100%, 96%, 1)",
           },
-          "400": {
-            "highContrast": "hsla(219, 12%, 45%, 1)",
-            "lowContrast": "hsla(220, 23%, 29%, 1)",
+          "positive": {
+            "intense": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(152, 60%, 95%, 1)",
           },
-          "500": {
-            "highContrast": "hsla(219, 10%, 60%, 1)",
-            "lowContrast": "hsla(220, 16%, 37%, 1)",
+        },
+        "text": {
+          "information": {
+            "intense": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(201, 92%, 95%, 1)",
           },
-          "600": {
-            "highContrast": "hsla(218, 11%, 76%, 1)",
-            "lowContrast": "hsla(219, 12%, 45%, 1)",
+          "negative": {
+            "intense": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(0, 100%, 98%, 1)",
           },
-          "700": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 76%, 1)",
+          "neutral": {
+            "intense": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 1)",
           },
-          "a100": {
-            "highContrast": "hsla(217, 11%, 76%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+          "notice": {
+            "intense": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(24, 100%, 96%, 1)",
           },
-          "a50": {
-            "highContrast": "hsla(217, 11%, 76%, 0.09)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.09)",
+          "positive": {
+            "intense": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(152, 60%, 95%, 1)",
           },
         },
-        "primary": {
-          "300": "hsla(332, 100%, 26%, 0.18)",
-          "400": "hsla(332, 100%, 26%, 0.32)",
-          "500": "hsl(332, 69%, 37%)",
-          "600": "hsl(332, 81%, 32%)",
-          "700": "hsl(332, 100%, 26%)",
-          "800": "hsl(332, 100%, 17%)",
-        },
-        "secondary": {
-          "500": "hsla(149, 99%, 35%, 1)",
-        },
       },
-      "feedback": {
+      "interactive": {
         "background": {
+          "gray": {
+            "default": "hsla(214, 40%, 92%, 0.09)",
+            "disabled": "hsla(214, 40%, 92%, 0.09)",
+            "faded": "hsla(214, 40%, 92%, 0.12)",
+            "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 0.18)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.18)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.24)",
+            "fadedHighlighted": "hsla(200, 84%, 44%, 0.32)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.18)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.24)",
+            "fadedHighlighted": "hsla(4, 74%, 49%, 0.32)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(220, 11%, 84%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+            "default": "hsla(210, 40%, 98%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.18)",
+            "faded": "hsla(214, 40%, 92%, 0.12)",
+            "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(40, 90%, 32%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.18)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.24)",
+            "fadedHighlighted": "hsla(25, 90%, 48%, 0.32)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.18)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.24)",
+            "fadedHighlighted": "hsla(150, 100%, 32%, 0.32)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(332, 100%, 26%)",
+            "disabled": "hsla(332, 100%, 26%, 0.12)",
+            "faded": "hsla(332, 100%, 26%, 0.12)",
+            "fadedHighlighted": "hsla(332, 100%, 26%, 0.09)",
+            "highlighted": "hsl(332, 100%, 23%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.56)",
+            "faded": "hsla(0, 0%, 0%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.18)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "border": {
+          "gray": {
+            "default": "hsla(211, 23%, 45%, 1)",
+            "disabled": "hsla(211, 29%, 26%, 1)",
+            "faded": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(211, 23%, 45%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.32)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.32)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.32)",
+            "default": "hsla(214, 40%, 92%, 1)",
+            "disabled": "hsla(211, 23%, 45%, 1)",
+            "faded": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(40, 90%, 32%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.32)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.32)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(332, 100%, 26%)",
+            "disabled": "hsla(332, 100%, 26%, 0.12)",
+            "faded": "hsla(332, 100%, 26%, 0.12)",
+            "highlighted": "hsl(332, 100%, 23%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "faded": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "icon": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(187, 68%, 52%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 84%, 37%, 1)",
+            "normal": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(198, 90%, 52%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(6, 100%, 75%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 77%, 40%, 1)",
+            "normal": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(34, 93%, 65%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 85%, 42%, 1)",
+            "normal": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(25, 100%, 55%, 1)",
           },
-          "positive": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(149, 99%, 35%, 1)",
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 100%)",
+            "muted": "hsl(0, 0%, 100%)",
+            "normal": "hsl(0, 0%, 100%)",
+            "subtle": "hsl(0, 0%, 100%)",
           },
-        },
-        "information": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(195, 100%, 31%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(187, 68%, 52%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(187, 68%, 52%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-            },
+          "positive": {
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 100%, 27%, 1)",
+            "normal": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(150, 100%, 37%, 1)",
           },
-        },
-        "negative": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(7, 72%, 40%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-            },
+          "primary": {
+            "disabled": "hsla(240, 20%, 99%, 1)",
+            "muted": "hsla(240, 20%, 99%, 1)",
+            "normal": "hsla(240, 20%, 99%, 1)",
+            "subtle": "hsla(240, 20%, 99%, 1)",
           },
-        },
-        "neutral": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(215, 12%, 92%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(215, 12%, 92%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 12%, 45%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(218, 11%, 76%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 12%, 45%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(218, 11%, 76%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-            },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
           },
-        },
-        "notice": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(42, 74%, 20%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(42, 74%, 20%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(34, 93%, 65%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(34, 93%, 65%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-            },
-          },
-        },
-        "positive": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(163, 100%, 22%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "text": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(187, 68%, 52%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 84%, 37%, 1)",
+            "normal": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(198, 90%, 52%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(6, 100%, 75%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 77%, 40%, 1)",
+            "normal": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(34, 93%, 65%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 85%, 42%, 1)",
+            "normal": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(25, 100%, 55%, 1)",
+          },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 100%)",
+            "muted": "hsl(0, 0%, 100%)",
+            "normal": "hsl(0, 0%, 100%)",
+            "subtle": "hsl(0, 0%, 100%)",
           },
           "positive": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(149, 99%, 35%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 100%, 27%, 1)",
+            "normal": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(150, 100%, 37%, 1)",
+          },
+          "primary": {
+            "disabled": "hsla(240, 20%, 99%, 1)",
+            "muted": "hsla(240, 20%, 99%, 1)",
+            "normal": "hsla(240, 20%, 99%, 1)",
+            "subtle": "hsla(240, 20%, 99%, 1)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
       },
-      "static": {
-        "white": "hsla(0, 0%, 100%, 1)",
+      "overlay": {
+        "background": {
+          "moderate": "hsla(214, 40%, 92%, 0.32)",
+          "subtle": "hsla(0, 0%, 0%, 0.8)",
+        },
       },
-      "surface": {
-        "action": {
-          "icon": {
-            "active": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-            "default": {
-              "highContrast": "hsla(220, 11%, 84%, 0.32)",
-              "lowContrast": "hsla(219, 12%, 45%, 1)",
-            },
-            "disabled": {
-              "highContrast": "hsla(220, 11%, 84%, 0.18)",
-              "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-            },
-            "focus": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-            "hover": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-          },
+      "popup": {
+        "background": {
+          "intense": "hsla(211, 29%, 26%, 1)",
+          "subtle": "hsla(211, 29%, 26%, 1)",
+        },
+        "border": {
+          "intense": "hsla(214, 40%, 92%, 0.18)",
+          "subtle": "hsla(214, 40%, 92%, 0.18)",
         },
+      },
+      "surface": {
         "background": {
-          "level1": {
-            "highContrast": "hsla(219, 41%, 19%, 1)",
-            "lowContrast": "hsla(218, 67%, 10%, 1)",
+          "cloud": {
+            "intense": "hsla(201, 39%, 93%, 1)",
+            "subtle": "hsla(200, 91%, 13%, 1)",
           },
-          "level2": {
-            "highContrast": "hsla(220, 35%, 22%, 1)",
-            "lowContrast": "hsla(218, 54%, 15%, 1)",
+          "gray": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "moderate": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 53%, 10%, 1)",
           },
-          "level3": {
-            "highContrast": "hsla(220, 23%, 29%, 1)",
-            "lowContrast": "hsla(218, 49%, 17%, 1)",
+          "primary": {
+            "intense": "hsl(332, 100%, 26%)",
+            "subtle": "hsl(332, 52%, 49%)",
+          },
+          "sea": {
+            "intense": "hsla(180, 42%, 92%, 1)",
+            "subtle": "hsla(180, 91%, 13%, 1)",
           },
         },
         "border": {
-          "normal": {
-            "highContrast": "hsla(217, 11%, 76%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+          "gray": {
+            "muted": "hsla(214, 40%, 92%, 0.18)",
+            "normal": "hsla(211, 20%, 52%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(217, 11%, 76%, 0.09)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.09)",
+          "primary": {
+            "muted": "hsla(227, 100%, 59%, 0.32)",
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
         },
-        "overlay": {
-          "background": {
-            "400": "hsla(221, 16%, 37%, 0.64)",
-            "800": "hsla(231, 11%, 12%, 0.72)",
+        "icon": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-        },
-        "popup": {
-          "background": "hsla(220, 35%, 22%, 1)",
-        },
-        "text": {
-          "muted": {
-            "highContrast": "hsla(218, 11%, 76%, 1)",
-            "lowContrast": "hsla(218, 11%, 76%, 1)",
+          "onCloud": {
+            "onIntense": "hsla(223, 100%, 65%, 1)",
+            "onSubtle": "hsla(220, 100%, 73%, 1)",
           },
-          "normal": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(0, 0%, 99%, 1)",
+          "onSea": {
+            "onIntense": "hsla(155, 100%, 31%, 1)",
+            "onSubtle": "hsla(150, 59%, 55%, 1)",
           },
-          "placeholder": {
-            "highContrast": "hsla(219, 10%, 60%, 1)",
-            "lowContrast": "hsla(219, 10%, 60%, 1)",
+          "primary": {
+            "normal": "hsl(332, 100%, 26%)",
           },
-          "subdued": {
-            "highContrast": "hsla(218, 11%, 84%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
           },
-          "subtle": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(215, 12%, 92%, 1)",
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
-      },
-      "white": {
-        "action": {
-          "background": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-            "tertiary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(210, 6%, 94%, 0.09)",
-              "disabled": "hsla(210, 6%, 94%, 0.09)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
+        "text": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-          "border": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(214, 15%, 18%, 0)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(214, 15%, 18%, 0)",
-              "hover": "hsla(214, 15%, 18%, 0)",
-            },
+          "onCloud": {
+            "onIntense": "hsla(227, 71%, 51%, 1)",
+            "onSubtle": "hsla(219, 95%, 85%, 1)",
           },
-          "icon": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(267, 100%, 83%, 1)",
-            },
-            "primary": {
-              "active": "hsla(213, 89%, 56%, 1)",
-              "default": "hsla(213, 89%, 56%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(213, 89%, 56%, 1)",
-              "hover": "hsla(213, 89%, 56%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "onSea": {
+            "onIntense": "hsla(155, 100%, 21%, 1)",
+            "onSubtle": "hsla(150, 59%, 82%, 1)",
           },
-          "text": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(267, 100%, 83%, 1)",
-            },
-            "primary": {
-              "active": "hsla(213, 89%, 56%, 1)",
-              "default": "hsla(213, 89%, 56%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(213, 89%, 56%, 1)",
-              "hover": "hsla(213, 89%, 56%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "primary": {
+            "normal": "hsla(220, 100%, 73%, 1)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
       },
+      "transparent": "hsla(0, 0%, 100%, 0)",
     },
     "onLight": {
-      "action": {
+      "feedback": {
         "background": {
-          "primary": {
-            "active": "hsl(332, 100%, 17%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsl(332, 100%, 20%)",
-            "hover": "hsl(332, 100%, 23%)",
-          },
-          "secondary": {
-            "active": "hsla(332, 100%, 26%, 0.32)",
-            "default": "hsla(332, 100%, 26%, 0)",
-            "disabled": "hsla(216, 44%, 23%, 0)",
-            "focus": "hsla(332, 100%, 26%, 0.18)",
-            "hover": "hsla(332, 100%, 26%, 0.09)",
-          },
-          "tertiary": {
-            "active": "hsla(214, 21%, 94%, 1)",
-            "default": "hsla(0, 0%, 100%, 1)",
-            "disabled": "hsla(216, 15%, 54%, 0.09)",
-            "focus": "hsla(220, 30%, 96%, 1)",
-            "hover": "hsla(220, 27%, 98%, 1)",
-          },
-        },
-        "border": {
-          "primary": {
-            "active": "hsl(332, 100%, 17%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsl(332, 100%, 20%)",
-            "hover": "hsl(332, 100%, 23%)",
-          },
-          "secondary": {
-            "active": "hsl(332, 100%, 26%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsl(332, 100%, 26%)",
-            "hover": "hsl(332, 100%, 26%)",
+          "information": {
+            "intense": "hsla(200, 84%, 44%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.09)",
           },
-          "tertiary": {
-            "active": "hsla(216, 19%, 89%, 1)",
-            "default": "hsla(216, 19%, 89%, 1)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsla(216, 19%, 89%, 1)",
-            "hover": "hsla(216, 19%, 89%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.09)",
           },
-        },
-        "icon": {
-          "link": {
-            "active": "hsla(227, 100%, 45%, 1)",
-            "default": "hsla(218, 89%, 51%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(227, 100%, 45%, 1)",
-            "hover": "hsla(223, 95%, 48%, 1)",
-            "visited": "hsla(268, 100%, 79%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 29%, 26%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 0.09)",
           },
-          "primary": {
-            "active": "hsl(0, 0%, 100%)",
-            "default": "hsl(0, 0%, 100%)",
-            "disabled": "hsla(216, 16%, 60%, 1)",
-            "focus": "hsl(0, 0%, 100%)",
-            "hover": "hsl(0, 0%, 100%)",
-          },
-          "secondary": {
-            "active": "hsl(332, 100%, 26%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsl(332, 100%, 26%)",
-            "hover": "hsl(332, 100%, 26%)",
+          "notice": {
+            "intense": "hsla(25, 90%, 48%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.09)",
           },
-          "tertiary": {
-            "active": "hsla(216, 33%, 29%, 1)",
-            "default": "hsla(216, 33%, 29%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(216, 33%, 29%, 1)",
+          "positive": {
+            "intense": "hsla(150, 100%, 32%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.09)",
           },
         },
-        "text": {
-          "link": {
-            "active": "hsla(227, 100%, 45%, 1)",
-            "default": "hsla(218, 89%, 51%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(227, 100%, 45%, 1)",
-            "hover": "hsla(223, 95%, 48%, 1)",
-            "visited": "hsla(268, 100%, 79%, 1)",
+        "border": {
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.18)",
           },
-          "primary": {
-            "active": "hsl(0, 0%, 100%)",
-            "default": "hsl(0, 0%, 100%)",
-            "disabled": "hsla(216, 16%, 60%, 1)",
-            "focus": "hsl(0, 0%, 100%)",
-            "hover": "hsl(0, 0%, 100%)",
-          },
-          "secondary": {
-            "active": "hsl(332, 100%, 26%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsl(332, 100%, 26%)",
-            "hover": "hsl(332, 100%, 26%)",
+          "negative": {
+            "intense": "hsla(4, 77%, 40%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.18)",
           },
-          "tertiary": {
-            "active": "hsla(216, 33%, 29%, 1)",
-            "default": "hsla(216, 33%, 29%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(216, 33%, 29%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 0.18)",
           },
-        },
-      },
-      "badge": {
-        "background": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.09)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.18)",
           },
-        },
-        "border": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.32)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.18)",
           },
         },
         "icon": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 1)",
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 88%, 90%, 1)",
           },
-        },
-        "text": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 93%, 94%, 1)",
           },
-        },
-      },
-      "brand": {
-        "gray": {
-          "200": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsl(0, 0%, 100%)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 24%, 65%, 1)",
           },
-          "300": {
-            "highContrast": "hsla(216, 27%, 36%, 1)",
-            "lowContrast": "hsla(220, 30%, 96%, 1)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 100%, 90%, 1)",
           },
-          "400": {
-            "highContrast": "hsla(217, 18%, 45%, 1)",
-            "lowContrast": "hsla(216, 19%, 89%, 1)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(151, 57%, 91%, 1)",
           },
-          "500": {
-            "highContrast": "hsla(216, 15%, 54%, 1)",
-            "lowContrast": "hsla(214, 18%, 69%, 1)",
+        },
+        "text": {
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 88%, 90%, 1)",
           },
-          "600": {
-            "highContrast": "hsla(214, 18%, 69%, 1)",
-            "lowContrast": "hsla(216, 16%, 60%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 93%, 94%, 1)",
           },
-          "700": {
-            "highContrast": "hsla(220, 30%, 96%, 1)",
-            "lowContrast": "hsla(217, 18%, 45%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 24%, 65%, 1)",
           },
-          "a100": {
-            "highContrast": "hsla(214, 21%, 94%, 0.18)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.18)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 100%, 90%, 1)",
           },
-          "a50": {
-            "highContrast": "hsla(214, 21%, 94%, 0.09)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(151, 57%, 91%, 1)",
           },
         },
-        "primary": {
-          "300": "hsla(332, 100%, 26%, 0.09)",
-          "400": "hsla(332, 100%, 26%, 0.18)",
-          "500": "hsl(332, 100%, 26%)",
-          "600": "hsl(332, 100%, 23%)",
-          "700": "hsl(332, 100%, 20%)",
-          "800": "hsl(332, 100%, 14%)",
-        },
-        "secondary": {
-          "500": "hsla(149, 99%, 35%, 1)",
-        },
       },
-      "feedback": {
+      "interactive": {
         "background": {
+          "gray": {
+            "default": "hsla(211, 20%, 52%, 0.09)",
+            "disabled": "hsla(211, 20%, 52%, 0.09)",
+            "faded": "hsla(211, 20%, 52%, 0.12)",
+            "fadedHighlighted": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 20%, 52%, 0.18)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.09)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.09)",
+            "faded": "hsla(200, 84%, 44%, 0.09)",
+            "fadedHighlighted": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.09)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.09)",
+            "faded": "hsla(4, 74%, 49%, 0.09)",
+            "fadedHighlighted": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+            "default": "hsla(211, 29%, 26%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.18)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "fadedHighlighted": "hsla(211, 20%, 52%, 0.32)",
+            "highlighted": "hsla(211, 33%, 21%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(38, 97%, 38%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.09)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.09)",
+            "faded": "hsla(25, 90%, 48%, 0.09)",
+            "fadedHighlighted": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.09)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.09)",
+            "faded": "hsla(150, 100%, 32%, 0.09)",
+            "fadedHighlighted": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(332, 100%, 26%)",
+            "disabled": "hsla(332, 100%, 26%, 0.12)",
+            "faded": "hsla(332, 100%, 26%, 0.12)",
+            "fadedHighlighted": "hsla(332, 100%, 26%, 0.09)",
+            "highlighted": "hsl(332, 100%, 23%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.56)",
+            "faded": "hsla(0, 0%, 0%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.18)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "border": {
+          "gray": {
+            "default": "hsla(211, 27%, 76%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 1)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 27%, 76%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.32)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.32)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.32)",
+            "default": "hsla(211, 20%, 52%, 1)",
+            "disabled": "hsla(214, 28%, 84%, 1)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 20%, 52%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(38, 97%, 38%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.32)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.32)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(332, 100%, 26%)",
+            "disabled": "hsla(332, 100%, 26%, 0.12)",
+            "faded": "hsla(332, 100%, 26%, 0.12)",
+            "highlighted": "hsl(332, 100%, 23%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "faded": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "icon": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 90%, 65%, 1)",
+            "normal": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(8, 73%, 47%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 93%, 68%, 1)",
+            "normal": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(38, 97%, 38%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 100%, 63%, 1)",
+            "normal": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 1)",
           },
-          "positive": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(160, 100%, 26%, 1)",
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 100%)",
+            "muted": "hsl(0, 0%, 100%)",
+            "normal": "hsl(0, 0%, 100%)",
+            "subtle": "hsl(0, 0%, 100%)",
           },
-        },
-        "information": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(195, 100%, 31%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
+          "positive": {
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 59%, 55%, 1)",
+            "normal": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 1)",
           },
-        },
-        "negative": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(7, 72%, 40%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-            },
+          "primary": {
+            "disabled": "hsl(332, 100%, 26%)",
+            "muted": "hsl(332, 100%, 26%)",
+            "normal": "hsl(332, 100%, 26%)",
+            "subtle": "hsl(332, 100%, 26%)",
           },
-        },
-        "neutral": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(217, 56%, 17%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(216, 33%, 29%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 33%, 29%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(217, 56%, 17%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(216, 44%, 23%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 21%, 94%, 1)",
-                  "lowContrast": "hsla(217, 18%, 45%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 21%, 94%, 1)",
-                  "lowContrast": "hsla(217, 18%, 45%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-            },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
           },
-        },
-        "notice": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(38, 97%, 38%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(38, 97%, 38%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-            },
-          },
-        },
-        "positive": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(163, 100%, 22%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(121, 65%, 71%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(121, 65%, 71%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "text": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 90%, 65%, 1)",
+            "normal": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(8, 73%, 47%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 93%, 68%, 1)",
+            "normal": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(38, 97%, 38%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 100%, 63%, 1)",
+            "normal": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 1)",
+          },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 100%)",
+            "muted": "hsl(0, 0%, 100%)",
+            "normal": "hsl(0, 0%, 100%)",
+            "subtle": "hsl(0, 0%, 100%)",
           },
           "positive": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(160, 100%, 26%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 59%, 55%, 1)",
+            "normal": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 1)",
+          },
+          "primary": {
+            "disabled": "hsl(332, 100%, 26%)",
+            "muted": "hsl(332, 100%, 26%)",
+            "normal": "hsl(332, 100%, 26%)",
+            "subtle": "hsl(332, 100%, 26%)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
       },
-      "static": {
-        "white": "hsla(0, 0%, 100%, 1)",
+      "overlay": {
+        "background": {
+          "moderate": "hsla(211, 20%, 52%, 0.32)",
+          "subtle": "hsla(0, 0%, 0%, 0.56)",
+        },
       },
-      "surface": {
-        "action": {
-          "icon": {
-            "active": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-            "default": {
-              "highContrast": "hsla(214, 21%, 94%, 0.32)",
-              "lowContrast": "hsla(214, 18%, 69%, 1)",
-            },
-            "disabled": {
-              "highContrast": "hsla(216, 15%, 54%, 0.18)",
-              "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-            },
-            "focus": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-            "hover": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-          },
+      "popup": {
+        "background": {
+          "intense": "hsla(211, 29%, 26%, 1)",
+          "subtle": "hsla(0, 0%, 100%, 1)",
         },
+        "border": {
+          "intense": "hsla(211, 26%, 34%, 1)",
+          "subtle": "hsla(211, 20%, 52%, 0.18)",
+        },
+      },
+      "surface": {
         "background": {
-          "level1": {
-            "highContrast": "hsla(217, 56%, 17%, 1)",
-            "lowContrast": "hsla(220, 30%, 96%, 1)",
+          "cloud": {
+            "intense": "hsla(200, 61%, 20%, 1)",
+            "subtle": "hsla(198, 39%, 95%, 1)",
           },
-          "level2": {
-            "highContrast": "hsla(216, 44%, 23%, 1)",
-            "lowContrast": "hsla(0, 0%, 100%, 1)",
+          "gray": {
+            "intense": "hsla(0, 0%, 100%, 1)",
+            "moderate": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(213, 47%, 96%, 1)",
           },
-          "level3": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(220, 27%, 98%, 1)",
+          "primary": {
+            "intense": "hsl(332, 100%, 26%)",
+            "subtle": "hsl(332, 52%, 49%)",
+          },
+          "sea": {
+            "intense": "hsla(180, 61%, 20%, 1)",
+            "subtle": "hsla(180, 39%, 95%, 1)",
           },
         },
         "border": {
-          "normal": {
-            "highContrast": "hsla(214, 21%, 94%, 0.18)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.18)",
+          "gray": {
+            "muted": "hsla(211, 20%, 52%, 0.18)",
+            "normal": "hsla(211, 24%, 65%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(214, 21%, 94%, 0.09)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+          "primary": {
+            "muted": "hsla(227, 100%, 59%, 0.18)",
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
         },
-        "overlay": {
-          "background": {
-            "400": "hsla(214, 18%, 69%, 0.64)",
-            "800": "hsla(214, 15%, 18%, 0.64)",
+        "icon": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-        },
-        "popup": {
-          "background": "hsla(0, 0%, 100%, 1)",
-        },
-        "text": {
-          "muted": {
-            "highContrast": "hsla(218, 19%, 81%, 1)",
-            "lowContrast": "hsla(216, 16%, 60%, 1)",
+          "onCloud": {
+            "onIntense": "hsla(220, 100%, 73%, 1)",
+            "onSubtle": "hsla(223, 100%, 65%, 1)",
           },
-          "normal": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(217, 56%, 17%, 1)",
+          "onSea": {
+            "onIntense": "hsla(150, 59%, 55%, 1)",
+            "onSubtle": "hsla(155, 100%, 31%, 1)",
           },
-          "placeholder": {
-            "highContrast": "hsla(214, 18%, 69%, 1)",
-            "lowContrast": "hsla(214, 18%, 69%, 1)",
+          "primary": {
+            "normal": "hsl(332, 100%, 26%)",
           },
-          "subdued": {
-            "highContrast": "hsla(216, 19%, 89%, 1)",
-            "lowContrast": "hsla(217, 18%, 45%, 1)",
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
           },
-          "subtle": {
-            "highContrast": "hsla(220, 30%, 96%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
-      },
-      "white": {
-        "action": {
-          "background": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-            "tertiary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(210, 6%, 94%, 0.09)",
-              "disabled": "hsla(210, 6%, 94%, 0.09)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
+        "text": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "border": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(214, 15%, 18%, 0)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(214, 15%, 18%, 0)",
-              "hover": "hsla(214, 15%, 18%, 0)",
-            },
+          "onCloud": {
+            "onIntense": "hsla(219, 95%, 85%, 1)",
+            "onSubtle": "hsla(227, 71%, 51%, 1)",
           },
-          "icon": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(268, 100%, 79%, 1)",
-            },
-            "primary": {
-              "active": "hsla(218, 89%, 51%, 1)",
-              "default": "hsla(218, 89%, 51%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(218, 89%, 51%, 1)",
-              "hover": "hsla(218, 89%, 51%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "onSea": {
+            "onIntense": "hsla(150, 59%, 82%, 1)",
+            "onSubtle": "hsla(155, 100%, 21%, 1)",
           },
-          "text": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(268, 100%, 79%, 1)",
-            },
-            "primary": {
-              "active": "hsla(218, 89%, 51%, 1)",
-              "default": "hsla(218, 89%, 51%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(218, 89%, 51%, 1)",
-              "hover": "hsla(218, 89%, 51%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "primary": {
+            "normal": "hsla(227, 100%, 59%, 1)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
       },
+      "transparent": "hsla(0, 0%, 100%, 0)",
     },
   },
   "elevation": {
     "onDark": {
       "highRaised": {
-        "elevation": 26,
-        "shadowColor": "hsla(231, 67%, 10%, 0.64)",
+        "elevation": 24,
+        "shadowColor": "hsla(217, 56%, 17%, 0.8)",
         "shadowOffset": {
-          "height": 18,
+          "height": 6,
           "width": 0,
         },
-        "shadowOpacity": 0.2,
-        "shadowRadius": 12,
+        "shadowOpacity": 0.16,
+        "shadowRadius": 14,
       },
       "lowRaised": {
-        "elevation": 4,
-        "shadowColor": "hsla(231, 67%, 10%, 0.64)",
+        "elevation": 8,
+        "shadowColor": "hsla(217, 56%, 17%, 0.4)",
         "shadowOffset": {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.12,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.2,
+        "shadowRadius": 4,
       },
       "midRaised": {
-        "elevation": 12,
-        "shadowColor": "hsla(231, 67%, 10%, 0.64)",
+        "elevation": 16,
+        "shadowColor": "hsla(217, 56%, 17%, 0.55)",
         "shadowOffset": {
-          "height": 8,
+          "height": 4,
           "width": 0,
         },
-        "shadowOpacity": 0.1,
-        "shadowRadius": 4,
+        "shadowOpacity": 0.17,
+        "shadowRadius": 6,
       },
       "none": {
         "elevation": 0,
@@ -3136,34 +977,34 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
     },
     "onLight": {
       "highRaised": {
-        "elevation": 26,
-        "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+        "elevation": 24,
+        "shadowColor": "hsla(217, 56%, 17%, 0.8)",
         "shadowOffset": {
-          "height": 18,
+          "height": 6,
           "width": 0,
         },
-        "shadowOpacity": 0.2,
-        "shadowRadius": 12,
+        "shadowOpacity": 0.16,
+        "shadowRadius": 14,
       },
       "lowRaised": {
-        "elevation": 4,
-        "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+        "elevation": 8,
+        "shadowColor": "hsla(217, 56%, 17%, 0.4)",
         "shadowOffset": {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.12,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.2,
+        "shadowRadius": 4,
       },
       "midRaised": {
-        "elevation": 12,
-        "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+        "elevation": 16,
+        "shadowColor": "hsla(217, 56%, 17%, 0.55)",
         "shadowOffset": {
-          "height": 8,
+          "height": 4,
           "width": 0,
         },
-        "shadowOpacity": 0.1,
-        "shadowRadius": 4,
+        "shadowOpacity": 0.17,
+        "shadowRadius": 6,
       },
       "none": {
         "elevation": 0,
@@ -3233,101 +1074,105 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
     "onDesktop": {
       "fonts": {
         "family": {
-          "code": "Courier",
-          "text": "Lato",
+          "code": "Menlo",
+          "heading": "TASA Orbiter Display",
+          "text": "Inter",
         },
         "size": {
-          "10": 9,
           "100": 14,
-          "1000": 40,
-          "1100": 48,
-          "1200": 56,
-          "1300": 64,
-          "1600": 88,
+          "1000": 64,
+          "1100": 72,
           "200": 16,
           "25": 10,
           "300": 18,
           "400": 20,
           "50": 11,
-          "500": 22,
-          "600": 24,
-          "700": 28,
+          "500": 24,
+          "600": 32,
+          "700": 40,
           "75": 12,
-          "800": 32,
-          "900": 36,
+          "800": 48,
+          "900": 56,
         },
         "weight": {
           "bold": 700,
+          "medium": 500,
           "regular": 400,
+          "semibold": 600,
         },
       },
+      "letterSpacings": {
+        "100": 0,
+        "50": -1,
+      },
       "lineHeights": {
         "0": 0,
         "100": 20,
-        "1000": 64,
-        "1100": 72,
-        "1500": 104,
+        "1000": 70,
+        "1100": 78,
         "200": 24,
         "25": 14,
         "300": 24,
-        "400": 28,
+        "400": 26,
         "50": 16,
         "500": 32,
-        "600": 40,
-        "700": 40,
+        "600": 38,
+        "700": 46,
         "75": 18,
-        "800": 48,
-        "900": 56,
+        "800": 56,
+        "900": 64,
       },
     },
     "onMobile": {
       "fonts": {
         "family": {
-          "code": "Courier",
-          "text": "Lato",
+          "code": "Menlo",
+          "heading": "TASA Orbiter Display",
+          "text": "Inter",
         },
         "size": {
-          "10": 9,
           "100": 14,
-          "1000": 32,
+          "1000": 38,
           "1100": 40,
-          "1200": 48,
-          "1300": 56,
-          "1600": 64,
           "200": 16,
           "25": 10,
           "300": 16,
           "400": 18,
           "50": 11,
           "500": 20,
-          "600": 20,
-          "700": 24,
+          "600": 24,
+          "700": 32,
           "75": 12,
-          "800": 28,
-          "900": 32,
+          "800": 34,
+          "900": 36,
         },
         "weight": {
           "bold": 700,
+          "medium": 500,
           "regular": 400,
+          "semibold": 600,
         },
       },
+      "letterSpacings": {
+        "100": 0,
+        "50": -1,
+      },
       "lineHeights": {
         "0": 0,
         "100": 20,
-        "1000": 56,
-        "1100": 64,
-        "1500": 72,
-        "200": 20,
+        "1000": 46,
+        "1100": 48,
+        "200": 24,
         "25": 14,
-        "300": 24,
+        "300": 22,
         "400": 24,
         "50": 16,
-        "500": 28,
+        "500": 26,
         "600": 32,
-        "700": 40,
+        "700": 38,
         "75": 18,
         "800": 40,
-        "900": 48,
+        "900": 42,
       },
     },
   },
@@ -3362,10 +1207,8 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsl(332, 100%, 17%)"
-    activeBorderColor="hsl(332, 100%, 17%)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
@@ -3374,9 +1217,9 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
     data-blade-component="button"
     defaultBackgroundColor="hsl(332, 100%, 26%)"
     defaultBorderColor="hsl(332, 100%, 26%)"
-    focusBackgroundColor="hsl(332, 100%, 20%)"
-    focusBorderColor="hsl(332, 100%, 20%)"
-    focusRingColor="hsla(332, 100%, 26%, 0.18)"
+    focusBackgroundColor="hsl(332, 100%, 23%)"
+    focusBorderColor="hsl(332, 100%, 23%)"
+    focusRingColor="hsla(227, 100%, 59%, 0.18)"
     focusable={true}
     hoverBackgroundColor="hsl(332, 100%, 23%)"
     hoverBorderColor="hsl(332, 100%, 23%)"
@@ -3402,13 +1245,14 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
           "alignSelf": "center",
           "backgroundColor": "hsl(332, 100%, 26%)",
           "borderColor": "hsl(332, 100%, 26%)",
-          "borderRadius": 2,
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -3443,28 +1287,31 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
               "color": "hsl(0, 0%, 100%)",
-              "fontFamily": "Lato",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
@@ -3492,12 +1339,15 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
 {
   "border": {
     "radius": {
+      "2xlarge": 16,
       "large": 8,
       "max": 9999,
       "medium": 4,
       "none": 0,
       "round": "50%",
       "small": 2,
+      "xlarge": 12,
+      "xsmall": 1,
     },
     "width": {
       "none": 0,
@@ -3517,3099 +1367,937 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
   },
   "colors": {
     "onDark": {
-      "action": {
+      "feedback": {
         "background": {
-          "primary": {
-            "active": "hsl(57, 100%, 42%)",
-            "default": "hsl(58, 100%, 54%)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsl(57, 100%, 47%)",
-            "hover": "hsl(57, 100%, 52%)",
-          },
-          "secondary": {
-            "active": "hsla(57, 100%, 52%, 0.32)",
-            "default": "hsla(57, 100%, 52%, 0)",
-            "disabled": "hsla(220, 11%, 84%, 0)",
-            "focus": "hsla(57, 100%, 52%, 0.18)",
-            "hover": "hsla(57, 100%, 52%, 0.09)",
-          },
-          "tertiary": {
-            "active": "hsla(216, 15%, 54%, 0.32)",
-            "default": "hsla(220, 11%, 84%, 0.09)",
-            "disabled": "hsla(220, 11%, 84%, 0.09)",
-            "focus": "hsla(220, 11%, 84%, 0.32)",
-            "hover": "hsla(220, 11%, 84%, 0.18)",
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.18)",
           },
-        },
-        "border": {
-          "primary": {
-            "active": "hsl(57, 100%, 42%)",
-            "default": "hsl(58, 100%, 54%)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsl(57, 100%, 47%)",
-            "hover": "hsl(57, 100%, 52%)",
-          },
-          "secondary": {
-            "active": "hsl(60, 100%, 55%)",
-            "default": "hsl(60, 100%, 55%)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsl(60, 100%, 55%)",
-            "hover": "hsl(60, 100%, 55%)",
-          },
-          "tertiary": {
-            "active": "hsla(219, 12%, 45%, 1)",
-            "default": "hsla(220, 11%, 84%, 0)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsla(219, 12%, 45%, 1)",
-            "hover": "hsla(219, 12%, 45%, 1)",
+          "negative": {
+            "intense": "hsla(4, 77%, 40%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.18)",
           },
-        },
-        "icon": {
-          "link": {
-            "active": "hsla(213, 89%, 56%, 1)",
-            "default": "hsla(215, 91%, 74%, 1)",
-            "disabled": "hsla(219, 12%, 45%, 1)",
-            "focus": "hsla(213, 89%, 56%, 1)",
-            "hover": "hsla(213, 91%, 66%, 1)",
-            "visited": "hsla(267, 100%, 83%, 1)",
+          "neutral": {
+            "intense": "hsla(214, 40%, 92%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "primary": {
-            "active": "hsl(219, 41%, 19%)",
-            "default": "hsl(219, 41%, 19%)",
-            "disabled": "hsla(219, 10%, 60%, 1)",
-            "focus": "hsl(219, 41%, 19%)",
-            "hover": "hsl(219, 41%, 19%)",
-          },
-          "secondary": {
-            "active": "hsl(60, 100%, 55%)",
-            "default": "hsl(60, 100%, 55%)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsl(60, 100%, 55%)",
-            "hover": "hsl(60, 100%, 55%)",
-          },
-          "tertiary": {
-            "active": "hsla(218, 11%, 84%, 1)",
-            "default": "hsla(218, 11%, 84%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(218, 11%, 84%, 1)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.18)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.18)",
           },
         },
-        "text": {
-          "link": {
-            "active": "hsla(213, 89%, 56%, 1)",
-            "default": "hsla(215, 91%, 74%, 1)",
-            "disabled": "hsla(219, 12%, 45%, 1)",
-            "focus": "hsla(213, 89%, 56%, 1)",
-            "hover": "hsla(213, 91%, 66%, 1)",
-            "visited": "hsla(267, 100%, 83%, 1)",
+        "border": {
+          "information": {
+            "intense": "hsla(200, 84%, 29%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.32)",
           },
-          "primary": {
-            "active": "hsl(219, 41%, 19%)",
-            "default": "hsl(219, 41%, 19%)",
-            "disabled": "hsla(219, 10%, 60%, 1)",
-            "focus": "hsl(219, 41%, 19%)",
-            "hover": "hsl(219, 41%, 19%)",
-          },
-          "secondary": {
-            "active": "hsl(60, 100%, 55%)",
-            "default": "hsl(60, 100%, 55%)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsl(60, 100%, 55%)",
-            "hover": "hsl(60, 100%, 55%)",
-          },
-          "tertiary": {
-            "active": "hsla(218, 11%, 84%, 1)",
-            "default": "hsla(218, 11%, 84%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(218, 11%, 84%, 1)",
-            "hover": "hsla(218, 11%, 84%, 1)",
+          "negative": {
+            "intense": "hsla(0, 83%, 33%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.32)",
           },
-        },
-      },
-      "badge": {
-        "background": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.18)",
+          "neutral": {
+            "intense": "hsla(214, 28%, 84%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-        },
-        "border": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.32)",
+          "notice": {
+            "intense": "hsla(25, 82%, 35%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.32)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 21%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.32)",
           },
         },
         "icon": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(213, 91%, 66%, 1)",
+          "information": {
+            "intense": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(201, 92%, 95%, 1)",
           },
-        },
-        "text": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(213, 91%, 66%, 1)",
+          "negative": {
+            "intense": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(0, 100%, 98%, 1)",
           },
-        },
-      },
-      "brand": {
-        "gray": {
-          "200": {
-            "highContrast": "hsla(220, 23%, 29%, 1)",
-            "lowContrast": "hsl(219, 41%, 19%)",
+          "neutral": {
+            "intense": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 1)",
           },
-          "300": {
-            "highContrast": "hsla(220, 16%, 37%, 1)",
-            "lowContrast": "hsla(220, 35%, 22%, 1)",
+          "notice": {
+            "intense": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(24, 100%, 96%, 1)",
           },
-          "400": {
-            "highContrast": "hsla(219, 12%, 45%, 1)",
-            "lowContrast": "hsla(220, 23%, 29%, 1)",
+          "positive": {
+            "intense": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(152, 60%, 95%, 1)",
           },
-          "500": {
-            "highContrast": "hsla(219, 10%, 60%, 1)",
-            "lowContrast": "hsla(220, 16%, 37%, 1)",
+        },
+        "text": {
+          "information": {
+            "intense": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(201, 92%, 95%, 1)",
           },
-          "600": {
-            "highContrast": "hsla(218, 11%, 76%, 1)",
-            "lowContrast": "hsla(219, 12%, 45%, 1)",
+          "negative": {
+            "intense": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(0, 100%, 98%, 1)",
           },
-          "700": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 76%, 1)",
+          "neutral": {
+            "intense": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 1)",
           },
-          "a100": {
-            "highContrast": "hsla(217, 11%, 76%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+          "notice": {
+            "intense": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(24, 100%, 96%, 1)",
           },
-          "a50": {
-            "highContrast": "hsla(217, 11%, 76%, 0.09)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.09)",
+          "positive": {
+            "intense": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(152, 60%, 95%, 1)",
           },
         },
-        "primary": {
-          "300": "hsla(57, 100%, 52%, 0.18)",
-          "400": "hsla(57, 100%, 52%, 0.32)",
-          "500": "hsl(60, 100%, 55%)",
-          "600": "hsl(58, 100%, 54%)",
-          "700": "hsl(57, 100%, 52%)",
-          "800": "hsl(57, 100%, 37%)",
-        },
-        "secondary": {
-          "500": "hsla(149, 99%, 35%, 1)",
-        },
       },
-      "feedback": {
+      "interactive": {
         "background": {
+          "gray": {
+            "default": "hsla(214, 40%, 92%, 0.09)",
+            "disabled": "hsla(214, 40%, 92%, 0.09)",
+            "faded": "hsla(214, 40%, 92%, 0.12)",
+            "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 0.18)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.18)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.24)",
+            "fadedHighlighted": "hsla(200, 84%, 44%, 0.32)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.18)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.24)",
+            "fadedHighlighted": "hsla(4, 74%, 49%, 0.32)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(220, 11%, 84%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+            "default": "hsla(210, 40%, 98%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.18)",
+            "faded": "hsla(214, 40%, 92%, 0.12)",
+            "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(40, 90%, 32%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.18)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.24)",
+            "fadedHighlighted": "hsla(25, 90%, 48%, 0.32)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.18)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.24)",
+            "fadedHighlighted": "hsla(150, 100%, 32%, 0.32)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(57, 100%, 52%)",
+            "disabled": "hsla(57, 100%, 52%, 0.12)",
+            "faded": "hsla(57, 100%, 52%, 0.12)",
+            "fadedHighlighted": "hsla(57, 100%, 52%, 0.09)",
+            "highlighted": "hsl(57, 100%, 47%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.56)",
+            "faded": "hsla(0, 0%, 0%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.18)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "border": {
+          "gray": {
+            "default": "hsla(211, 23%, 45%, 1)",
+            "disabled": "hsla(211, 29%, 26%, 1)",
+            "faded": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(211, 23%, 45%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.32)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.32)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.32)",
+            "default": "hsla(214, 40%, 92%, 1)",
+            "disabled": "hsla(211, 23%, 45%, 1)",
+            "faded": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(40, 90%, 32%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.32)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.32)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(57, 100%, 52%)",
+            "disabled": "hsla(57, 100%, 52%, 0.12)",
+            "faded": "hsla(57, 100%, 52%, 0.12)",
+            "highlighted": "hsl(57, 100%, 47%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "faded": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "icon": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(187, 68%, 52%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 84%, 37%, 1)",
+            "normal": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(198, 90%, 52%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(6, 100%, 75%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 77%, 40%, 1)",
+            "normal": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(34, 93%, 65%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 85%, 42%, 1)",
+            "normal": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(25, 100%, 55%, 1)",
           },
-          "positive": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(149, 99%, 35%, 1)",
-          },
-        },
-        "information": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(195, 100%, 31%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(187, 68%, 52%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(187, 68%, 52%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-            },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 0%)",
+            "muted": "hsl(0, 0%, 0%)",
+            "normal": "hsl(0, 0%, 0%)",
+            "subtle": "hsl(0, 0%, 0%)",
           },
-        },
-        "negative": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(7, 72%, 40%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-            },
+          "positive": {
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 100%, 27%, 1)",
+            "normal": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(150, 100%, 37%, 1)",
           },
-        },
-        "neutral": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(215, 12%, 92%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(215, 12%, 92%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 12%, 45%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(218, 11%, 76%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 12%, 45%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(218, 11%, 76%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-            },
+          "primary": {
+            "disabled": "hsl(60, 100%, 55%)",
+            "muted": "hsl(60, 100%, 55%)",
+            "normal": "hsl(60, 100%, 55%)",
+            "subtle": "hsl(60, 100%, 55%)",
           },
-        },
-        "notice": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(42, 74%, 20%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(42, 74%, 20%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(34, 93%, 65%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(34, 93%, 65%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-            },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
           },
-        },
-        "positive": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(163, 100%, 22%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "text": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(187, 68%, 52%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 84%, 37%, 1)",
+            "normal": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(198, 90%, 52%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(6, 100%, 75%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 77%, 40%, 1)",
+            "normal": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(34, 93%, 65%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 85%, 42%, 1)",
+            "normal": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(25, 100%, 55%, 1)",
+          },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 0%)",
+            "muted": "hsl(0, 0%, 0%)",
+            "normal": "hsl(0, 0%, 0%)",
+            "subtle": "hsl(0, 0%, 0%)",
           },
           "positive": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(149, 99%, 35%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 100%, 27%, 1)",
+            "normal": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(150, 100%, 37%, 1)",
+          },
+          "primary": {
+            "disabled": "hsl(60, 100%, 55%)",
+            "muted": "hsl(60, 100%, 55%)",
+            "normal": "hsl(60, 100%, 55%)",
+            "subtle": "hsl(60, 100%, 55%)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
       },
-      "static": {
-        "white": "hsla(0, 0%, 100%, 1)",
+      "overlay": {
+        "background": {
+          "moderate": "hsla(214, 40%, 92%, 0.32)",
+          "subtle": "hsla(0, 0%, 0%, 0.8)",
+        },
       },
-      "surface": {
-        "action": {
-          "icon": {
-            "active": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-            "default": {
-              "highContrast": "hsla(220, 11%, 84%, 0.32)",
-              "lowContrast": "hsla(219, 12%, 45%, 1)",
-            },
-            "disabled": {
-              "highContrast": "hsla(220, 11%, 84%, 0.18)",
-              "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-            },
-            "focus": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-            "hover": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-          },
+      "popup": {
+        "background": {
+          "intense": "hsla(211, 29%, 26%, 1)",
+          "subtle": "hsla(211, 29%, 26%, 1)",
+        },
+        "border": {
+          "intense": "hsla(214, 40%, 92%, 0.18)",
+          "subtle": "hsla(214, 40%, 92%, 0.18)",
         },
+      },
+      "surface": {
         "background": {
-          "level1": {
-            "highContrast": "hsla(219, 41%, 19%, 1)",
-            "lowContrast": "hsla(218, 67%, 10%, 1)",
+          "cloud": {
+            "intense": "hsla(201, 39%, 93%, 1)",
+            "subtle": "hsla(200, 91%, 13%, 1)",
+          },
+          "gray": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "moderate": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 53%, 10%, 1)",
           },
-          "level2": {
-            "highContrast": "hsla(220, 35%, 22%, 1)",
-            "lowContrast": "hsla(218, 54%, 15%, 1)",
+          "primary": {
+            "intense": "hsl(57, 100%, 52%)",
+            "subtle": "hsl(60, 100%, 58%)",
           },
-          "level3": {
-            "highContrast": "hsla(220, 23%, 29%, 1)",
-            "lowContrast": "hsla(218, 49%, 17%, 1)",
+          "sea": {
+            "intense": "hsla(180, 42%, 92%, 1)",
+            "subtle": "hsla(180, 91%, 13%, 1)",
           },
         },
         "border": {
-          "normal": {
-            "highContrast": "hsla(217, 11%, 76%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+          "gray": {
+            "muted": "hsla(214, 40%, 92%, 0.18)",
+            "normal": "hsla(211, 20%, 52%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(217, 11%, 76%, 0.09)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.09)",
+          "primary": {
+            "muted": "hsla(227, 100%, 59%, 0.32)",
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
         },
-        "overlay": {
-          "background": {
-            "400": "hsla(221, 16%, 37%, 0.64)",
-            "800": "hsla(231, 11%, 12%, 0.72)",
+        "icon": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-        },
-        "popup": {
-          "background": "hsla(220, 35%, 22%, 1)",
-        },
-        "text": {
-          "muted": {
-            "highContrast": "hsla(218, 11%, 76%, 1)",
-            "lowContrast": "hsla(218, 11%, 76%, 1)",
+          "onCloud": {
+            "onIntense": "hsla(223, 100%, 65%, 1)",
+            "onSubtle": "hsla(220, 100%, 73%, 1)",
           },
-          "normal": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(0, 0%, 99%, 1)",
+          "onSea": {
+            "onIntense": "hsla(155, 100%, 31%, 1)",
+            "onSubtle": "hsla(150, 59%, 55%, 1)",
           },
-          "placeholder": {
-            "highContrast": "hsla(219, 10%, 60%, 1)",
-            "lowContrast": "hsla(219, 10%, 60%, 1)",
+          "primary": {
+            "normal": "hsl(57, 100%, 52%)",
           },
-          "subdued": {
-            "highContrast": "hsla(218, 11%, 84%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
           },
-          "subtle": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(215, 12%, 92%, 1)",
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
-      },
-      "white": {
-        "action": {
-          "background": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-            "tertiary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(210, 6%, 94%, 0.09)",
-              "disabled": "hsla(210, 6%, 94%, 0.09)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
+        "text": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-          "border": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(214, 15%, 18%, 0)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(214, 15%, 18%, 0)",
-              "hover": "hsla(214, 15%, 18%, 0)",
-            },
+          "onCloud": {
+            "onIntense": "hsla(227, 71%, 51%, 1)",
+            "onSubtle": "hsla(219, 95%, 85%, 1)",
           },
-          "icon": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(267, 100%, 83%, 1)",
-            },
-            "primary": {
-              "active": "hsla(213, 89%, 56%, 1)",
-              "default": "hsla(213, 89%, 56%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(213, 89%, 56%, 1)",
-              "hover": "hsla(213, 89%, 56%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "onSea": {
+            "onIntense": "hsla(155, 100%, 21%, 1)",
+            "onSubtle": "hsla(150, 59%, 82%, 1)",
           },
-          "text": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(267, 100%, 83%, 1)",
-            },
-            "primary": {
-              "active": "hsla(213, 89%, 56%, 1)",
-              "default": "hsla(213, 89%, 56%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(213, 89%, 56%, 1)",
-              "hover": "hsla(213, 89%, 56%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "primary": {
+            "normal": "hsla(220, 100%, 73%, 1)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
       },
+      "transparent": "hsla(0, 0%, 100%, 0)",
     },
     "onLight": {
-      "action": {
+      "feedback": {
         "background": {
-          "primary": {
-            "active": "hsl(57, 100%, 37%)",
-            "default": "hsl(57, 100%, 52%)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsl(57, 100%, 42%)",
-            "hover": "hsl(57, 100%, 47%)",
-          },
-          "secondary": {
-            "active": "hsla(57, 100%, 52%, 0.32)",
-            "default": "hsla(57, 100%, 52%, 0)",
-            "disabled": "hsla(216, 44%, 23%, 0)",
-            "focus": "hsla(57, 100%, 52%, 0.18)",
-            "hover": "hsla(57, 100%, 52%, 0.09)",
-          },
-          "tertiary": {
-            "active": "hsla(214, 21%, 94%, 1)",
-            "default": "hsla(0, 0%, 100%, 1)",
-            "disabled": "hsla(216, 15%, 54%, 0.09)",
-            "focus": "hsla(220, 30%, 96%, 1)",
-            "hover": "hsla(220, 27%, 98%, 1)",
-          },
-        },
-        "border": {
-          "primary": {
-            "active": "hsl(57, 100%, 37%)",
-            "default": "hsl(57, 100%, 52%)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsl(57, 100%, 42%)",
-            "hover": "hsl(57, 100%, 47%)",
+          "information": {
+            "intense": "hsla(200, 84%, 44%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.09)",
           },
-          "secondary": {
-            "active": "hsl(57, 100%, 52%)",
-            "default": "hsl(57, 100%, 52%)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsl(57, 100%, 52%)",
-            "hover": "hsl(57, 100%, 52%)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.09)",
           },
-          "tertiary": {
-            "active": "hsla(216, 19%, 89%, 1)",
-            "default": "hsla(216, 19%, 89%, 1)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsla(216, 19%, 89%, 1)",
-            "hover": "hsla(216, 19%, 89%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 29%, 26%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 0.09)",
           },
-        },
-        "icon": {
-          "link": {
-            "active": "hsla(227, 100%, 45%, 1)",
-            "default": "hsla(218, 89%, 51%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(227, 100%, 45%, 1)",
-            "hover": "hsla(223, 95%, 48%, 1)",
-            "visited": "hsla(268, 100%, 79%, 1)",
+          "notice": {
+            "intense": "hsla(25, 90%, 48%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.09)",
           },
-          "primary": {
-            "active": "hsl(215, 70%, 13%)",
-            "default": "hsl(215, 70%, 13%)",
-            "disabled": "hsla(216, 16%, 60%, 1)",
-            "focus": "hsl(215, 70%, 13%)",
-            "hover": "hsl(215, 70%, 13%)",
-          },
-          "secondary": {
-            "active": "hsla(216, 44%, 23%, 1)",
-            "default": "hsla(216, 44%, 23%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 44%, 23%, 1)",
-            "hover": "hsla(216, 44%, 23%, 1)",
-          },
-          "tertiary": {
-            "active": "hsla(216, 33%, 29%, 1)",
-            "default": "hsla(216, 33%, 29%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(216, 33%, 29%, 1)",
+          "positive": {
+            "intense": "hsla(150, 100%, 32%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.09)",
           },
         },
-        "text": {
-          "link": {
-            "active": "hsla(227, 100%, 45%, 1)",
-            "default": "hsla(218, 89%, 51%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(227, 100%, 45%, 1)",
-            "hover": "hsla(223, 95%, 48%, 1)",
-            "visited": "hsla(268, 100%, 79%, 1)",
+        "border": {
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.18)",
           },
-          "primary": {
-            "active": "hsl(215, 70%, 13%)",
-            "default": "hsl(215, 70%, 13%)",
-            "disabled": "hsla(216, 16%, 60%, 1)",
-            "focus": "hsl(215, 70%, 13%)",
-            "hover": "hsl(215, 70%, 13%)",
-          },
-          "secondary": {
-            "active": "hsla(216, 44%, 23%, 1)",
-            "default": "hsla(216, 44%, 23%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 44%, 23%, 1)",
-            "hover": "hsla(216, 44%, 23%, 1)",
-          },
-          "tertiary": {
-            "active": "hsla(216, 33%, 29%, 1)",
-            "default": "hsla(216, 33%, 29%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(216, 33%, 29%, 1)",
+          "negative": {
+            "intense": "hsla(4, 77%, 40%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.18)",
           },
-        },
-      },
-      "badge": {
-        "background": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.09)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 0.18)",
           },
-        },
-        "border": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.32)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.18)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.18)",
           },
         },
         "icon": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 1)",
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 88%, 90%, 1)",
           },
-        },
-        "text": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 93%, 94%, 1)",
           },
-        },
-      },
-      "brand": {
-        "gray": {
-          "200": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsl(215, 70%, 13%)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 24%, 65%, 1)",
           },
-          "300": {
-            "highContrast": "hsla(216, 27%, 36%, 1)",
-            "lowContrast": "hsla(220, 30%, 96%, 1)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 100%, 90%, 1)",
           },
-          "400": {
-            "highContrast": "hsla(217, 18%, 45%, 1)",
-            "lowContrast": "hsla(216, 19%, 89%, 1)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(151, 57%, 91%, 1)",
           },
-          "500": {
-            "highContrast": "hsla(216, 15%, 54%, 1)",
-            "lowContrast": "hsla(214, 18%, 69%, 1)",
+        },
+        "text": {
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 88%, 90%, 1)",
           },
-          "600": {
-            "highContrast": "hsla(214, 18%, 69%, 1)",
-            "lowContrast": "hsla(216, 16%, 60%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 93%, 94%, 1)",
           },
-          "700": {
-            "highContrast": "hsla(220, 30%, 96%, 1)",
-            "lowContrast": "hsla(217, 18%, 45%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 24%, 65%, 1)",
           },
-          "a100": {
-            "highContrast": "hsla(214, 21%, 94%, 0.18)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.18)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 100%, 90%, 1)",
           },
-          "a50": {
-            "highContrast": "hsla(214, 21%, 94%, 0.09)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(151, 57%, 91%, 1)",
           },
         },
-        "primary": {
-          "300": "hsla(57, 100%, 52%, 0.09)",
-          "400": "hsla(57, 100%, 52%, 0.18)",
-          "500": "hsl(57, 100%, 52%)",
-          "600": "hsl(57, 100%, 47%)",
-          "700": "hsl(57, 100%, 42%)",
-          "800": "hsl(57, 100%, 32%)",
-        },
-        "secondary": {
-          "500": "hsla(149, 99%, 35%, 1)",
-        },
       },
-      "feedback": {
+      "interactive": {
         "background": {
+          "gray": {
+            "default": "hsla(211, 20%, 52%, 0.09)",
+            "disabled": "hsla(211, 20%, 52%, 0.09)",
+            "faded": "hsla(211, 20%, 52%, 0.12)",
+            "fadedHighlighted": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 20%, 52%, 0.18)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.09)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.09)",
+            "faded": "hsla(200, 84%, 44%, 0.09)",
+            "fadedHighlighted": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.09)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.09)",
+            "faded": "hsla(4, 74%, 49%, 0.09)",
+            "fadedHighlighted": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+            "default": "hsla(211, 29%, 26%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.18)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "fadedHighlighted": "hsla(211, 20%, 52%, 0.32)",
+            "highlighted": "hsla(211, 33%, 21%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(38, 97%, 38%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.09)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.09)",
+            "faded": "hsla(25, 90%, 48%, 0.09)",
+            "fadedHighlighted": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.09)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.09)",
+            "faded": "hsla(150, 100%, 32%, 0.09)",
+            "fadedHighlighted": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(57, 100%, 52%)",
+            "disabled": "hsla(57, 100%, 52%, 0.12)",
+            "faded": "hsla(57, 100%, 52%, 0.12)",
+            "fadedHighlighted": "hsla(57, 100%, 52%, 0.09)",
+            "highlighted": "hsl(57, 100%, 47%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.56)",
+            "faded": "hsla(0, 0%, 0%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.18)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "border": {
+          "gray": {
+            "default": "hsla(211, 27%, 76%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 1)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 27%, 76%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.32)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.32)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.32)",
+            "default": "hsla(211, 20%, 52%, 1)",
+            "disabled": "hsla(214, 28%, 84%, 1)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 20%, 52%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(38, 97%, 38%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.32)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.32)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(57, 100%, 52%)",
+            "disabled": "hsla(57, 100%, 52%, 0.12)",
+            "faded": "hsla(57, 100%, 52%, 0.12)",
+            "highlighted": "hsl(57, 100%, 47%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "faded": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "icon": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 90%, 65%, 1)",
+            "normal": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(8, 73%, 47%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 93%, 68%, 1)",
+            "normal": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(38, 97%, 38%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 100%, 63%, 1)",
+            "normal": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 1)",
           },
-          "positive": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(160, 100%, 26%, 1)",
-          },
-        },
-        "information": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(195, 100%, 31%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 0%)",
+            "muted": "hsl(0, 0%, 0%)",
+            "normal": "hsl(0, 0%, 0%)",
+            "subtle": "hsl(0, 0%, 0%)",
           },
-        },
-        "negative": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(7, 72%, 40%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-            },
+          "positive": {
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 59%, 55%, 1)",
+            "normal": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 1)",
           },
-        },
-        "neutral": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(217, 56%, 17%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(216, 33%, 29%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 33%, 29%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(217, 56%, 17%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(216, 44%, 23%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 21%, 94%, 1)",
-                  "lowContrast": "hsla(217, 18%, 45%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 21%, 94%, 1)",
-                  "lowContrast": "hsla(217, 18%, 45%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-            },
+          "primary": {
+            "disabled": "hsla(211, 33%, 21%, 1)",
+            "muted": "hsla(211, 33%, 21%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 33%, 21%, 1)",
           },
-        },
-        "notice": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(38, 97%, 38%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(38, 97%, 38%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-            },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
           },
-        },
-        "positive": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(163, 100%, 22%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(121, 65%, 71%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(121, 65%, 71%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "text": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 90%, 65%, 1)",
+            "normal": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(8, 73%, 47%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 93%, 68%, 1)",
+            "normal": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(38, 97%, 38%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 100%, 63%, 1)",
+            "normal": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 1)",
+          },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 0%)",
+            "muted": "hsl(0, 0%, 0%)",
+            "normal": "hsl(0, 0%, 0%)",
+            "subtle": "hsl(0, 0%, 0%)",
           },
           "positive": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(160, 100%, 26%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 59%, 55%, 1)",
+            "normal": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 1)",
+          },
+          "primary": {
+            "disabled": "hsla(211, 33%, 21%, 1)",
+            "muted": "hsla(211, 33%, 21%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 33%, 21%, 1)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
       },
-      "static": {
-        "white": "hsla(0, 0%, 100%, 1)",
+      "overlay": {
+        "background": {
+          "moderate": "hsla(211, 20%, 52%, 0.32)",
+          "subtle": "hsla(0, 0%, 0%, 0.56)",
+        },
       },
-      "surface": {
-        "action": {
-          "icon": {
-            "active": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-            "default": {
-              "highContrast": "hsla(214, 21%, 94%, 0.32)",
-              "lowContrast": "hsla(214, 18%, 69%, 1)",
-            },
-            "disabled": {
-              "highContrast": "hsla(216, 15%, 54%, 0.18)",
-              "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-            },
-            "focus": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-            "hover": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-          },
+      "popup": {
+        "background": {
+          "intense": "hsla(211, 29%, 26%, 1)",
+          "subtle": "hsla(0, 0%, 100%, 1)",
+        },
+        "border": {
+          "intense": "hsla(211, 26%, 34%, 1)",
+          "subtle": "hsla(211, 20%, 52%, 0.18)",
         },
+      },
+      "surface": {
         "background": {
-          "level1": {
-            "highContrast": "hsla(217, 56%, 17%, 1)",
-            "lowContrast": "hsla(220, 30%, 96%, 1)",
+          "cloud": {
+            "intense": "hsla(200, 61%, 20%, 1)",
+            "subtle": "hsla(198, 39%, 95%, 1)",
+          },
+          "gray": {
+            "intense": "hsla(0, 0%, 100%, 1)",
+            "moderate": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(213, 47%, 96%, 1)",
           },
-          "level2": {
-            "highContrast": "hsla(216, 44%, 23%, 1)",
-            "lowContrast": "hsla(0, 0%, 100%, 1)",
+          "primary": {
+            "intense": "hsl(57, 100%, 52%)",
+            "subtle": "hsl(60, 100%, 58%)",
           },
-          "level3": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(220, 27%, 98%, 1)",
+          "sea": {
+            "intense": "hsla(180, 61%, 20%, 1)",
+            "subtle": "hsla(180, 39%, 95%, 1)",
           },
         },
         "border": {
-          "normal": {
-            "highContrast": "hsla(214, 21%, 94%, 0.18)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.18)",
+          "gray": {
+            "muted": "hsla(211, 20%, 52%, 0.18)",
+            "normal": "hsla(211, 24%, 65%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(214, 21%, 94%, 0.09)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+          "primary": {
+            "muted": "hsla(227, 100%, 59%, 0.18)",
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
         },
-        "overlay": {
-          "background": {
-            "400": "hsla(214, 18%, 69%, 0.64)",
-            "800": "hsla(214, 15%, 18%, 0.64)",
+        "icon": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-        },
-        "popup": {
-          "background": "hsla(0, 0%, 100%, 1)",
-        },
-        "text": {
-          "muted": {
-            "highContrast": "hsla(218, 19%, 81%, 1)",
-            "lowContrast": "hsla(216, 16%, 60%, 1)",
+          "onCloud": {
+            "onIntense": "hsla(220, 100%, 73%, 1)",
+            "onSubtle": "hsla(223, 100%, 65%, 1)",
           },
-          "normal": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(217, 56%, 17%, 1)",
+          "onSea": {
+            "onIntense": "hsla(150, 59%, 55%, 1)",
+            "onSubtle": "hsla(155, 100%, 31%, 1)",
           },
-          "placeholder": {
-            "highContrast": "hsla(214, 18%, 69%, 1)",
-            "lowContrast": "hsla(214, 18%, 69%, 1)",
+          "primary": {
+            "normal": "hsl(57, 100%, 52%)",
           },
-          "subdued": {
-            "highContrast": "hsla(216, 19%, 89%, 1)",
-            "lowContrast": "hsla(217, 18%, 45%, 1)",
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
           },
-          "subtle": {
-            "highContrast": "hsla(220, 30%, 96%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
-      },
-      "white": {
-        "action": {
-          "background": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-            "tertiary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(210, 6%, 94%, 0.09)",
-              "disabled": "hsla(210, 6%, 94%, 0.09)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
+        "text": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "border": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(214, 15%, 18%, 0)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(214, 15%, 18%, 0)",
-              "hover": "hsla(214, 15%, 18%, 0)",
-            },
+          "onCloud": {
+            "onIntense": "hsla(219, 95%, 85%, 1)",
+            "onSubtle": "hsla(227, 71%, 51%, 1)",
           },
-          "icon": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(268, 100%, 79%, 1)",
-            },
-            "primary": {
-              "active": "hsla(218, 89%, 51%, 1)",
-              "default": "hsla(218, 89%, 51%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(218, 89%, 51%, 1)",
-              "hover": "hsla(218, 89%, 51%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "onSea": {
+            "onIntense": "hsla(150, 59%, 82%, 1)",
+            "onSubtle": "hsla(155, 100%, 21%, 1)",
           },
-          "text": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(268, 100%, 79%, 1)",
-            },
-            "primary": {
-              "active": "hsla(218, 89%, 51%, 1)",
-              "default": "hsla(218, 89%, 51%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(218, 89%, 51%, 1)",
-              "hover": "hsla(218, 89%, 51%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "primary": {
+            "normal": "hsla(227, 100%, 59%, 1)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
       },
+      "transparent": "hsla(0, 0%, 100%, 0)",
     },
   },
   "elevation": {
     "onDark": {
       "highRaised": {
-        "elevation": 26,
-        "shadowColor": "hsla(231, 67%, 10%, 0.64)",
+        "elevation": 24,
+        "shadowColor": "hsla(217, 56%, 17%, 0.8)",
         "shadowOffset": {
-          "height": 18,
+          "height": 6,
           "width": 0,
         },
-        "shadowOpacity": 0.2,
-        "shadowRadius": 12,
+        "shadowOpacity": 0.16,
+        "shadowRadius": 14,
       },
       "lowRaised": {
-        "elevation": 4,
-        "shadowColor": "hsla(231, 67%, 10%, 0.64)",
+        "elevation": 8,
+        "shadowColor": "hsla(217, 56%, 17%, 0.4)",
         "shadowOffset": {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.12,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.2,
+        "shadowRadius": 4,
       },
       "midRaised": {
-        "elevation": 12,
-        "shadowColor": "hsla(231, 67%, 10%, 0.64)",
+        "elevation": 16,
+        "shadowColor": "hsla(217, 56%, 17%, 0.55)",
         "shadowOffset": {
-          "height": 8,
+          "height": 4,
           "width": 0,
         },
-        "shadowOpacity": 0.1,
-        "shadowRadius": 4,
+        "shadowOpacity": 0.17,
+        "shadowRadius": 6,
       },
       "none": {
         "elevation": 0,
@@ -6624,34 +2312,34 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
     },
     "onLight": {
       "highRaised": {
-        "elevation": 26,
-        "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+        "elevation": 24,
+        "shadowColor": "hsla(217, 56%, 17%, 0.8)",
         "shadowOffset": {
-          "height": 18,
+          "height": 6,
           "width": 0,
         },
-        "shadowOpacity": 0.2,
-        "shadowRadius": 12,
+        "shadowOpacity": 0.16,
+        "shadowRadius": 14,
       },
       "lowRaised": {
-        "elevation": 4,
-        "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+        "elevation": 8,
+        "shadowColor": "hsla(217, 56%, 17%, 0.4)",
         "shadowOffset": {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.12,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.2,
+        "shadowRadius": 4,
       },
       "midRaised": {
-        "elevation": 12,
-        "shadowColor": "hsla(217, 56%, 17%, 0.64)",
+        "elevation": 16,
+        "shadowColor": "hsla(217, 56%, 17%, 0.55)",
         "shadowOffset": {
-          "height": 8,
+          "height": 4,
           "width": 0,
         },
-        "shadowOpacity": 0.1,
-        "shadowRadius": 4,
+        "shadowOpacity": 0.17,
+        "shadowRadius": 6,
       },
       "none": {
         "elevation": 0,
@@ -6721,101 +2409,105 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
     "onDesktop": {
       "fonts": {
         "family": {
-          "code": "Courier",
-          "text": "Lato",
+          "code": "Menlo",
+          "heading": "TASA Orbiter Display",
+          "text": "Inter",
         },
         "size": {
-          "10": 9,
           "100": 14,
-          "1000": 40,
-          "1100": 48,
-          "1200": 56,
-          "1300": 64,
-          "1600": 88,
+          "1000": 64,
+          "1100": 72,
           "200": 16,
           "25": 10,
           "300": 18,
           "400": 20,
           "50": 11,
-          "500": 22,
-          "600": 24,
-          "700": 28,
+          "500": 24,
+          "600": 32,
+          "700": 40,
           "75": 12,
-          "800": 32,
-          "900": 36,
+          "800": 48,
+          "900": 56,
         },
         "weight": {
           "bold": 700,
+          "medium": 500,
           "regular": 400,
+          "semibold": 600,
         },
       },
+      "letterSpacings": {
+        "100": 0,
+        "50": -1,
+      },
       "lineHeights": {
         "0": 0,
         "100": 20,
-        "1000": 64,
-        "1100": 72,
-        "1500": 104,
+        "1000": 70,
+        "1100": 78,
         "200": 24,
         "25": 14,
         "300": 24,
-        "400": 28,
+        "400": 26,
         "50": 16,
         "500": 32,
-        "600": 40,
-        "700": 40,
+        "600": 38,
+        "700": 46,
         "75": 18,
-        "800": 48,
-        "900": 56,
+        "800": 56,
+        "900": 64,
       },
     },
     "onMobile": {
       "fonts": {
         "family": {
-          "code": "Courier",
-          "text": "Lato",
+          "code": "Menlo",
+          "heading": "TASA Orbiter Display",
+          "text": "Inter",
         },
         "size": {
-          "10": 9,
           "100": 14,
-          "1000": 32,
+          "1000": 38,
           "1100": 40,
-          "1200": 48,
-          "1300": 56,
-          "1600": 64,
           "200": 16,
           "25": 10,
           "300": 16,
           "400": 18,
           "50": 11,
           "500": 20,
-          "600": 20,
-          "700": 24,
+          "600": 24,
+          "700": 32,
           "75": 12,
-          "800": 28,
-          "900": 32,
+          "800": 34,
+          "900": 36,
         },
         "weight": {
           "bold": 700,
+          "medium": 500,
           "regular": 400,
+          "semibold": 600,
         },
       },
+      "letterSpacings": {
+        "100": 0,
+        "50": -1,
+      },
       "lineHeights": {
         "0": 0,
         "100": 20,
-        "1000": 56,
-        "1100": 64,
-        "1500": 72,
-        "200": 20,
+        "1000": 46,
+        "1100": 48,
+        "200": 24,
         "25": 14,
-        "300": 24,
+        "300": 22,
         "400": 24,
         "50": 16,
-        "500": 28,
+        "500": 26,
         "600": 32,
-        "700": 40,
+        "700": 38,
         "75": 18,
         "800": 40,
-        "900": 48,
+        "900": 42,
       },
     },
   },
@@ -6850,24 +2542,22 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
       }
     }
     accessible={true}
-    activeBackgroundColor="hsl(57, 100%, 42%)"
-    activeBorderColor="hsl(57, 100%, 42%)"
-    borderRadius="2px"
-    borderWidth="1px"
+    borderRadius="4px"
+    borderWidth="0px"
     buttonPaddingBottom="0px"
     buttonPaddingLeft="20px"
     buttonPaddingRight="20px"
     buttonPaddingTop="0px"
     collapsable={false}
     data-blade-component="button"
-    defaultBackgroundColor="hsl(58, 100%, 54%)"
-    defaultBorderColor="hsl(58, 100%, 54%)"
+    defaultBackgroundColor="hsl(57, 100%, 52%)"
+    defaultBorderColor="hsl(57, 100%, 52%)"
     focusBackgroundColor="hsl(57, 100%, 47%)"
     focusBorderColor="hsl(57, 100%, 47%)"
-    focusRingColor="hsla(57, 100%, 52%, 0.32)"
+    focusRingColor="hsla(227, 100%, 59%, 0.32)"
     focusable={true}
-    hoverBackgroundColor="hsl(57, 100%, 52%)"
-    hoverBorderColor="hsl(57, 100%, 52%)"
+    hoverBackgroundColor="hsl(57, 100%, 47%)"
+    hoverBorderColor="hsl(57, 100%, 47%)"
     isFullWidth={false}
     isLoading={false}
     minHeight="36px"
@@ -6888,15 +2578,16 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
         {
           "alignItems": "center",
           "alignSelf": "center",
-          "backgroundColor": "hsl(58, 100%, 54%)",
-          "borderColor": "hsl(58, 100%, 54%)",
-          "borderRadius": 2,
+          "backgroundColor": "hsl(57, 100%, 52%)",
+          "borderColor": "hsl(57, 100%, 52%)",
+          "borderRadius": 4,
           "borderStyle": "solid",
-          "borderWidth": 1,
+          "borderWidth": 0,
           "cursor": "pointer",
           "display": "flex",
           "justifyContent": "center",
           "minHeight": 36,
+          "overflow": "hidden",
           "paddingBottom": 0,
           "paddingLeft": 20,
           "paddingRight": 20,
@@ -6907,8 +2598,8 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
           "width": "auto",
         },
         {
-          "backgroundColor": "hsl(58, 100%, 54%)",
-          "borderColor": "hsl(58, 100%, 54%)",
+          "backgroundColor": "hsl(57, 100%, 52%)",
+          "borderColor": "hsl(57, 100%, 52%)",
         },
       ]
     }
@@ -6931,28 +2622,31 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
             "flexGrow": 1,
             "flexShrink": 1,
             "justifyContent": "center",
+            "zIndex": 1,
           },
           {
             "opacity": 1,
           },
         ]
       }
+      zIndex={1}
     >
       <Text
         accessible={true}
-        color="action.text.primary.default"
+        color="interactive.text.onPrimary.normal"
         data-blade-component="base-text"
         fontSize={100}
-        fontWeight="bold"
+        fontWeight="medium"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsl(219, 41%, 19%)",
-              "fontFamily": "Lato",
+              "color": "hsl(0, 0%, 0%)",
+              "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "500",
+              "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
               "marginLeft": 0,
diff --git a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
index 671b5baa24d..4193045d315 100644
--- a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
+++ b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
@@ -4,12 +4,15 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
 {
   "border": {
     "radius": {
+      "2xlarge": 16,
       "large": 8,
       "max": 9999,
       "medium": 4,
       "none": 0,
       "round": "50%",
       "small": 2,
+      "xlarge": 12,
+      "xsmall": 1,
     },
     "width": {
       "none": 0,
@@ -29,3079 +32,917 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
   },
   "colors": {
     "onDark": {
-      "action": {
+      "feedback": {
         "background": {
-          "primary": {
-            "active": "hsl(332, 100%, 20%)",
-            "default": "hsl(332, 81%, 32%)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsl(332, 100%, 23%)",
-            "hover": "hsl(332, 100%, 26%)",
-          },
-          "secondary": {
-            "active": "hsla(332, 100%, 26%, 0.32)",
-            "default": "hsla(332, 100%, 26%, 0)",
-            "disabled": "hsla(220, 11%, 84%, 0)",
-            "focus": "hsla(332, 100%, 26%, 0.18)",
-            "hover": "hsla(332, 100%, 26%, 0.09)",
-          },
-          "tertiary": {
-            "active": "hsla(216, 15%, 54%, 0.32)",
-            "default": "hsla(220, 11%, 84%, 0.09)",
-            "disabled": "hsla(220, 11%, 84%, 0.09)",
-            "focus": "hsla(220, 11%, 84%, 0.32)",
-            "hover": "hsla(220, 11%, 84%, 0.18)",
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.18)",
           },
-        },
-        "border": {
-          "primary": {
-            "active": "hsl(332, 100%, 20%)",
-            "default": "hsl(332, 81%, 32%)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsl(332, 100%, 23%)",
-            "hover": "hsl(332, 100%, 26%)",
-          },
-          "secondary": {
-            "active": "hsl(332, 69%, 37%)",
-            "default": "hsl(332, 69%, 37%)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsl(332, 69%, 37%)",
-            "hover": "hsl(332, 69%, 37%)",
-          },
-          "tertiary": {
-            "active": "hsla(219, 12%, 45%, 1)",
-            "default": "hsla(220, 11%, 84%, 0)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsla(219, 12%, 45%, 1)",
-            "hover": "hsla(219, 12%, 45%, 1)",
+          "negative": {
+            "intense": "hsla(4, 77%, 40%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.18)",
           },
-        },
-        "icon": {
-          "link": {
-            "active": "hsla(213, 89%, 56%, 1)",
-            "default": "hsla(215, 91%, 74%, 1)",
-            "disabled": "hsla(219, 12%, 45%, 1)",
-            "focus": "hsla(213, 89%, 56%, 1)",
-            "hover": "hsla(213, 91%, 66%, 1)",
-            "visited": "hsla(267, 100%, 83%, 1)",
+          "neutral": {
+            "intense": "hsla(214, 40%, 92%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "primary": {
-            "active": "hsl(0, 0%, 99%)",
-            "default": "hsl(0, 0%, 99%)",
-            "disabled": "hsla(219, 10%, 60%, 1)",
-            "focus": "hsl(0, 0%, 99%)",
-            "hover": "hsl(0, 0%, 99%)",
-          },
-          "secondary": {
-            "active": "hsla(0, 0%, 99%, 1)",
-            "default": "hsla(0, 0%, 99%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(0, 0%, 99%, 1)",
-            "hover": "hsla(0, 0%, 99%, 1)",
-          },
-          "tertiary": {
-            "active": "hsla(218, 11%, 84%, 1)",
-            "default": "hsla(218, 11%, 84%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(218, 11%, 84%, 1)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.18)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.18)",
           },
         },
-        "text": {
-          "link": {
-            "active": "hsla(213, 89%, 56%, 1)",
-            "default": "hsla(215, 91%, 74%, 1)",
-            "disabled": "hsla(219, 12%, 45%, 1)",
-            "focus": "hsla(213, 89%, 56%, 1)",
-            "hover": "hsla(213, 91%, 66%, 1)",
-            "visited": "hsla(267, 100%, 83%, 1)",
+        "border": {
+          "information": {
+            "intense": "hsla(200, 84%, 29%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.32)",
           },
-          "primary": {
-            "active": "hsl(0, 0%, 99%)",
-            "default": "hsl(0, 0%, 99%)",
-            "disabled": "hsla(219, 10%, 60%, 1)",
-            "focus": "hsl(0, 0%, 99%)",
-            "hover": "hsl(0, 0%, 99%)",
-          },
-          "secondary": {
-            "active": "hsla(0, 0%, 99%, 1)",
-            "default": "hsla(0, 0%, 99%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(0, 0%, 99%, 1)",
-            "hover": "hsla(0, 0%, 99%, 1)",
-          },
-          "tertiary": {
-            "active": "hsla(218, 11%, 84%, 1)",
-            "default": "hsla(218, 11%, 84%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(218, 11%, 84%, 1)",
-            "hover": "hsla(218, 11%, 84%, 1)",
+          "negative": {
+            "intense": "hsla(0, 83%, 33%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.32)",
           },
-        },
-      },
-      "badge": {
-        "background": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.18)",
+          "neutral": {
+            "intense": "hsla(214, 28%, 84%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-        },
-        "border": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.32)",
+          "notice": {
+            "intense": "hsla(25, 82%, 35%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.32)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 21%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.32)",
           },
         },
         "icon": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(213, 91%, 66%, 1)",
+          "information": {
+            "intense": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(201, 92%, 95%, 1)",
           },
-        },
-        "text": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(213, 91%, 66%, 1)",
+          "negative": {
+            "intense": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(0, 100%, 98%, 1)",
           },
-        },
-      },
-      "brand": {
-        "gray": {
-          "200": {
-            "highContrast": "hsla(220, 23%, 29%, 1)",
-            "lowContrast": "hsl(0, 0%, 99%)",
+          "neutral": {
+            "intense": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 1)",
           },
-          "300": {
-            "highContrast": "hsla(220, 16%, 37%, 1)",
-            "lowContrast": "hsla(220, 35%, 22%, 1)",
+          "notice": {
+            "intense": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(24, 100%, 96%, 1)",
           },
-          "400": {
-            "highContrast": "hsla(219, 12%, 45%, 1)",
-            "lowContrast": "hsla(220, 23%, 29%, 1)",
+          "positive": {
+            "intense": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(152, 60%, 95%, 1)",
           },
-          "500": {
-            "highContrast": "hsla(219, 10%, 60%, 1)",
-            "lowContrast": "hsla(220, 16%, 37%, 1)",
+        },
+        "text": {
+          "information": {
+            "intense": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(201, 92%, 95%, 1)",
           },
-          "600": {
-            "highContrast": "hsla(218, 11%, 76%, 1)",
-            "lowContrast": "hsla(219, 12%, 45%, 1)",
+          "negative": {
+            "intense": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(0, 100%, 98%, 1)",
           },
-          "700": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 76%, 1)",
+          "neutral": {
+            "intense": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 1)",
           },
-          "a100": {
-            "highContrast": "hsla(217, 11%, 76%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+          "notice": {
+            "intense": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(24, 100%, 96%, 1)",
           },
-          "a50": {
-            "highContrast": "hsla(217, 11%, 76%, 0.09)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.09)",
+          "positive": {
+            "intense": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(152, 60%, 95%, 1)",
           },
         },
-        "primary": {
-          "300": "hsla(332, 100%, 26%, 0.18)",
-          "400": "hsla(332, 100%, 26%, 0.32)",
-          "500": "hsl(332, 69%, 37%)",
-          "600": "hsl(332, 81%, 32%)",
-          "700": "hsl(332, 100%, 26%)",
-          "800": "hsl(332, 100%, 17%)",
-        },
-        "secondary": {
-          "500": "hsla(149, 99%, 35%, 1)",
-        },
       },
-      "feedback": {
+      "interactive": {
         "background": {
+          "gray": {
+            "default": "hsla(214, 40%, 92%, 0.09)",
+            "disabled": "hsla(214, 40%, 92%, 0.09)",
+            "faded": "hsla(214, 40%, 92%, 0.12)",
+            "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 0.18)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.18)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.24)",
+            "fadedHighlighted": "hsla(200, 84%, 44%, 0.32)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.18)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.24)",
+            "fadedHighlighted": "hsla(4, 74%, 49%, 0.32)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(220, 11%, 84%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+            "default": "hsla(210, 40%, 98%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.18)",
+            "faded": "hsla(214, 40%, 92%, 0.12)",
+            "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(40, 90%, 32%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.18)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.24)",
+            "fadedHighlighted": "hsla(25, 90%, 48%, 0.32)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.18)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.24)",
+            "fadedHighlighted": "hsla(150, 100%, 32%, 0.32)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(332, 100%, 26%)",
+            "disabled": "hsla(332, 100%, 26%, 0.12)",
+            "faded": "hsla(332, 100%, 26%, 0.12)",
+            "fadedHighlighted": "hsla(332, 100%, 26%, 0.09)",
+            "highlighted": "hsl(332, 100%, 23%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.56)",
+            "faded": "hsla(0, 0%, 0%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.18)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "border": {
+          "gray": {
+            "default": "hsla(211, 23%, 45%, 1)",
+            "disabled": "hsla(211, 29%, 26%, 1)",
+            "faded": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(211, 23%, 45%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.32)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.32)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.32)",
+            "default": "hsla(214, 40%, 92%, 1)",
+            "disabled": "hsla(211, 23%, 45%, 1)",
+            "faded": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(40, 90%, 32%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.32)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.32)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(332, 100%, 26%)",
+            "disabled": "hsla(332, 100%, 26%, 0.12)",
+            "faded": "hsla(332, 100%, 26%, 0.12)",
+            "highlighted": "hsl(332, 100%, 23%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "faded": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "icon": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(187, 68%, 52%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 84%, 37%, 1)",
+            "normal": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(198, 90%, 52%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(6, 100%, 75%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 77%, 40%, 1)",
+            "normal": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(34, 93%, 65%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 85%, 42%, 1)",
+            "normal": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(25, 100%, 55%, 1)",
           },
-          "positive": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(149, 99%, 35%, 1)",
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 100%)",
+            "muted": "hsl(0, 0%, 100%)",
+            "normal": "hsl(0, 0%, 100%)",
+            "subtle": "hsl(0, 0%, 100%)",
           },
-        },
-        "information": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(195, 100%, 31%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(187, 68%, 52%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(187, 68%, 52%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-            },
+          "positive": {
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 100%, 27%, 1)",
+            "normal": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(150, 100%, 37%, 1)",
           },
-        },
-        "negative": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(7, 72%, 40%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-            },
+          "primary": {
+            "disabled": "hsla(240, 20%, 99%, 1)",
+            "muted": "hsla(240, 20%, 99%, 1)",
+            "normal": "hsla(240, 20%, 99%, 1)",
+            "subtle": "hsla(240, 20%, 99%, 1)",
           },
-        },
-        "neutral": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(215, 12%, 92%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(215, 12%, 92%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 12%, 45%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(218, 11%, 76%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 12%, 45%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(218, 11%, 76%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-            },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
           },
-        },
-        "notice": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(42, 74%, 20%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(42, 74%, 20%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(34, 93%, 65%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(34, 93%, 65%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-            },
-          },
-        },
-        "positive": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(163, 100%, 22%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "text": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(187, 68%, 52%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 84%, 37%, 1)",
+            "normal": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(198, 90%, 52%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(6, 100%, 75%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 77%, 40%, 1)",
+            "normal": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(34, 93%, 65%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 85%, 42%, 1)",
+            "normal": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(25, 100%, 55%, 1)",
+          },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 100%)",
+            "muted": "hsl(0, 0%, 100%)",
+            "normal": "hsl(0, 0%, 100%)",
+            "subtle": "hsl(0, 0%, 100%)",
           },
           "positive": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(149, 99%, 35%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 100%, 27%, 1)",
+            "normal": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(150, 100%, 37%, 1)",
+          },
+          "primary": {
+            "disabled": "hsla(240, 20%, 99%, 1)",
+            "muted": "hsla(240, 20%, 99%, 1)",
+            "normal": "hsla(240, 20%, 99%, 1)",
+            "subtle": "hsla(240, 20%, 99%, 1)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
       },
-      "static": {
-        "white": "hsla(0, 0%, 100%, 1)",
+      "overlay": {
+        "background": {
+          "moderate": "hsla(214, 40%, 92%, 0.32)",
+          "subtle": "hsla(0, 0%, 0%, 0.8)",
+        },
       },
-      "surface": {
-        "action": {
-          "icon": {
-            "active": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-            "default": {
-              "highContrast": "hsla(220, 11%, 84%, 0.32)",
-              "lowContrast": "hsla(219, 12%, 45%, 1)",
-            },
-            "disabled": {
-              "highContrast": "hsla(220, 11%, 84%, 0.18)",
-              "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-            },
-            "focus": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-            "hover": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-          },
+      "popup": {
+        "background": {
+          "intense": "hsla(211, 29%, 26%, 1)",
+          "subtle": "hsla(211, 29%, 26%, 1)",
+        },
+        "border": {
+          "intense": "hsla(214, 40%, 92%, 0.18)",
+          "subtle": "hsla(214, 40%, 92%, 0.18)",
         },
+      },
+      "surface": {
         "background": {
-          "level1": {
-            "highContrast": "hsla(219, 41%, 19%, 1)",
-            "lowContrast": "hsla(218, 67%, 10%, 1)",
+          "cloud": {
+            "intense": "hsla(201, 39%, 93%, 1)",
+            "subtle": "hsla(200, 91%, 13%, 1)",
           },
-          "level2": {
-            "highContrast": "hsla(220, 35%, 22%, 1)",
-            "lowContrast": "hsla(218, 54%, 15%, 1)",
+          "gray": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "moderate": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 53%, 10%, 1)",
           },
-          "level3": {
-            "highContrast": "hsla(220, 23%, 29%, 1)",
-            "lowContrast": "hsla(218, 49%, 17%, 1)",
+          "primary": {
+            "intense": "hsl(332, 100%, 26%)",
+            "subtle": "hsl(332, 52%, 49%)",
+          },
+          "sea": {
+            "intense": "hsla(180, 42%, 92%, 1)",
+            "subtle": "hsla(180, 91%, 13%, 1)",
           },
         },
         "border": {
-          "normal": {
-            "highContrast": "hsla(217, 11%, 76%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+          "gray": {
+            "muted": "hsla(214, 40%, 92%, 0.18)",
+            "normal": "hsla(211, 20%, 52%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(217, 11%, 76%, 0.09)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.09)",
+          "primary": {
+            "muted": "hsla(227, 100%, 59%, 0.32)",
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
         },
-        "overlay": {
-          "background": {
-            "400": "hsla(221, 16%, 37%, 0.64)",
-            "800": "hsla(231, 11%, 12%, 0.72)",
+        "icon": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
+          "onCloud": {
+            "onIntense": "hsla(223, 100%, 65%, 1)",
+            "onSubtle": "hsla(220, 100%, 73%, 1)",
+          },
+          "onSea": {
+            "onIntense": "hsla(155, 100%, 31%, 1)",
+            "onSubtle": "hsla(150, 59%, 55%, 1)",
+          },
+          "primary": {
+            "normal": "hsl(332, 100%, 26%)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
-        },
-        "popup": {
-          "background": "hsla(220, 35%, 22%, 1)",
         },
         "text": {
-          "muted": {
-            "highContrast": "hsla(218, 11%, 76%, 1)",
-            "lowContrast": "hsla(218, 11%, 76%, 1)",
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-          "normal": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(0, 0%, 99%, 1)",
+          "onCloud": {
+            "onIntense": "hsla(227, 71%, 51%, 1)",
+            "onSubtle": "hsla(219, 95%, 85%, 1)",
           },
-          "placeholder": {
-            "highContrast": "hsla(219, 10%, 60%, 1)",
-            "lowContrast": "hsla(219, 10%, 60%, 1)",
+          "onSea": {
+            "onIntense": "hsla(155, 100%, 21%, 1)",
+            "onSubtle": "hsla(150, 59%, 82%, 1)",
           },
-          "subdued": {
-            "highContrast": "hsla(218, 11%, 84%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+          "primary": {
+            "normal": "hsla(220, 100%, 73%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(215, 12%, 92%, 1)",
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
           },
-        },
-      },
-      "white": {
-        "action": {
-          "background": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-            "tertiary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(210, 6%, 94%, 0.09)",
-              "disabled": "hsla(210, 6%, 94%, 0.09)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-          },
-          "border": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(214, 15%, 18%, 0)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(214, 15%, 18%, 0)",
-              "hover": "hsla(214, 15%, 18%, 0)",
-            },
-          },
-          "icon": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(267, 100%, 83%, 1)",
-            },
-            "primary": {
-              "active": "hsla(213, 89%, 56%, 1)",
-              "default": "hsla(213, 89%, 56%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(213, 89%, 56%, 1)",
-              "hover": "hsla(213, 89%, 56%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-          },
-          "text": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(267, 100%, 83%, 1)",
-            },
-            "primary": {
-              "active": "hsla(213, 89%, 56%, 1)",
-              "default": "hsla(213, 89%, 56%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(213, 89%, 56%, 1)",
-              "hover": "hsla(213, 89%, 56%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
       },
+      "transparent": "hsla(0, 0%, 100%, 0)",
     },
     "onLight": {
-      "action": {
+      "feedback": {
         "background": {
-          "primary": {
-            "active": "hsl(332, 100%, 17%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsl(332, 100%, 20%)",
-            "hover": "hsl(332, 100%, 23%)",
-          },
-          "secondary": {
-            "active": "hsla(332, 100%, 26%, 0.32)",
-            "default": "hsla(332, 100%, 26%, 0)",
-            "disabled": "hsla(216, 44%, 23%, 0)",
-            "focus": "hsla(332, 100%, 26%, 0.18)",
-            "hover": "hsla(332, 100%, 26%, 0.09)",
-          },
-          "tertiary": {
-            "active": "hsla(214, 21%, 94%, 1)",
-            "default": "hsla(0, 0%, 100%, 1)",
-            "disabled": "hsla(216, 15%, 54%, 0.09)",
-            "focus": "hsla(220, 30%, 96%, 1)",
-            "hover": "hsla(220, 27%, 98%, 1)",
-          },
-        },
-        "border": {
-          "primary": {
-            "active": "hsl(332, 100%, 17%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsl(332, 100%, 20%)",
-            "hover": "hsl(332, 100%, 23%)",
-          },
-          "secondary": {
-            "active": "hsl(332, 100%, 26%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsl(332, 100%, 26%)",
-            "hover": "hsl(332, 100%, 26%)",
+          "information": {
+            "intense": "hsla(200, 84%, 44%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.09)",
           },
-          "tertiary": {
-            "active": "hsla(216, 19%, 89%, 1)",
-            "default": "hsla(216, 19%, 89%, 1)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsla(216, 19%, 89%, 1)",
-            "hover": "hsla(216, 19%, 89%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.09)",
           },
-        },
-        "icon": {
-          "link": {
-            "active": "hsla(227, 100%, 45%, 1)",
-            "default": "hsla(218, 89%, 51%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(227, 100%, 45%, 1)",
-            "hover": "hsla(223, 95%, 48%, 1)",
-            "visited": "hsla(268, 100%, 79%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 29%, 26%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 0.09)",
           },
-          "primary": {
-            "active": "hsl(0, 0%, 100%)",
-            "default": "hsl(0, 0%, 100%)",
-            "disabled": "hsla(216, 16%, 60%, 1)",
-            "focus": "hsl(0, 0%, 100%)",
-            "hover": "hsl(0, 0%, 100%)",
-          },
-          "secondary": {
-            "active": "hsl(332, 100%, 26%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsl(332, 100%, 26%)",
-            "hover": "hsl(332, 100%, 26%)",
+          "notice": {
+            "intense": "hsla(25, 90%, 48%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.09)",
           },
-          "tertiary": {
-            "active": "hsla(216, 33%, 29%, 1)",
-            "default": "hsla(216, 33%, 29%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(216, 33%, 29%, 1)",
+          "positive": {
+            "intense": "hsla(150, 100%, 32%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.09)",
           },
         },
-        "text": {
-          "link": {
-            "active": "hsla(227, 100%, 45%, 1)",
-            "default": "hsla(218, 89%, 51%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(227, 100%, 45%, 1)",
-            "hover": "hsla(223, 95%, 48%, 1)",
-            "visited": "hsla(268, 100%, 79%, 1)",
+        "border": {
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.18)",
           },
-          "primary": {
-            "active": "hsl(0, 0%, 100%)",
-            "default": "hsl(0, 0%, 100%)",
-            "disabled": "hsla(216, 16%, 60%, 1)",
-            "focus": "hsl(0, 0%, 100%)",
-            "hover": "hsl(0, 0%, 100%)",
-          },
-          "secondary": {
-            "active": "hsl(332, 100%, 26%)",
-            "default": "hsl(332, 100%, 26%)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsl(332, 100%, 26%)",
-            "hover": "hsl(332, 100%, 26%)",
+          "negative": {
+            "intense": "hsla(4, 77%, 40%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.18)",
           },
-          "tertiary": {
-            "active": "hsla(216, 33%, 29%, 1)",
-            "default": "hsla(216, 33%, 29%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(216, 33%, 29%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 0.18)",
           },
-        },
-      },
-      "badge": {
-        "background": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.09)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.18)",
           },
-        },
-        "border": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.32)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.18)",
           },
         },
         "icon": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 1)",
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 88%, 90%, 1)",
           },
-        },
-        "text": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 93%, 94%, 1)",
           },
-        },
-      },
-      "brand": {
-        "gray": {
-          "200": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsl(0, 0%, 100%)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 24%, 65%, 1)",
           },
-          "300": {
-            "highContrast": "hsla(216, 27%, 36%, 1)",
-            "lowContrast": "hsla(220, 30%, 96%, 1)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 100%, 90%, 1)",
           },
-          "400": {
-            "highContrast": "hsla(217, 18%, 45%, 1)",
-            "lowContrast": "hsla(216, 19%, 89%, 1)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(151, 57%, 91%, 1)",
           },
-          "500": {
-            "highContrast": "hsla(216, 15%, 54%, 1)",
-            "lowContrast": "hsla(214, 18%, 69%, 1)",
+        },
+        "text": {
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 88%, 90%, 1)",
           },
-          "600": {
-            "highContrast": "hsla(214, 18%, 69%, 1)",
-            "lowContrast": "hsla(216, 16%, 60%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 93%, 94%, 1)",
           },
-          "700": {
-            "highContrast": "hsla(220, 30%, 96%, 1)",
-            "lowContrast": "hsla(217, 18%, 45%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 24%, 65%, 1)",
           },
-          "a100": {
-            "highContrast": "hsla(214, 21%, 94%, 0.18)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.18)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 100%, 90%, 1)",
           },
-          "a50": {
-            "highContrast": "hsla(214, 21%, 94%, 0.09)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(151, 57%, 91%, 1)",
           },
         },
-        "primary": {
-          "300": "hsla(332, 100%, 26%, 0.09)",
-          "400": "hsla(332, 100%, 26%, 0.18)",
-          "500": "hsl(332, 100%, 26%)",
-          "600": "hsl(332, 100%, 23%)",
-          "700": "hsl(332, 100%, 20%)",
-          "800": "hsl(332, 100%, 14%)",
-        },
-        "secondary": {
-          "500": "hsla(149, 99%, 35%, 1)",
-        },
       },
-      "feedback": {
+      "interactive": {
         "background": {
+          "gray": {
+            "default": "hsla(211, 20%, 52%, 0.09)",
+            "disabled": "hsla(211, 20%, 52%, 0.09)",
+            "faded": "hsla(211, 20%, 52%, 0.12)",
+            "fadedHighlighted": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 20%, 52%, 0.18)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.09)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.09)",
+            "faded": "hsla(200, 84%, 44%, 0.09)",
+            "fadedHighlighted": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.09)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.09)",
+            "faded": "hsla(4, 74%, 49%, 0.09)",
+            "fadedHighlighted": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+            "default": "hsla(211, 29%, 26%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.18)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "fadedHighlighted": "hsla(211, 20%, 52%, 0.32)",
+            "highlighted": "hsla(211, 33%, 21%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(38, 97%, 38%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.09)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.09)",
+            "faded": "hsla(25, 90%, 48%, 0.09)",
+            "fadedHighlighted": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.09)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.09)",
+            "faded": "hsla(150, 100%, 32%, 0.09)",
+            "fadedHighlighted": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(332, 100%, 26%)",
+            "disabled": "hsla(332, 100%, 26%, 0.12)",
+            "faded": "hsla(332, 100%, 26%, 0.12)",
+            "fadedHighlighted": "hsla(332, 100%, 26%, 0.09)",
+            "highlighted": "hsl(332, 100%, 23%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.56)",
+            "faded": "hsla(0, 0%, 0%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.18)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "border": {
+          "gray": {
+            "default": "hsla(211, 27%, 76%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 1)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 27%, 76%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.32)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.32)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.32)",
+            "default": "hsla(211, 20%, 52%, 1)",
+            "disabled": "hsla(214, 28%, 84%, 1)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 20%, 52%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(38, 97%, 38%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.32)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.32)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(332, 100%, 26%)",
+            "disabled": "hsla(332, 100%, 26%, 0.12)",
+            "faded": "hsla(332, 100%, 26%, 0.12)",
+            "highlighted": "hsl(332, 100%, 23%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "faded": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "icon": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 90%, 65%, 1)",
+            "normal": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(8, 73%, 47%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 93%, 68%, 1)",
+            "normal": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(38, 97%, 38%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 100%, 63%, 1)",
+            "normal": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 1)",
           },
-          "positive": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(160, 100%, 26%, 1)",
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 100%)",
+            "muted": "hsl(0, 0%, 100%)",
+            "normal": "hsl(0, 0%, 100%)",
+            "subtle": "hsl(0, 0%, 100%)",
           },
-        },
-        "information": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(195, 100%, 31%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-          },
-        },
-        "negative": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(7, 72%, 40%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-            },
+          "positive": {
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 59%, 55%, 1)",
+            "normal": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 1)",
           },
-        },
-        "neutral": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(217, 56%, 17%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(216, 33%, 29%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 33%, 29%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(217, 56%, 17%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(216, 44%, 23%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 21%, 94%, 1)",
-                  "lowContrast": "hsla(217, 18%, 45%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 21%, 94%, 1)",
-                  "lowContrast": "hsla(217, 18%, 45%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-            },
+          "primary": {
+            "disabled": "hsl(332, 100%, 26%)",
+            "muted": "hsl(332, 100%, 26%)",
+            "normal": "hsl(332, 100%, 26%)",
+            "subtle": "hsl(332, 100%, 26%)",
           },
-        },
-        "notice": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(38, 97%, 38%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(38, 97%, 38%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-            },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
           },
-        },
-        "positive": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(163, 100%, 22%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(121, 65%, 71%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(121, 65%, 71%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "text": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 90%, 65%, 1)",
+            "normal": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(8, 73%, 47%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 93%, 68%, 1)",
+            "normal": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(38, 97%, 38%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 100%, 63%, 1)",
+            "normal": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 1)",
+          },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 100%)",
+            "muted": "hsl(0, 0%, 100%)",
+            "normal": "hsl(0, 0%, 100%)",
+            "subtle": "hsl(0, 0%, 100%)",
           },
           "positive": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(160, 100%, 26%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 59%, 55%, 1)",
+            "normal": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 1)",
+          },
+          "primary": {
+            "disabled": "hsl(332, 100%, 26%)",
+            "muted": "hsl(332, 100%, 26%)",
+            "normal": "hsl(332, 100%, 26%)",
+            "subtle": "hsl(332, 100%, 26%)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
       },
-      "static": {
-        "white": "hsla(0, 0%, 100%, 1)",
+      "overlay": {
+        "background": {
+          "moderate": "hsla(211, 20%, 52%, 0.32)",
+          "subtle": "hsla(0, 0%, 0%, 0.56)",
+        },
       },
-      "surface": {
-        "action": {
-          "icon": {
-            "active": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-            "default": {
-              "highContrast": "hsla(214, 21%, 94%, 0.32)",
-              "lowContrast": "hsla(214, 18%, 69%, 1)",
-            },
-            "disabled": {
-              "highContrast": "hsla(216, 15%, 54%, 0.18)",
-              "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-            },
-            "focus": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-            "hover": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-          },
+      "popup": {
+        "background": {
+          "intense": "hsla(211, 29%, 26%, 1)",
+          "subtle": "hsla(0, 0%, 100%, 1)",
+        },
+        "border": {
+          "intense": "hsla(211, 26%, 34%, 1)",
+          "subtle": "hsla(211, 20%, 52%, 0.18)",
         },
+      },
+      "surface": {
         "background": {
-          "level1": {
-            "highContrast": "hsla(217, 56%, 17%, 1)",
-            "lowContrast": "hsla(220, 30%, 96%, 1)",
+          "cloud": {
+            "intense": "hsla(200, 61%, 20%, 1)",
+            "subtle": "hsla(198, 39%, 95%, 1)",
           },
-          "level2": {
-            "highContrast": "hsla(216, 44%, 23%, 1)",
-            "lowContrast": "hsla(0, 0%, 100%, 1)",
+          "gray": {
+            "intense": "hsla(0, 0%, 100%, 1)",
+            "moderate": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(213, 47%, 96%, 1)",
           },
-          "level3": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(220, 27%, 98%, 1)",
+          "primary": {
+            "intense": "hsl(332, 100%, 26%)",
+            "subtle": "hsl(332, 52%, 49%)",
+          },
+          "sea": {
+            "intense": "hsla(180, 61%, 20%, 1)",
+            "subtle": "hsla(180, 39%, 95%, 1)",
           },
         },
         "border": {
-          "normal": {
-            "highContrast": "hsla(214, 21%, 94%, 0.18)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.18)",
+          "gray": {
+            "muted": "hsla(211, 20%, 52%, 0.18)",
+            "normal": "hsla(211, 24%, 65%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(214, 21%, 94%, 0.09)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+          "primary": {
+            "muted": "hsla(227, 100%, 59%, 0.18)",
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
         },
-        "overlay": {
-          "background": {
-            "400": "hsla(214, 18%, 69%, 0.64)",
-            "800": "hsla(214, 15%, 18%, 0.64)",
+        "icon": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
+          "onCloud": {
+            "onIntense": "hsla(220, 100%, 73%, 1)",
+            "onSubtle": "hsla(223, 100%, 65%, 1)",
+          },
+          "onSea": {
+            "onIntense": "hsla(150, 59%, 55%, 1)",
+            "onSubtle": "hsla(155, 100%, 31%, 1)",
+          },
+          "primary": {
+            "normal": "hsl(332, 100%, 26%)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
-        },
-        "popup": {
-          "background": "hsla(0, 0%, 100%, 1)",
         },
         "text": {
-          "muted": {
-            "highContrast": "hsla(218, 19%, 81%, 1)",
-            "lowContrast": "hsla(216, 16%, 60%, 1)",
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "normal": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(217, 56%, 17%, 1)",
+          "onCloud": {
+            "onIntense": "hsla(219, 95%, 85%, 1)",
+            "onSubtle": "hsla(227, 71%, 51%, 1)",
           },
-          "placeholder": {
-            "highContrast": "hsla(214, 18%, 69%, 1)",
-            "lowContrast": "hsla(214, 18%, 69%, 1)",
+          "onSea": {
+            "onIntense": "hsla(150, 59%, 82%, 1)",
+            "onSubtle": "hsla(155, 100%, 21%, 1)",
           },
-          "subdued": {
-            "highContrast": "hsla(216, 19%, 89%, 1)",
-            "lowContrast": "hsla(217, 18%, 45%, 1)",
+          "primary": {
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(220, 30%, 96%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
           },
-        },
-      },
-      "white": {
-        "action": {
-          "background": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-            "tertiary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(210, 6%, 94%, 0.09)",
-              "disabled": "hsla(210, 6%, 94%, 0.09)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-          },
-          "border": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(214, 15%, 18%, 0)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(214, 15%, 18%, 0)",
-              "hover": "hsla(214, 15%, 18%, 0)",
-            },
-          },
-          "icon": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(268, 100%, 79%, 1)",
-            },
-            "primary": {
-              "active": "hsla(218, 89%, 51%, 1)",
-              "default": "hsla(218, 89%, 51%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(218, 89%, 51%, 1)",
-              "hover": "hsla(218, 89%, 51%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-          },
-          "text": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(268, 100%, 79%, 1)",
-            },
-            "primary": {
-              "active": "hsla(218, 89%, 51%, 1)",
-              "default": "hsla(218, 89%, 51%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(218, 89%, 51%, 1)",
-              "hover": "hsla(218, 89%, 51%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
       },
+      "transparent": "hsla(0, 0%, 100%, 0)",
     },
   },
   "elevation": {
     "onDark": {
-      "highRaised": "0 24px 48px -12px hsla(231, 67%, 10%, 0.18)",
-      "lowRaised": "0 4px 8px -2px hsla(231, 67%, 10%, 0.10), 0 2px 4px -2px hsla(231, 67%, 10%, 0.06)",
-      "midRaised": "0 12px 16px -4px hsla(231, 67%, 10%, 0.08), 0 4px 6px -2px hsla(231, 67%, 10%, 0.03)",
+      "highRaised": "0px 16px 48px -4px hsla(217, 56%, 17%, 0.18)",
+      "lowRaised": "0px 2px 16px 0px hsla(217, 56%, 17%, 0.10)",
+      "midRaised": "0px 8px 24px 0px hsla(217, 56%, 17%, 0.12)",
       "none": "none",
     },
     "onLight": {
-      "highRaised": "0 24px 48px -12px hsla(217, 56%, 17%, 0.18)",
-      "lowRaised": "0 4px 8px -2px hsla(217, 56%, 17%, 0.1), 0 2px 4px -2px hsla(217, 56%, 17%, 0.06)",
-      "midRaised": "0 12px 16px -4px hsla(217, 56%, 17%, 0.08), 0 4px 6px -2px hsla(217, 56%, 17%, 0.03)",
+      "highRaised": "0px 16px 48px -4px hsla(217, 56%, 17%, 0.18)",
+      "lowRaised": "0px 2px 16px 0px hsla(217, 56%, 17%, 0.10)",
+      "midRaised": "0px 8px 24px 0px hsla(217, 56%, 17%, 0.12)",
       "none": "none",
     },
   },
@@ -3161,101 +1002,105 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
     "onDesktop": {
       "fonts": {
         "family": {
-          "code": "monospace",
-          "text": "Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"",
+          "code": ""Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace",
+          "heading": ""TASA Orbiter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
+          "text": ""Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
         },
         "size": {
-          "10": 9,
           "100": 14,
-          "1000": 40,
-          "1100": 48,
-          "1200": 56,
-          "1300": 64,
-          "1600": 88,
+          "1000": 64,
+          "1100": 72,
           "200": 16,
           "25": 10,
           "300": 18,
           "400": 20,
           "50": 11,
-          "500": 22,
-          "600": 24,
-          "700": 28,
+          "500": 24,
+          "600": 32,
+          "700": 40,
           "75": 12,
-          "800": 32,
-          "900": 36,
+          "800": 48,
+          "900": 56,
         },
         "weight": {
           "bold": 700,
+          "medium": 500,
           "regular": 400,
+          "semibold": 600,
         },
       },
+      "letterSpacings": {
+        "100": 0,
+        "50": -1,
+      },
       "lineHeights": {
         "0": 0,
         "100": 20,
-        "1000": 64,
-        "1100": 72,
-        "1500": 104,
+        "1000": 70,
+        "1100": 78,
         "200": 24,
         "25": 14,
         "300": 24,
-        "400": 28,
+        "400": 26,
         "50": 16,
         "500": 32,
-        "600": 40,
-        "700": 40,
+        "600": 38,
+        "700": 46,
         "75": 18,
-        "800": 48,
-        "900": 56,
+        "800": 56,
+        "900": 64,
       },
     },
     "onMobile": {
       "fonts": {
         "family": {
-          "code": "monospace",
-          "text": "Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"",
+          "code": ""Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace",
+          "heading": ""TASA Orbiter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
+          "text": ""Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
         },
         "size": {
-          "10": 9,
           "100": 14,
-          "1000": 32,
+          "1000": 38,
           "1100": 40,
-          "1200": 48,
-          "1300": 56,
-          "1600": 64,
           "200": 16,
           "25": 10,
           "300": 16,
           "400": 18,
           "50": 11,
           "500": 20,
-          "600": 20,
-          "700": 24,
+          "600": 24,
+          "700": 32,
           "75": 12,
-          "800": 28,
-          "900": 32,
+          "800": 34,
+          "900": 36,
         },
         "weight": {
           "bold": 700,
+          "medium": 500,
           "regular": 400,
+          "semibold": 600,
         },
       },
+      "letterSpacings": {
+        "100": 0,
+        "50": -1,
+      },
       "lineHeights": {
         "0": 0,
         "100": 20,
-        "1000": 56,
-        "1100": 64,
-        "1500": 72,
-        "200": 20,
+        "1000": 46,
+        "1100": 48,
+        "200": 24,
         "25": 14,
-        "300": 24,
+        "300": 22,
         "400": 24,
         "50": 16,
-        "500": 28,
+        "500": 26,
         "600": 32,
-        "700": 40,
+        "700": 38,
         "75": 18,
         "800": 40,
-        "900": 48,
+        "900": 42,
       },
     },
   },
@@ -3269,8 +1114,8 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
   cursor: pointer;
   background-color: hsl(332,100%,26%);
   border-color: hsl(332,100%,26%);
-  border-width: 1px;
-  border-radius: 2px;
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -3286,6 +1131,7 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3305,20 +1151,20 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsl(332,100%,17%);
-  border-color: hsl(332,100%,17%);
+  background-color: hsl(332,100%,23%);
+  border-color: hsl(332,100%,23%);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
-  background-color: hsl(332,100%,20%);
-  border-color: hsl(332,100%,20%);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(332,100%,26%,0.18);
+  background-color: hsl(332,100%,23%);
+  border-color: hsl(332,100%,23%);
+  outline: 1px solid hsl(332,52%,49%);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -3327,13 +1173,17 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
 
 .c3.c3.c3.c3.c3 {
   color: hsl(0,0%,100%);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -3358,6 +1208,7 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
@@ -3388,12 +1239,15 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
 {
   "border": {
     "radius": {
+      "2xlarge": 16,
       "large": 8,
       "max": 9999,
       "medium": 4,
       "none": 0,
       "round": "50%",
       "small": 2,
+      "xlarge": 12,
+      "xsmall": 1,
     },
     "width": {
       "none": 0,
@@ -3413,3079 +1267,917 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
   },
   "colors": {
     "onDark": {
-      "action": {
+      "feedback": {
         "background": {
-          "primary": {
-            "active": "hsl(57, 100%, 42%)",
-            "default": "hsl(58, 100%, 54%)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsl(57, 100%, 47%)",
-            "hover": "hsl(57, 100%, 52%)",
-          },
-          "secondary": {
-            "active": "hsla(57, 100%, 52%, 0.32)",
-            "default": "hsla(57, 100%, 52%, 0)",
-            "disabled": "hsla(220, 11%, 84%, 0)",
-            "focus": "hsla(57, 100%, 52%, 0.18)",
-            "hover": "hsla(57, 100%, 52%, 0.09)",
-          },
-          "tertiary": {
-            "active": "hsla(216, 15%, 54%, 0.32)",
-            "default": "hsla(220, 11%, 84%, 0.09)",
-            "disabled": "hsla(220, 11%, 84%, 0.09)",
-            "focus": "hsla(220, 11%, 84%, 0.32)",
-            "hover": "hsla(220, 11%, 84%, 0.18)",
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.18)",
           },
-        },
-        "border": {
-          "primary": {
-            "active": "hsl(57, 100%, 42%)",
-            "default": "hsl(58, 100%, 54%)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsl(57, 100%, 47%)",
-            "hover": "hsl(57, 100%, 52%)",
-          },
-          "secondary": {
-            "active": "hsl(60, 100%, 55%)",
-            "default": "hsl(60, 100%, 55%)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsl(60, 100%, 55%)",
-            "hover": "hsl(60, 100%, 55%)",
-          },
-          "tertiary": {
-            "active": "hsla(219, 12%, 45%, 1)",
-            "default": "hsla(220, 11%, 84%, 0)",
-            "disabled": "hsla(220, 23%, 29%, 1)",
-            "focus": "hsla(219, 12%, 45%, 1)",
-            "hover": "hsla(219, 12%, 45%, 1)",
+          "negative": {
+            "intense": "hsla(4, 77%, 40%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.18)",
           },
-        },
-        "icon": {
-          "link": {
-            "active": "hsla(213, 89%, 56%, 1)",
-            "default": "hsla(215, 91%, 74%, 1)",
-            "disabled": "hsla(219, 12%, 45%, 1)",
-            "focus": "hsla(213, 89%, 56%, 1)",
-            "hover": "hsla(213, 91%, 66%, 1)",
-            "visited": "hsla(267, 100%, 83%, 1)",
+          "neutral": {
+            "intense": "hsla(214, 40%, 92%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "primary": {
-            "active": "hsl(219, 41%, 19%)",
-            "default": "hsl(219, 41%, 19%)",
-            "disabled": "hsla(219, 10%, 60%, 1)",
-            "focus": "hsl(219, 41%, 19%)",
-            "hover": "hsl(219, 41%, 19%)",
-          },
-          "secondary": {
-            "active": "hsl(60, 100%, 55%)",
-            "default": "hsl(60, 100%, 55%)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsl(60, 100%, 55%)",
-            "hover": "hsl(60, 100%, 55%)",
-          },
-          "tertiary": {
-            "active": "hsla(218, 11%, 84%, 1)",
-            "default": "hsla(218, 11%, 84%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(218, 11%, 84%, 1)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.18)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.18)",
           },
         },
-        "text": {
-          "link": {
-            "active": "hsla(213, 89%, 56%, 1)",
-            "default": "hsla(215, 91%, 74%, 1)",
-            "disabled": "hsla(219, 12%, 45%, 1)",
-            "focus": "hsla(213, 89%, 56%, 1)",
-            "hover": "hsla(213, 91%, 66%, 1)",
-            "visited": "hsla(267, 100%, 83%, 1)",
+        "border": {
+          "information": {
+            "intense": "hsla(200, 84%, 29%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.32)",
           },
-          "primary": {
-            "active": "hsl(219, 41%, 19%)",
-            "default": "hsl(219, 41%, 19%)",
-            "disabled": "hsla(219, 10%, 60%, 1)",
-            "focus": "hsl(219, 41%, 19%)",
-            "hover": "hsl(219, 41%, 19%)",
-          },
-          "secondary": {
-            "active": "hsl(60, 100%, 55%)",
-            "default": "hsl(60, 100%, 55%)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsl(60, 100%, 55%)",
-            "hover": "hsl(60, 100%, 55%)",
-          },
-          "tertiary": {
-            "active": "hsla(218, 11%, 84%, 1)",
-            "default": "hsla(218, 11%, 84%, 1)",
-            "disabled": "hsla(220, 16%, 37%, 1)",
-            "focus": "hsla(218, 11%, 84%, 1)",
-            "hover": "hsla(218, 11%, 84%, 1)",
+          "negative": {
+            "intense": "hsla(0, 83%, 33%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.32)",
           },
-        },
-      },
-      "badge": {
-        "background": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.18)",
+          "neutral": {
+            "intense": "hsla(214, 28%, 84%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-        },
-        "border": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.32)",
+          "notice": {
+            "intense": "hsla(25, 82%, 35%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.32)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 21%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.32)",
           },
         },
         "icon": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(213, 91%, 66%, 1)",
+          "information": {
+            "intense": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(201, 92%, 95%, 1)",
           },
-        },
-        "text": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(213, 91%, 66%, 1)",
+          "negative": {
+            "intense": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(0, 100%, 98%, 1)",
           },
-        },
-      },
-      "brand": {
-        "gray": {
-          "200": {
-            "highContrast": "hsla(220, 23%, 29%, 1)",
-            "lowContrast": "hsl(219, 41%, 19%)",
+          "neutral": {
+            "intense": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 1)",
           },
-          "300": {
-            "highContrast": "hsla(220, 16%, 37%, 1)",
-            "lowContrast": "hsla(220, 35%, 22%, 1)",
+          "notice": {
+            "intense": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(24, 100%, 96%, 1)",
           },
-          "400": {
-            "highContrast": "hsla(219, 12%, 45%, 1)",
-            "lowContrast": "hsla(220, 23%, 29%, 1)",
+          "positive": {
+            "intense": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(152, 60%, 95%, 1)",
           },
-          "500": {
-            "highContrast": "hsla(219, 10%, 60%, 1)",
-            "lowContrast": "hsla(220, 16%, 37%, 1)",
+        },
+        "text": {
+          "information": {
+            "intense": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(201, 92%, 95%, 1)",
           },
-          "600": {
-            "highContrast": "hsla(218, 11%, 76%, 1)",
-            "lowContrast": "hsla(219, 12%, 45%, 1)",
+          "negative": {
+            "intense": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(0, 100%, 98%, 1)",
           },
-          "700": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 76%, 1)",
+          "neutral": {
+            "intense": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 1)",
           },
-          "a100": {
-            "highContrast": "hsla(217, 11%, 76%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+          "notice": {
+            "intense": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(24, 100%, 96%, 1)",
           },
-          "a50": {
-            "highContrast": "hsla(217, 11%, 76%, 0.09)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.09)",
+          "positive": {
+            "intense": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(152, 60%, 95%, 1)",
           },
         },
-        "primary": {
-          "300": "hsla(57, 100%, 52%, 0.18)",
-          "400": "hsla(57, 100%, 52%, 0.32)",
-          "500": "hsl(60, 100%, 55%)",
-          "600": "hsl(58, 100%, 54%)",
-          "700": "hsl(57, 100%, 52%)",
-          "800": "hsl(57, 100%, 37%)",
-        },
-        "secondary": {
-          "500": "hsla(149, 99%, 35%, 1)",
-        },
       },
-      "feedback": {
+      "interactive": {
         "background": {
+          "gray": {
+            "default": "hsla(214, 40%, 92%, 0.09)",
+            "disabled": "hsla(214, 40%, 92%, 0.09)",
+            "faded": "hsla(214, 40%, 92%, 0.12)",
+            "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 0.18)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.18)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.24)",
+            "fadedHighlighted": "hsla(200, 84%, 44%, 0.32)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.18)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.24)",
+            "fadedHighlighted": "hsla(4, 74%, 49%, 0.32)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(220, 11%, 84%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+            "default": "hsla(210, 40%, 98%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.18)",
+            "faded": "hsla(214, 40%, 92%, 0.12)",
+            "fadedHighlighted": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(40, 90%, 32%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.18)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.24)",
+            "fadedHighlighted": "hsla(25, 90%, 48%, 0.32)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.18)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.24)",
+            "fadedHighlighted": "hsla(150, 100%, 32%, 0.32)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(57, 100%, 52%)",
+            "disabled": "hsla(57, 100%, 52%, 0.12)",
+            "faded": "hsla(57, 100%, 52%, 0.12)",
+            "fadedHighlighted": "hsla(57, 100%, 52%, 0.09)",
+            "highlighted": "hsl(57, 100%, 47%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.56)",
+            "faded": "hsla(0, 0%, 0%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.18)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "border": {
+          "gray": {
+            "default": "hsla(211, 23%, 45%, 1)",
+            "disabled": "hsla(211, 29%, 26%, 1)",
+            "faded": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(211, 23%, 45%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.32)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.32)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.32)",
+            "default": "hsla(214, 40%, 92%, 1)",
+            "disabled": "hsla(211, 23%, 45%, 1)",
+            "faded": "hsla(214, 40%, 92%, 0.18)",
+            "highlighted": "hsla(214, 40%, 92%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(40, 90%, 32%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.32)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.32)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(57, 100%, 52%)",
+            "disabled": "hsla(57, 100%, 52%, 0.12)",
+            "faded": "hsla(57, 100%, 52%, 0.12)",
+            "highlighted": "hsl(57, 100%, 47%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "faded": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "icon": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(187, 68%, 52%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 84%, 37%, 1)",
+            "normal": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(198, 90%, 52%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(6, 100%, 75%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 77%, 40%, 1)",
+            "normal": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(34, 93%, 65%, 1)",
-          },
-          "positive": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(149, 99%, 35%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 85%, 42%, 1)",
+            "normal": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(25, 100%, 55%, 1)",
           },
-        },
-        "information": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(195, 100%, 31%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(187, 68%, 52%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(187, 68%, 52%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(197, 100%, 23%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(190, 100%, 39%, 1)",
-                },
-              },
-            },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 0%)",
+            "muted": "hsl(0, 0%, 0%)",
+            "normal": "hsl(0, 0%, 0%)",
+            "subtle": "hsl(0, 0%, 0%)",
           },
-        },
-        "negative": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(7, 72%, 40%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 99%, 65%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(5, 69%, 32%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(6, 100%, 75%, 1)",
-                },
-              },
-            },
+          "positive": {
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 100%, 27%, 1)",
+            "normal": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(150, 100%, 37%, 1)",
           },
-        },
-        "neutral": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(215, 12%, 92%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(215, 12%, 92%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 12%, 45%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(218, 11%, 76%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(218, 11%, 84%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 12%, 45%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 10%, 60%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(218, 11%, 76%, 1)",
-                  "lowContrast": "hsla(218, 11%, 76%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(219, 10%, 60%, 1)",
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 35%, 22%, 1)",
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(219, 12%, 45%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(218, 11%, 84%, 1)",
-                },
-              },
-            },
+          "primary": {
+            "disabled": "hsl(60, 100%, 55%)",
+            "muted": "hsl(60, 100%, 55%)",
+            "normal": "hsl(60, 100%, 55%)",
+            "subtle": "hsl(60, 100%, 55%)",
           },
-        },
-        "notice": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(42, 74%, 20%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(42, 74%, 20%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(34, 93%, 65%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(34, 93%, 65%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(41, 82%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(35, 84%, 54%, 1)",
-                },
-              },
-            },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
           },
-        },
-        "positive": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(163, 100%, 22%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(149, 99%, 35%, 1)",
-                },
-              },
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "text": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(187, 68%, 52%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 84%, 37%, 1)",
+            "normal": "hsla(200, 90%, 65%, 1)",
+            "subtle": "hsla(198, 90%, 52%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(6, 100%, 75%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 77%, 40%, 1)",
+            "normal": "hsla(4, 93%, 68%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(34, 93%, 65%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 85%, 42%, 1)",
+            "normal": "hsla(25, 100%, 63%, 1)",
+            "subtle": "hsla(25, 100%, 55%, 1)",
+          },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 0%)",
+            "muted": "hsl(0, 0%, 0%)",
+            "normal": "hsl(0, 0%, 0%)",
+            "subtle": "hsl(0, 0%, 0%)",
           },
           "positive": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(149, 99%, 35%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 100%, 27%, 1)",
+            "normal": "hsla(150, 59%, 55%, 1)",
+            "subtle": "hsla(150, 100%, 37%, 1)",
+          },
+          "primary": {
+            "disabled": "hsl(60, 100%, 55%)",
+            "muted": "hsl(60, 100%, 55%)",
+            "normal": "hsl(60, 100%, 55%)",
+            "subtle": "hsl(60, 100%, 55%)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
       },
-      "static": {
-        "white": "hsla(0, 0%, 100%, 1)",
+      "overlay": {
+        "background": {
+          "moderate": "hsla(214, 40%, 92%, 0.32)",
+          "subtle": "hsla(0, 0%, 0%, 0.8)",
+        },
       },
-      "surface": {
-        "action": {
-          "icon": {
-            "active": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-            "default": {
-              "highContrast": "hsla(220, 11%, 84%, 0.32)",
-              "lowContrast": "hsla(219, 12%, 45%, 1)",
-            },
-            "disabled": {
-              "highContrast": "hsla(220, 11%, 84%, 0.18)",
-              "lowContrast": "hsla(220, 11%, 84%, 0.18)",
-            },
-            "focus": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-            "hover": {
-              "highContrast": "hsla(0, 0%, 99%, 1)",
-              "lowContrast": "hsla(218, 11%, 76%, 1)",
-            },
-          },
+      "popup": {
+        "background": {
+          "intense": "hsla(211, 29%, 26%, 1)",
+          "subtle": "hsla(211, 29%, 26%, 1)",
+        },
+        "border": {
+          "intense": "hsla(214, 40%, 92%, 0.18)",
+          "subtle": "hsla(214, 40%, 92%, 0.18)",
         },
+      },
+      "surface": {
         "background": {
-          "level1": {
-            "highContrast": "hsla(219, 41%, 19%, 1)",
-            "lowContrast": "hsla(218, 67%, 10%, 1)",
+          "cloud": {
+            "intense": "hsla(201, 39%, 93%, 1)",
+            "subtle": "hsla(200, 91%, 13%, 1)",
           },
-          "level2": {
-            "highContrast": "hsla(220, 35%, 22%, 1)",
-            "lowContrast": "hsla(218, 54%, 15%, 1)",
+          "gray": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "moderate": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 53%, 10%, 1)",
+          },
+          "primary": {
+            "intense": "hsl(57, 100%, 52%)",
+            "subtle": "hsl(60, 100%, 58%)",
           },
-          "level3": {
-            "highContrast": "hsla(220, 23%, 29%, 1)",
-            "lowContrast": "hsla(218, 49%, 17%, 1)",
+          "sea": {
+            "intense": "hsla(180, 42%, 92%, 1)",
+            "subtle": "hsla(180, 91%, 13%, 1)",
           },
         },
         "border": {
-          "normal": {
-            "highContrast": "hsla(217, 11%, 76%, 0.18)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.18)",
+          "gray": {
+            "muted": "hsla(214, 40%, 92%, 0.18)",
+            "normal": "hsla(211, 20%, 52%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(217, 11%, 76%, 0.09)",
-            "lowContrast": "hsla(220, 11%, 84%, 0.09)",
+          "primary": {
+            "muted": "hsla(227, 100%, 59%, 0.32)",
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
         },
-        "overlay": {
-          "background": {
-            "400": "hsla(221, 16%, 37%, 0.64)",
-            "800": "hsla(231, 11%, 12%, 0.72)",
+        "icon": {
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
+          },
+          "onCloud": {
+            "onIntense": "hsla(223, 100%, 65%, 1)",
+            "onSubtle": "hsla(220, 100%, 73%, 1)",
+          },
+          "onSea": {
+            "onIntense": "hsla(155, 100%, 31%, 1)",
+            "onSubtle": "hsla(150, 59%, 55%, 1)",
+          },
+          "primary": {
+            "normal": "hsl(57, 100%, 52%)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
-        },
-        "popup": {
-          "background": "hsla(220, 35%, 22%, 1)",
         },
         "text": {
-          "muted": {
-            "highContrast": "hsla(218, 11%, 76%, 1)",
-            "lowContrast": "hsla(218, 11%, 76%, 1)",
+          "gray": {
+            "disabled": "hsla(214, 40%, 92%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-          "normal": {
-            "highContrast": "hsla(0, 0%, 99%, 1)",
-            "lowContrast": "hsla(0, 0%, 99%, 1)",
+          "onCloud": {
+            "onIntense": "hsla(227, 71%, 51%, 1)",
+            "onSubtle": "hsla(219, 95%, 85%, 1)",
           },
-          "placeholder": {
-            "highContrast": "hsla(219, 10%, 60%, 1)",
-            "lowContrast": "hsla(219, 10%, 60%, 1)",
+          "onSea": {
+            "onIntense": "hsla(155, 100%, 21%, 1)",
+            "onSubtle": "hsla(150, 59%, 82%, 1)",
           },
-          "subdued": {
-            "highContrast": "hsla(218, 11%, 84%, 1)",
-            "lowContrast": "hsla(218, 11%, 84%, 1)",
+          "primary": {
+            "normal": "hsla(220, 100%, 73%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(215, 12%, 92%, 1)",
-            "lowContrast": "hsla(215, 12%, 92%, 1)",
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
           },
-        },
-      },
-      "white": {
-        "action": {
-          "background": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-            "tertiary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(210, 6%, 94%, 0.09)",
-              "disabled": "hsla(210, 6%, 94%, 0.09)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-          },
-          "border": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(214, 15%, 18%, 0)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(214, 15%, 18%, 0)",
-              "hover": "hsla(214, 15%, 18%, 0)",
-            },
-          },
-          "icon": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(267, 100%, 83%, 1)",
-            },
-            "primary": {
-              "active": "hsla(213, 89%, 56%, 1)",
-              "default": "hsla(213, 89%, 56%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(213, 89%, 56%, 1)",
-              "hover": "hsla(213, 89%, 56%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-          },
-          "text": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(267, 100%, 83%, 1)",
-            },
-            "primary": {
-              "active": "hsla(213, 89%, 56%, 1)",
-              "default": "hsla(213, 89%, 56%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(213, 89%, 56%, 1)",
-              "hover": "hsla(213, 89%, 56%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
       },
+      "transparent": "hsla(0, 0%, 100%, 0)",
     },
     "onLight": {
-      "action": {
+      "feedback": {
         "background": {
-          "primary": {
-            "active": "hsl(57, 100%, 37%)",
-            "default": "hsl(57, 100%, 52%)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsl(57, 100%, 42%)",
-            "hover": "hsl(57, 100%, 47%)",
-          },
-          "secondary": {
-            "active": "hsla(57, 100%, 52%, 0.32)",
-            "default": "hsla(57, 100%, 52%, 0)",
-            "disabled": "hsla(216, 44%, 23%, 0)",
-            "focus": "hsla(57, 100%, 52%, 0.18)",
-            "hover": "hsla(57, 100%, 52%, 0.09)",
-          },
-          "tertiary": {
-            "active": "hsla(214, 21%, 94%, 1)",
-            "default": "hsla(0, 0%, 100%, 1)",
-            "disabled": "hsla(216, 15%, 54%, 0.09)",
-            "focus": "hsla(220, 30%, 96%, 1)",
-            "hover": "hsla(220, 27%, 98%, 1)",
-          },
-        },
-        "border": {
-          "primary": {
-            "active": "hsl(57, 100%, 37%)",
-            "default": "hsl(57, 100%, 52%)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsl(57, 100%, 42%)",
-            "hover": "hsl(57, 100%, 47%)",
+          "information": {
+            "intense": "hsla(200, 84%, 44%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.09)",
           },
-          "secondary": {
-            "active": "hsl(57, 100%, 52%)",
-            "default": "hsl(57, 100%, 52%)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsl(57, 100%, 52%)",
-            "hover": "hsl(57, 100%, 52%)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.09)",
           },
-          "tertiary": {
-            "active": "hsla(216, 19%, 89%, 1)",
-            "default": "hsla(216, 19%, 89%, 1)",
-            "disabled": "hsla(216, 19%, 89%, 1)",
-            "focus": "hsla(216, 19%, 89%, 1)",
-            "hover": "hsla(216, 19%, 89%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 29%, 26%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 0.09)",
           },
-        },
-        "icon": {
-          "link": {
-            "active": "hsla(227, 100%, 45%, 1)",
-            "default": "hsla(218, 89%, 51%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(227, 100%, 45%, 1)",
-            "hover": "hsla(223, 95%, 48%, 1)",
-            "visited": "hsla(268, 100%, 79%, 1)",
+          "notice": {
+            "intense": "hsla(25, 90%, 48%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.09)",
           },
-          "primary": {
-            "active": "hsl(215, 70%, 13%)",
-            "default": "hsl(215, 70%, 13%)",
-            "disabled": "hsla(216, 16%, 60%, 1)",
-            "focus": "hsl(215, 70%, 13%)",
-            "hover": "hsl(215, 70%, 13%)",
-          },
-          "secondary": {
-            "active": "hsla(216, 44%, 23%, 1)",
-            "default": "hsla(216, 44%, 23%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 44%, 23%, 1)",
-            "hover": "hsla(216, 44%, 23%, 1)",
-          },
-          "tertiary": {
-            "active": "hsla(216, 33%, 29%, 1)",
-            "default": "hsla(216, 33%, 29%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(216, 33%, 29%, 1)",
+          "positive": {
+            "intense": "hsla(150, 100%, 32%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.09)",
           },
         },
-        "text": {
-          "link": {
-            "active": "hsla(227, 100%, 45%, 1)",
-            "default": "hsla(218, 89%, 51%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(227, 100%, 45%, 1)",
-            "hover": "hsla(223, 95%, 48%, 1)",
-            "visited": "hsla(268, 100%, 79%, 1)",
+        "border": {
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 0.18)",
           },
-          "primary": {
-            "active": "hsl(215, 70%, 13%)",
-            "default": "hsl(215, 70%, 13%)",
-            "disabled": "hsla(216, 16%, 60%, 1)",
-            "focus": "hsl(215, 70%, 13%)",
-            "hover": "hsl(215, 70%, 13%)",
-          },
-          "secondary": {
-            "active": "hsla(216, 44%, 23%, 1)",
-            "default": "hsla(216, 44%, 23%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 44%, 23%, 1)",
-            "hover": "hsla(216, 44%, 23%, 1)",
-          },
-          "tertiary": {
-            "active": "hsla(216, 33%, 29%, 1)",
-            "default": "hsla(216, 33%, 29%, 1)",
-            "disabled": "hsla(218, 19%, 81%, 1)",
-            "focus": "hsla(216, 33%, 29%, 1)",
-            "hover": "hsla(216, 33%, 29%, 1)",
+          "negative": {
+            "intense": "hsla(4, 77%, 40%, 1)",
+            "subtle": "hsla(4, 74%, 49%, 0.18)",
           },
-        },
-      },
-      "badge": {
-        "background": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.09)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 20%, 52%, 0.18)",
           },
-        },
-        "border": {
-          "blue": {
-            "highContrast": "hsla(218, 89%, 51%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 0.32)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 0.18)",
+          },
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 0.18)",
           },
         },
         "icon": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 1)",
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 88%, 90%, 1)",
           },
-        },
-        "text": {
-          "blue": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(218, 89%, 51%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 93%, 94%, 1)",
           },
-        },
-      },
-      "brand": {
-        "gray": {
-          "200": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsl(215, 70%, 13%)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 24%, 65%, 1)",
           },
-          "300": {
-            "highContrast": "hsla(216, 27%, 36%, 1)",
-            "lowContrast": "hsla(220, 30%, 96%, 1)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 100%, 90%, 1)",
           },
-          "400": {
-            "highContrast": "hsla(217, 18%, 45%, 1)",
-            "lowContrast": "hsla(216, 19%, 89%, 1)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(151, 57%, 91%, 1)",
           },
-          "500": {
-            "highContrast": "hsla(216, 15%, 54%, 1)",
-            "lowContrast": "hsla(214, 18%, 69%, 1)",
+        },
+        "text": {
+          "information": {
+            "intense": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 88%, 90%, 1)",
           },
-          "600": {
-            "highContrast": "hsla(214, 18%, 69%, 1)",
-            "lowContrast": "hsla(216, 16%, 60%, 1)",
+          "negative": {
+            "intense": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 93%, 94%, 1)",
           },
-          "700": {
-            "highContrast": "hsla(220, 30%, 96%, 1)",
-            "lowContrast": "hsla(217, 18%, 45%, 1)",
+          "neutral": {
+            "intense": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 24%, 65%, 1)",
           },
-          "a100": {
-            "highContrast": "hsla(214, 21%, 94%, 0.18)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.18)",
+          "notice": {
+            "intense": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 100%, 90%, 1)",
           },
-          "a50": {
-            "highContrast": "hsla(214, 21%, 94%, 0.09)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+          "positive": {
+            "intense": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(151, 57%, 91%, 1)",
           },
         },
-        "primary": {
-          "300": "hsla(57, 100%, 52%, 0.09)",
-          "400": "hsla(57, 100%, 52%, 0.18)",
-          "500": "hsl(57, 100%, 52%)",
-          "600": "hsl(57, 100%, 47%)",
-          "700": "hsl(57, 100%, 42%)",
-          "800": "hsl(57, 100%, 32%)",
-        },
-        "secondary": {
-          "500": "hsla(149, 99%, 35%, 1)",
-        },
       },
-      "feedback": {
+      "interactive": {
         "background": {
+          "gray": {
+            "default": "hsla(211, 20%, 52%, 0.09)",
+            "disabled": "hsla(211, 20%, 52%, 0.09)",
+            "faded": "hsla(211, 20%, 52%, 0.12)",
+            "fadedHighlighted": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 20%, 52%, 0.18)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.09)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.09)",
+            "faded": "hsla(200, 84%, 44%, 0.09)",
+            "fadedHighlighted": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.09)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.09)",
+            "faded": "hsla(4, 74%, 49%, 0.09)",
+            "fadedHighlighted": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+            "default": "hsla(211, 29%, 26%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.18)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "fadedHighlighted": "hsla(211, 20%, 52%, 0.32)",
+            "highlighted": "hsla(211, 33%, 21%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(38, 97%, 38%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.09)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.09)",
+            "faded": "hsla(25, 90%, 48%, 0.09)",
+            "fadedHighlighted": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.09)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.09)",
+            "faded": "hsla(150, 100%, 32%, 0.09)",
+            "fadedHighlighted": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(57, 100%, 52%)",
+            "disabled": "hsla(57, 100%, 52%, 0.12)",
+            "faded": "hsla(57, 100%, 52%, 0.12)",
+            "fadedHighlighted": "hsla(57, 100%, 52%, 0.09)",
+            "highlighted": "hsl(57, 100%, 47%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.56)",
+            "faded": "hsla(0, 0%, 0%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.18)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "fadedHighlighted": "hsla(0, 0%, 100%, 0.32)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "border": {
+          "gray": {
+            "default": "hsla(211, 27%, 76%, 1)",
+            "disabled": "hsla(214, 40%, 92%, 1)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 27%, 76%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(193, 100%, 35%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 0.32)",
+            "default": "hsla(200, 84%, 44%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.18)",
+            "faded": "hsla(200, 84%, 44%, 0.18)",
+            "highlighted": "hsla(200, 84%, 37%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(8, 73%, 47%, 1)",
-            "lowContrast": "hsla(9, 91%, 56%, 0.32)",
+            "default": "hsla(4, 74%, 49%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.18)",
+            "faded": "hsla(4, 74%, 49%, 0.18)",
+            "highlighted": "hsla(4, 77%, 40%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.32)",
+            "default": "hsla(211, 20%, 52%, 1)",
+            "disabled": "hsla(214, 28%, 84%, 1)",
+            "faded": "hsla(211, 20%, 52%, 0.18)",
+            "highlighted": "hsla(211, 20%, 52%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(38, 97%, 38%, 1)",
-            "lowContrast": "hsla(36, 100%, 44%, 0.32)",
+            "default": "hsla(25, 90%, 48%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.18)",
+            "faded": "hsla(25, 90%, 48%, 0.18)",
+            "highlighted": "hsla(25, 85%, 42%, 1)",
           },
           "positive": {
-            "highContrast": "hsla(160, 100%, 26%, 1)",
-            "lowContrast": "hsla(155, 100%, 31%, 0.32)",
+            "default": "hsla(150, 100%, 32%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.18)",
+            "faded": "hsla(150, 100%, 32%, 0.18)",
+            "highlighted": "hsla(150, 100%, 27%, 1)",
+          },
+          "primary": {
+            "default": "hsl(57, 100%, 52%)",
+            "disabled": "hsla(57, 100%, 52%, 0.12)",
+            "faded": "hsla(57, 100%, 52%, 0.12)",
+            "highlighted": "hsl(57, 100%, 47%)",
+          },
+          "staticBlack": {
+            "default": "hsla(0, 0%, 0%, 1)",
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "faded": "hsla(0, 0%, 0%, 0.32)",
+            "highlighted": "hsla(0, 0%, 0%, 1)",
+          },
+          "staticWhite": {
+            "default": "hsla(0, 0%, 100%, 1)",
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "faded": "hsla(0, 0%, 100%, 0.18)",
+            "highlighted": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "icon": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 90%, 65%, 1)",
+            "normal": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(8, 73%, 47%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 93%, 68%, 1)",
+            "normal": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(38, 97%, 38%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 100%, 63%, 1)",
+            "normal": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 1)",
           },
-          "positive": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(160, 100%, 26%, 1)",
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 0%)",
+            "muted": "hsl(0, 0%, 0%)",
+            "normal": "hsl(0, 0%, 0%)",
+            "subtle": "hsl(0, 0%, 0%)",
           },
-        },
-        "information": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(193, 100%, 35%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(196, 100%, 27%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(195, 100%, 31%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(181, 75%, 85%, 1)",
-                  "lowContrast": "hsla(196, 100%, 27%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(187, 68%, 52%, 1)",
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(180, 100%, 97%, 1)",
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(193, 100%, 35%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(195, 100%, 31%, 1)",
-                },
-              },
-            },
-          },
-        },
-        "negative": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 73%, 47%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(5, 69%, 32%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(7, 72%, 40%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 92%, 1)",
-                  "lowContrast": "hsla(7, 72%, 40%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(8, 99%, 65%, 1)",
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(0, 100%, 97%, 1)",
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(9, 91%, 56%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(8, 73%, 47%, 1)",
-                },
-              },
-            },
+          "positive": {
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 59%, 55%, 1)",
+            "normal": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 1)",
           },
-        },
-        "neutral": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(217, 56%, 17%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(216, 33%, 29%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 33%, 29%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(217, 56%, 17%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(216, 44%, 23%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 18%, 69%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 21%, 94%, 1)",
-                  "lowContrast": "hsla(217, 18%, 45%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(218, 19%, 81%, 1)",
-                  "lowContrast": "hsla(216, 33%, 29%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(214, 21%, 94%, 1)",
-                  "lowContrast": "hsla(217, 18%, 45%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(216, 15%, 54%, 1)",
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(220, 27%, 98%, 1)",
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(216, 15%, 54%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(216, 27%, 36%, 1)",
-                },
-              },
-            },
+          "primary": {
+            "disabled": "hsla(211, 33%, 21%, 1)",
+            "muted": "hsla(211, 33%, 21%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 33%, 21%, 1)",
           },
-        },
-        "notice": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(38, 97%, 38%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(38, 97%, 38%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(41, 82%, 26%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(40, 90%, 32%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 97%, 86%, 1)",
-                  "lowContrast": "hsla(40, 90%, 32%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(35, 84%, 54%, 1)",
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(32, 100%, 94%, 1)",
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(36, 100%, 44%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(38, 97%, 38%, 1)",
-                },
-              },
-            },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
           },
-        },
-        "positive": {
-          "action": {
-            "background": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(160, 100%, 26%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "highContrast": "hsla(164, 100%, 17%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(163, 100%, 22%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.09)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.18)",
-                },
-              },
-            },
-            "border": {
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "default": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-              },
-            },
-            "icon": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(121, 65%, 71%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
-            "text": {
-              "link": {
-                "active": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(121, 65%, 71%, 1)",
-                },
-                "focus": {
-                  "highContrast": "hsla(113, 69%, 83%, 1)",
-                  "lowContrast": "hsla(163, 100%, 22%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 1)",
-                },
-              },
-              "primary": {
-                "active": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "highContrast": "hsla(149, 99%, 35%, 1)",
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "highContrast": "hsla(107, 100%, 96%, 1)",
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-              "secondary": {
-                "active": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "default": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "disabled": {
-                  "lowContrast": "hsla(155, 100%, 31%, 0.32)",
-                },
-                "focus": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-                "hover": {
-                  "lowContrast": "hsla(160, 100%, 26%, 1)",
-                },
-              },
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
         "text": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
           "information": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(193, 100%, 35%, 1)",
+            "disabled": "hsla(200, 84%, 44%, 0.32)",
+            "muted": "hsla(200, 90%, 65%, 1)",
+            "normal": "hsla(200, 84%, 37%, 1)",
+            "subtle": "hsla(200, 84%, 44%, 1)",
           },
           "negative": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(8, 73%, 47%, 1)",
+            "disabled": "hsla(4, 74%, 49%, 0.32)",
+            "muted": "hsla(4, 93%, 68%, 1)",
+            "normal": "hsla(4, 74%, 49%, 1)",
+            "subtle": "hsla(4, 86%, 58%, 1)",
           },
           "neutral": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
           "notice": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(38, 97%, 38%, 1)",
+            "disabled": "hsla(25, 90%, 48%, 0.32)",
+            "muted": "hsla(25, 100%, 63%, 1)",
+            "normal": "hsla(25, 85%, 42%, 1)",
+            "subtle": "hsla(25, 90%, 48%, 1)",
+          },
+          "onPrimary": {
+            "disabled": "hsl(0, 0%, 0%)",
+            "muted": "hsl(0, 0%, 0%)",
+            "normal": "hsl(0, 0%, 0%)",
+            "subtle": "hsl(0, 0%, 0%)",
           },
           "positive": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(160, 100%, 26%, 1)",
+            "disabled": "hsla(150, 100%, 32%, 0.32)",
+            "muted": "hsla(150, 59%, 55%, 1)",
+            "normal": "hsla(150, 100%, 27%, 1)",
+            "subtle": "hsla(150, 100%, 32%, 1)",
+          },
+          "primary": {
+            "disabled": "hsla(211, 33%, 21%, 1)",
+            "muted": "hsla(211, 33%, 21%, 1)",
+            "normal": "hsla(211, 33%, 21%, 1)",
+            "subtle": "hsla(211, 33%, 21%, 1)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.72)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.8)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.64)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.8)",
           },
         },
       },
-      "static": {
-        "white": "hsla(0, 0%, 100%, 1)",
+      "overlay": {
+        "background": {
+          "moderate": "hsla(211, 20%, 52%, 0.32)",
+          "subtle": "hsla(0, 0%, 0%, 0.56)",
+        },
       },
-      "surface": {
-        "action": {
-          "icon": {
-            "active": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-            "default": {
-              "highContrast": "hsla(214, 21%, 94%, 0.32)",
-              "lowContrast": "hsla(214, 18%, 69%, 1)",
-            },
-            "disabled": {
-              "highContrast": "hsla(216, 15%, 54%, 0.18)",
-              "lowContrast": "hsla(216, 15%, 54%, 0.18)",
-            },
-            "focus": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-            "hover": {
-              "highContrast": "hsla(0, 0%, 100%, 1)",
-              "lowContrast": "hsla(217, 18%, 45%, 1)",
-            },
-          },
+      "popup": {
+        "background": {
+          "intense": "hsla(211, 29%, 26%, 1)",
+          "subtle": "hsla(0, 0%, 100%, 1)",
+        },
+        "border": {
+          "intense": "hsla(211, 26%, 34%, 1)",
+          "subtle": "hsla(211, 20%, 52%, 0.18)",
         },
+      },
+      "surface": {
         "background": {
-          "level1": {
-            "highContrast": "hsla(217, 56%, 17%, 1)",
-            "lowContrast": "hsla(220, 30%, 96%, 1)",
+          "cloud": {
+            "intense": "hsla(200, 61%, 20%, 1)",
+            "subtle": "hsla(198, 39%, 95%, 1)",
+          },
+          "gray": {
+            "intense": "hsla(0, 0%, 100%, 1)",
+            "moderate": "hsla(210, 40%, 98%, 1)",
+            "subtle": "hsla(213, 47%, 96%, 1)",
           },
-          "level2": {
-            "highContrast": "hsla(216, 44%, 23%, 1)",
-            "lowContrast": "hsla(0, 0%, 100%, 1)",
+          "primary": {
+            "intense": "hsl(57, 100%, 52%)",
+            "subtle": "hsl(60, 100%, 58%)",
           },
-          "level3": {
-            "highContrast": "hsla(216, 33%, 29%, 1)",
-            "lowContrast": "hsla(220, 27%, 98%, 1)",
+          "sea": {
+            "intense": "hsla(180, 61%, 20%, 1)",
+            "subtle": "hsla(180, 39%, 95%, 1)",
           },
         },
         "border": {
-          "normal": {
-            "highContrast": "hsla(214, 21%, 94%, 0.18)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.18)",
+          "gray": {
+            "muted": "hsla(211, 20%, 52%, 0.18)",
+            "normal": "hsla(211, 24%, 65%, 1)",
+            "subtle": "hsla(214, 28%, 84%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(214, 21%, 94%, 0.09)",
-            "lowContrast": "hsla(216, 15%, 54%, 0.09)",
+          "primary": {
+            "muted": "hsla(227, 100%, 59%, 0.18)",
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
         },
-        "overlay": {
-          "background": {
-            "400": "hsla(214, 18%, 69%, 0.64)",
-            "800": "hsla(214, 15%, 18%, 0.64)",
+        "icon": {
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
+          },
+          "onCloud": {
+            "onIntense": "hsla(220, 100%, 73%, 1)",
+            "onSubtle": "hsla(223, 100%, 65%, 1)",
+          },
+          "onSea": {
+            "onIntense": "hsla(150, 59%, 55%, 1)",
+            "onSubtle": "hsla(155, 100%, 31%, 1)",
+          },
+          "primary": {
+            "normal": "hsl(57, 100%, 52%)",
+          },
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
+          },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
-        },
-        "popup": {
-          "background": "hsla(0, 0%, 100%, 1)",
         },
         "text": {
-          "muted": {
-            "highContrast": "hsla(218, 19%, 81%, 1)",
-            "lowContrast": "hsla(216, 16%, 60%, 1)",
+          "gray": {
+            "disabled": "hsla(211, 20%, 52%, 0.32)",
+            "muted": "hsla(211, 22%, 56%, 1)",
+            "normal": "hsla(212, 39%, 16%, 1)",
+            "subtle": "hsla(211, 26%, 34%, 1)",
           },
-          "normal": {
-            "highContrast": "hsla(0, 0%, 100%, 1)",
-            "lowContrast": "hsla(217, 56%, 17%, 1)",
+          "onCloud": {
+            "onIntense": "hsla(219, 95%, 85%, 1)",
+            "onSubtle": "hsla(227, 71%, 51%, 1)",
           },
-          "placeholder": {
-            "highContrast": "hsla(214, 18%, 69%, 1)",
-            "lowContrast": "hsla(214, 18%, 69%, 1)",
+          "onSea": {
+            "onIntense": "hsla(150, 59%, 82%, 1)",
+            "onSubtle": "hsla(155, 100%, 21%, 1)",
           },
-          "subdued": {
-            "highContrast": "hsla(216, 19%, 89%, 1)",
-            "lowContrast": "hsla(217, 18%, 45%, 1)",
+          "primary": {
+            "normal": "hsla(227, 100%, 59%, 1)",
           },
-          "subtle": {
-            "highContrast": "hsla(220, 30%, 96%, 1)",
-            "lowContrast": "hsla(216, 27%, 36%, 1)",
+          "staticBlack": {
+            "disabled": "hsla(0, 0%, 0%, 0.32)",
+            "muted": "hsla(0, 0%, 0%, 0.56)",
+            "normal": "hsla(0, 0%, 0%, 1)",
+            "subtle": "hsla(0, 0%, 0%, 0.72)",
           },
-        },
-      },
-      "white": {
-        "action": {
-          "background": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-            "tertiary": {
-              "active": "hsla(210, 6%, 94%, 0.32)",
-              "default": "hsla(210, 6%, 94%, 0.09)",
-              "disabled": "hsla(210, 6%, 94%, 0.09)",
-              "focus": "hsla(210, 6%, 94%, 0.32)",
-              "hover": "hsla(210, 6%, 94%, 0.18)",
-            },
-          },
-          "border": {
-            "primary": {
-              "active": "hsla(216, 4%, 89%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.18)",
-              "focus": "hsla(216, 4%, 89%, 1)",
-              "hover": "hsla(216, 6%, 94%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(214, 15%, 18%, 0)",
-              "default": "hsla(214, 15%, 18%, 0)",
-              "disabled": "hsla(214, 15%, 18%, 0)",
-              "focus": "hsla(214, 15%, 18%, 0)",
-              "hover": "hsla(214, 15%, 18%, 0)",
-            },
-          },
-          "icon": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(268, 100%, 79%, 1)",
-            },
-            "primary": {
-              "active": "hsla(218, 89%, 51%, 1)",
-              "default": "hsla(218, 89%, 51%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(218, 89%, 51%, 1)",
-              "hover": "hsla(218, 89%, 51%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-          },
-          "text": {
-            "link": {
-              "active": "hsla(214, 7%, 81%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(214, 7%, 81%, 1)",
-              "hover": "hsla(216, 4%, 89%, 1)",
-              "visited": "hsla(268, 100%, 79%, 1)",
-            },
-            "primary": {
-              "active": "hsla(218, 89%, 51%, 1)",
-              "default": "hsla(218, 89%, 51%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(218, 89%, 51%, 1)",
-              "hover": "hsla(218, 89%, 51%, 1)",
-            },
-            "secondary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
-            "tertiary": {
-              "active": "hsla(0, 0%, 100%, 1)",
-              "default": "hsla(0, 0%, 100%, 1)",
-              "disabled": "hsla(210, 6%, 94%, 0.32)",
-              "focus": "hsla(0, 0%, 100%, 1)",
-              "hover": "hsla(0, 0%, 100%, 1)",
-            },
+          "staticWhite": {
+            "disabled": "hsla(0, 0%, 100%, 0.32)",
+            "muted": "hsla(0, 0%, 100%, 0.48)",
+            "normal": "hsla(0, 0%, 100%, 1)",
+            "subtle": "hsla(0, 0%, 100%, 0.88)",
           },
         },
       },
+      "transparent": "hsla(0, 0%, 100%, 0)",
     },
   },
   "elevation": {
     "onDark": {
-      "highRaised": "0 24px 48px -12px hsla(231, 67%, 10%, 0.18)",
-      "lowRaised": "0 4px 8px -2px hsla(231, 67%, 10%, 0.10), 0 2px 4px -2px hsla(231, 67%, 10%, 0.06)",
-      "midRaised": "0 12px 16px -4px hsla(231, 67%, 10%, 0.08), 0 4px 6px -2px hsla(231, 67%, 10%, 0.03)",
+      "highRaised": "0px 16px 48px -4px hsla(217, 56%, 17%, 0.18)",
+      "lowRaised": "0px 2px 16px 0px hsla(217, 56%, 17%, 0.10)",
+      "midRaised": "0px 8px 24px 0px hsla(217, 56%, 17%, 0.12)",
       "none": "none",
     },
     "onLight": {
-      "highRaised": "0 24px 48px -12px hsla(217, 56%, 17%, 0.18)",
-      "lowRaised": "0 4px 8px -2px hsla(217, 56%, 17%, 0.1), 0 2px 4px -2px hsla(217, 56%, 17%, 0.06)",
-      "midRaised": "0 12px 16px -4px hsla(217, 56%, 17%, 0.08), 0 4px 6px -2px hsla(217, 56%, 17%, 0.03)",
+      "highRaised": "0px 16px 48px -4px hsla(217, 56%, 17%, 0.18)",
+      "lowRaised": "0px 2px 16px 0px hsla(217, 56%, 17%, 0.10)",
+      "midRaised": "0px 8px 24px 0px hsla(217, 56%, 17%, 0.12)",
       "none": "none",
     },
   },
@@ -6545,101 +2237,105 @@ exports[`createTheme should create a theme with the correct brand colors 3`] = `
     "onDesktop": {
       "fonts": {
         "family": {
-          "code": "monospace",
-          "text": "Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"",
+          "code": ""Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace",
+          "heading": ""TASA Orbiter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
+          "text": ""Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
         },
         "size": {
-          "10": 9,
           "100": 14,
-          "1000": 40,
-          "1100": 48,
-          "1200": 56,
-          "1300": 64,
-          "1600": 88,
+          "1000": 64,
+          "1100": 72,
           "200": 16,
           "25": 10,
           "300": 18,
           "400": 20,
           "50": 11,
-          "500": 22,
-          "600": 24,
-          "700": 28,
+          "500": 24,
+          "600": 32,
+          "700": 40,
           "75": 12,
-          "800": 32,
-          "900": 36,
+          "800": 48,
+          "900": 56,
         },
         "weight": {
           "bold": 700,
+          "medium": 500,
           "regular": 400,
+          "semibold": 600,
         },
       },
+      "letterSpacings": {
+        "100": 0,
+        "50": -1,
+      },
       "lineHeights": {
         "0": 0,
         "100": 20,
-        "1000": 64,
-        "1100": 72,
-        "1500": 104,
+        "1000": 70,
+        "1100": 78,
         "200": 24,
         "25": 14,
         "300": 24,
-        "400": 28,
+        "400": 26,
         "50": 16,
         "500": 32,
-        "600": 40,
-        "700": 40,
+        "600": 38,
+        "700": 46,
         "75": 18,
-        "800": 48,
-        "900": 56,
+        "800": 56,
+        "900": 64,
       },
     },
     "onMobile": {
       "fonts": {
         "family": {
-          "code": "monospace",
-          "text": "Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"",
+          "code": ""Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace",
+          "heading": ""TASA Orbiter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
+          "text": ""Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
         },
         "size": {
-          "10": 9,
           "100": 14,
-          "1000": 32,
+          "1000": 38,
           "1100": 40,
-          "1200": 48,
-          "1300": 56,
-          "1600": 64,
           "200": 16,
           "25": 10,
           "300": 16,
           "400": 18,
           "50": 11,
           "500": 20,
-          "600": 20,
-          "700": 24,
+          "600": 24,
+          "700": 32,
           "75": 12,
-          "800": 28,
-          "900": 32,
+          "800": 34,
+          "900": 36,
         },
         "weight": {
           "bold": 700,
+          "medium": 500,
           "regular": 400,
+          "semibold": 600,
         },
       },
+      "letterSpacings": {
+        "100": 0,
+        "50": -1,
+      },
       "lineHeights": {
         "0": 0,
         "100": 20,
-        "1000": 56,
-        "1100": 64,
-        "1500": 72,
-        "200": 20,
+        "1000": 46,
+        "1100": 48,
+        "200": 24,
         "25": 14,
-        "300": 24,
+        "300": 22,
         "400": 24,
         "50": 16,
-        "500": 28,
+        "500": 26,
         "600": 32,
-        "700": 40,
+        "700": 38,
         "75": 18,
         "800": 40,
-        "900": 48,
+        "900": 42,
       },
     },
   },
@@ -6651,10 +2347,10 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsl(58,100%,54%);
-  border-color: hsl(58,100%,54%);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsl(57,100%,52%);
+  border-color: hsl(57,100%,52%);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -6670,6 +2366,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6684,25 +2381,25 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
 }
 
 .c0.c0.c0.c0.c0:hover {
-  background-color: hsl(57,100%,52%);
-  border-color: hsl(57,100%,52%);
+  background-color: hsl(57,100%,47%);
+  border-color: hsl(57,100%,47%);
 }
 
 .c0.c0.c0.c0.c0:active {
-  background-color: hsl(57,100%,42%);
-  border-color: hsl(57,100%,42%);
+  background-color: hsl(57,100%,47%);
+  border-color: hsl(57,100%,47%);
 }
 
 .c0.c0.c0.c0.c0:focus-visible {
   background-color: hsl(57,100%,47%);
   border-color: hsl(57,100%,47%);
-  outline: 1px solid hsla(218,67%,10%,1);
-  box-shadow: 0px 0px 0px 4px hsla(57,100%,52%,0.32);
+  outline: 1px solid hsl(60,100%,58%);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.32);
 }
 
 .c0.c0.c0.c0.c0 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -6710,14 +2407,18 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsl(219,41%,19%);
-  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  color: hsl(0,0%,0%);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
   line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
@@ -6742,6 +2443,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c2.c2.c2.c2.c2 {
diff --git a/packages/blade/src/tokens/theme/__tests__/createTheme.native.test.tsx b/packages/blade/src/tokens/theme/__tests__/createTheme.native.test.tsx
index 32030c6debe..9587f6df6b4 100644
--- a/packages/blade/src/tokens/theme/__tests__/createTheme.native.test.tsx
+++ b/packages/blade/src/tokens/theme/__tests__/createTheme.native.test.tsx
@@ -16,8 +16,8 @@ describe('createTheme', () => {
 
     expect(
       tinycolor.isReadable(
-        theme.colors.onLight.action.background.primary.default,
-        theme.colors.onLight.action.text.primary.default,
+        theme.colors.onLight.interactive.background.primary.default,
+        theme.colors.onLight.interactive.text.onPrimary.normal,
         {
           level: 'AAA',
           size: 'large',
@@ -38,8 +38,8 @@ describe('createTheme', () => {
     );
     expect(
       tinycolor.isReadable(
-        theme.colors.onLight.action.background.primary.default,
-        theme.colors.onLight.action.text.primary.default,
+        theme.colors.onLight.interactive.background.primary.default,
+        theme.colors.onLight.interactive.text.onPrimary.normal,
         {
           level: 'AAA',
           size: 'large',
diff --git a/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx b/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx
index e1211a9928e..5a88893c530 100644
--- a/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx
+++ b/packages/blade/src/tokens/theme/__tests__/createTheme.web.test.tsx
@@ -16,8 +16,8 @@ describe('createTheme', () => {
 
     expect(
       tinycolor.isReadable(
-        theme.colors.onLight.action.background.primary.default,
-        theme.colors.onLight.action.text.primary.default,
+        theme.colors.onLight.interactive.background.primary.default,
+        theme.colors.onLight.interactive.text.onPrimary.normal,
         {
           level: 'AAA',
           size: 'large',
@@ -38,8 +38,8 @@ describe('createTheme', () => {
     );
     expect(
       tinycolor.isReadable(
-        theme.colors.onLight.action.background.primary.default,
-        theme.colors.onLight.action.text.primary.default,
+        theme.colors.onLight.interactive.background.primary.default,
+        theme.colors.onLight.interactive.text.onPrimary.normal,
         {
           level: 'AAA',
           size: 'large',
diff --git a/packages/blade/src/tokens/theme/__tests__/overrideTheme.test.ts b/packages/blade/src/tokens/theme/__tests__/overrideTheme.test.ts
index ed920ffbb21..98c9fcc4581 100644
--- a/packages/blade/src/tokens/theme/__tests__/overrideTheme.test.ts
+++ b/packages/blade/src/tokens/theme/__tests__/overrideTheme.test.ts
@@ -1,5 +1,5 @@
 import overrideTheme from '../overrideTheme';
-import { paymentTheme, bankingTheme } from '../';
+import { bladeTheme } from '../';
 import type { ThemeTokens } from '../../theme';
 import cloneDeep from '~utils/lodashButBetter/cloneDeep';
 
@@ -8,19 +8,21 @@ const invalidBaseThemeError =
   '[Blade: overrideTheme]: The base theme provided is not a valid Blade theme';
 
 describe('overrideTheme', () => {
-  it('should return new theme based on overrides for paymentTheme', () => {
+  it('should return new theme based on overrides for bladeTheme', () => {
     const overrides = {
       colors: {
         onLight: {
-          brand: {
-            primary: {
-              300: 'someothercolor',
+          surface: {
+            background: {
+              primary: {
+                intense: 'someothercolor',
+              },
             },
           },
           feedback: {
             background: {
               positive: {
-                highContrast: 'someothercolor',
+                intense: 'someothercolor',
               },
             },
           },
@@ -28,12 +30,13 @@ describe('overrideTheme', () => {
       },
     };
 
-    const overridenTheme: ThemeTokens = cloneDeep(paymentTheme);
-    overridenTheme.colors.onLight.brand.primary[300] = overrides.colors.onLight.brand.primary[300];
-    overridenTheme.colors.onLight.feedback.background.positive.highContrast =
-      overrides.colors.onLight.feedback.background.positive.highContrast;
+    const overridenTheme: ThemeTokens = cloneDeep(bladeTheme);
+    overridenTheme.colors.onLight.surface.background.primary.intense =
+      overrides.colors.onLight.surface.background.primary.intense;
+    overridenTheme.colors.onLight.feedback.background.positive.intense =
+      overrides.colors.onLight.feedback.background.positive.intense;
 
-    const overrideThemeResult = overrideTheme({ baseThemeTokens: paymentTheme, overrides });
+    const overrideThemeResult = overrideTheme({ baseThemeTokens: bladeTheme, overrides });
     expect(overrideThemeResult).toEqual(overridenTheme);
   });
 
@@ -41,15 +44,17 @@ describe('overrideTheme', () => {
     const overrides = {
       colors: {
         onLight: {
-          brand: {
-            primary: {
-              300: 'someothercolor',
+          surface: {
+            background: {
+              primary: {
+                intense: 'someothercolor',
+              },
             },
           },
           feedback: {
             background: {
               positive: {
-                highContrast: 'someothercolor',
+                intense: 'someothercolor',
               },
             },
           },
@@ -57,12 +62,13 @@ describe('overrideTheme', () => {
       },
     };
 
-    const overridenTheme: ThemeTokens = cloneDeep(bankingTheme);
-    overridenTheme.colors.onLight.brand.primary[300] = overrides.colors.onLight.brand.primary[300];
-    overridenTheme.colors.onLight.feedback.background.positive.highContrast =
-      overrides.colors.onLight.feedback.background.positive.highContrast;
+    const overridenTheme: ThemeTokens = cloneDeep(bladeTheme);
+    overridenTheme.colors.onLight.surface.background.primary.intense =
+      overrides.colors.onLight.surface.background.primary.intense;
+    overridenTheme.colors.onLight.feedback.background.positive.intense =
+      overrides.colors.onLight.feedback.background.positive.intense;
 
-    const overrideThemeResult = overrideTheme({ baseThemeTokens: bankingTheme, overrides });
+    const overrideThemeResult = overrideTheme({ baseThemeTokens: bladeTheme, overrides });
     expect(overrideThemeResult).toEqual(overridenTheme);
   });
 
@@ -71,16 +77,18 @@ describe('overrideTheme', () => {
     const overrides = {
       colors: {
         onLight: {
-          brand: {
-            primary: {
-              // this will fail the test since empty value is not allowed
-              300: '',
+          surface: {
+            background: {
+              primary: {
+                // this will fail test since empty values are not allowed
+                intense: '',
+              },
             },
           },
           feedback: {
             background: {
               positive: {
-                highContrast: 'someothercolor',
+                intense: 'someothercolor',
               },
             },
           },
@@ -90,7 +98,7 @@ describe('overrideTheme', () => {
 
     expect(() => {
       overrideTheme({
-        baseThemeTokens: paymentTheme,
+        baseThemeTokens: bladeTheme,
         overrides,
       });
     }).toThrowError(invalidOverridesObjectError);
@@ -102,16 +110,18 @@ describe('overrideTheme', () => {
     const invalidBaseTheme = {
       colors: {
         onLight: {
-          brand: {
-            primary: {
-              // this will fail the test since empty value is not allowed
-              300: '',
+          surface: {
+            background: {
+              primary: {
+                // this will fail test since empty values are not allowed
+                intense: '',
+              },
             },
           },
           feedback: {
             background: {
               positive: {
-                highContrast: 'someothercolor',
+                intense: 'someothercolor',
               },
             },
           },
diff --git a/packages/blade/src/tokens/theme/bankingTheme.ts b/packages/blade/src/tokens/theme/bankingTheme.ts
deleted file mode 100644
index ca178846ca2..00000000000
--- a/packages/blade/src/tokens/theme/bankingTheme.ts
+++ /dev/null
@@ -1,2676 +0,0 @@
-import type { ThemeTokens, ColorsWithModes } from './theme';
-import {
-  border,
-  breakpoints,
-  colors as globalColors,
-  motion,
-  spacing,
-  typography,
-  elevation,
-} from '~tokens/global';
-
-const colors: ColorsWithModes = {
-  onLight: {
-    surface: {
-      background: {
-        level1: {
-          lowContrast: globalColors.neutral.navyGrayLight[100],
-          highContrast: globalColors.neutral.navyGrayLight[1200],
-        },
-        level2: {
-          lowContrast: globalColors.neutral.navyGrayLight[0],
-          highContrast: globalColors.neutral.navyGrayLight[1100],
-        },
-        level3: {
-          lowContrast: globalColors.neutral.navyGrayLight[50],
-          highContrast: globalColors.neutral.navyGrayLight[1000],
-        },
-      },
-      border: {
-        normal: {
-          lowContrast: globalColors.neutral.navyGrayLight.a100,
-          highContrast: globalColors.neutral.navyGrayLight.a400,
-        },
-        subtle: {
-          lowContrast: globalColors.neutral.navyGrayLight.a50,
-          highContrast: globalColors.neutral.navyGrayLight.a300,
-        },
-      },
-      text: {
-        normal: {
-          lowContrast: globalColors.neutral.navyGrayLight[1200],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-        subtle: {
-          lowContrast: globalColors.neutral.navyGrayLight[900],
-          highContrast: globalColors.neutral.navyGrayLight[100],
-        },
-        subdued: {
-          lowContrast: globalColors.neutral.navyGrayLight[800],
-          highContrast: globalColors.neutral.navyGrayLight[300],
-        },
-        muted: {
-          lowContrast: globalColors.neutral.navyGrayLight[600],
-          highContrast: globalColors.neutral.navyGrayLight[400],
-        },
-        placeholder: {
-          lowContrast: globalColors.neutral.navyGrayLight[500],
-          highContrast: globalColors.neutral.navyGrayLight[500],
-        },
-      },
-      action: {
-        icon: {
-          default: {
-            lowContrast: globalColors.neutral.navyGrayLight[500],
-            highContrast: globalColors.neutral.navyGrayLight.a500,
-          },
-          hover: {
-            lowContrast: globalColors.neutral.navyGrayLight[800],
-            highContrast: globalColors.neutral.navyGrayLight[0],
-          },
-          focus: {
-            lowContrast: globalColors.neutral.navyGrayLight[800],
-            highContrast: globalColors.neutral.navyGrayLight[0],
-          },
-          active: {
-            lowContrast: globalColors.neutral.navyGrayLight[800],
-            highContrast: globalColors.neutral.navyGrayLight[0],
-          },
-          disabled: {
-            lowContrast: globalColors.neutral.navyGrayLight.a100,
-            highContrast: globalColors.neutral.navyGrayLight.a100,
-          },
-        },
-      },
-      overlay: {
-        background: {
-          400: globalColors.neutral.navyGrayLight.a1100,
-          800: globalColors.neutral.ashGrayLight.a1100,
-        },
-      },
-      popup: { background: globalColors.neutral.navyGrayLight[0] },
-    },
-    brand: {
-      primary: {
-        300: globalColors.chromatic.azure.a50,
-        400: globalColors.chromatic.azure.a100,
-        500: globalColors.chromatic.azure[600],
-        600: globalColors.chromatic.azure[700],
-        700: globalColors.chromatic.azure[800],
-        800: globalColors.chromatic.azure[950],
-      },
-      gray: {
-        200: {
-          lowContrast: globalColors.neutral.navyGrayLight[50],
-          highContrast: globalColors.neutral.navyGrayLight[1000],
-        },
-        300: {
-          lowContrast: globalColors.neutral.navyGrayLight[100],
-          highContrast: globalColors.neutral.navyGrayLight[900],
-        },
-        400: {
-          lowContrast: globalColors.neutral.navyGrayLight[300],
-          highContrast: globalColors.neutral.navyGrayLight[800],
-        },
-        500: {
-          lowContrast: globalColors.neutral.navyGrayLight[500],
-          highContrast: globalColors.neutral.navyGrayLight[700],
-        },
-        600: {
-          lowContrast: globalColors.neutral.navyGrayLight[600],
-          highContrast: globalColors.neutral.navyGrayLight[500],
-        },
-        700: {
-          lowContrast: globalColors.neutral.navyGrayLight[800],
-          highContrast: globalColors.neutral.navyGrayLight[100],
-        },
-        a50: {
-          lowContrast: globalColors.neutral.navyGrayLight.a50,
-          highContrast: globalColors.neutral.navyGrayLight.a300,
-        },
-        a100: {
-          lowContrast: globalColors.neutral.navyGrayLight.a100,
-          highContrast: globalColors.neutral.navyGrayLight.a400,
-        },
-      },
-      secondary: { 500: globalColors.chromatic.cider[600] },
-    },
-    feedback: {
-      background: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald.a50,
-          highContrast: globalColors.chromatic.emerald[700],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson.a50,
-          highContrast: globalColors.chromatic.crimson[700],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider.a50,
-          highContrast: globalColors.chromatic.cider[700],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire.a50,
-          highContrast: globalColors.chromatic.sapphire[600],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.navyGrayLight.a50,
-          highContrast: globalColors.neutral.navyGrayLight[1000],
-        },
-      },
-      border: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald.a200,
-          highContrast: globalColors.chromatic.emerald[700],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson.a200,
-          highContrast: globalColors.chromatic.crimson[700],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider.a200,
-          highContrast: globalColors.chromatic.cider[700],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire.a200,
-          highContrast: globalColors.chromatic.sapphire[600],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.navyGrayLight.a200,
-          highContrast: globalColors.neutral.navyGrayLight[1000],
-        },
-      },
-      text: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald[700],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson[700],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider[700],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire[600],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.navyGrayLight[900],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-      },
-      icon: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald[700],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson[700],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider[700],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire[600],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.navyGrayLight[900],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-      },
-      positive: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[800],
-                lowContrast: globalColors.chromatic.emerald.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a100,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald.a50 },
-              hover: { lowContrast: globalColors.chromatic.emerald.a100 },
-              focus: { lowContrast: globalColors.chromatic.emerald.a200 },
-              active: { lowContrast: globalColors.chromatic.emerald.a100 },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald.a200 },
-              hover: { lowContrast: globalColors.chromatic.emerald.a200 },
-              focus: { lowContrast: globalColors.chromatic.emerald.a200 },
-              active: { lowContrast: globalColors.chromatic.emerald.a200 },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[700] },
-              hover: { lowContrast: globalColors.chromatic.emerald[700] },
-              focus: { lowContrast: globalColors.chromatic.emerald[700] },
-              active: { lowContrast: globalColors.chromatic.emerald[700] },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[200],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[700] },
-              hover: { lowContrast: globalColors.chromatic.emerald[700] },
-              focus: { lowContrast: globalColors.chromatic.emerald[700] },
-              active: { lowContrast: globalColors.chromatic.emerald[700] },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[200],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-        },
-      },
-      negative: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[800],
-                lowContrast: globalColors.chromatic.crimson.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson.a50 },
-              hover: { lowContrast: globalColors.chromatic.crimson.a100 },
-              focus: { lowContrast: globalColors.chromatic.crimson.a200 },
-              active: { lowContrast: globalColors.chromatic.crimson.a200 },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson.a200 },
-              hover: { lowContrast: globalColors.chromatic.crimson.a200 },
-              focus: { lowContrast: globalColors.chromatic.crimson.a200 },
-              active: { lowContrast: globalColors.chromatic.crimson.a200 },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[700] },
-              hover: { lowContrast: globalColors.chromatic.crimson[700] },
-              focus: { lowContrast: globalColors.chromatic.crimson[700] },
-              active: { lowContrast: globalColors.chromatic.crimson[700] },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[700],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson.a200,
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[700] },
-              hover: { lowContrast: globalColors.chromatic.crimson[700] },
-              focus: { lowContrast: globalColors.chromatic.crimson[700] },
-              active: { lowContrast: globalColors.chromatic.crimson[700] },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[700],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson.a200,
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-        },
-      },
-      notice: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[700],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[800],
-                lowContrast: globalColors.chromatic.cider.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[900],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[900],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[700],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider.a50 },
-              hover: { lowContrast: globalColors.chromatic.cider.a100 },
-              focus: { lowContrast: globalColors.chromatic.cider.a200 },
-              active: { lowContrast: globalColors.chromatic.cider.a200 },
-              disabled: { lowContrast: globalColors.chromatic.cider.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider.a200 },
-              hover: { lowContrast: globalColors.chromatic.cider.a200 },
-              focus: { lowContrast: globalColors.chromatic.cider.a200 },
-              active: { lowContrast: globalColors.chromatic.cider.a200 },
-              disabled: { lowContrast: globalColors.chromatic.cider.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[700] },
-              hover: { lowContrast: globalColors.chromatic.cider[700] },
-              focus: { lowContrast: globalColors.chromatic.cider[700] },
-              active: { lowContrast: globalColors.chromatic.cider[700] },
-              disabled: { lowContrast: globalColors.chromatic.cider.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[700],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider.a200,
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[700] },
-              hover: { lowContrast: globalColors.chromatic.cider[700] },
-              focus: { lowContrast: globalColors.chromatic.cider[700] },
-              active: { lowContrast: globalColors.chromatic.cider[700] },
-              disabled: { lowContrast: globalColors.chromatic.cider.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[700],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider.a200,
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-        },
-      },
-      information: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[700],
-                lowContrast: globalColors.chromatic.sapphire.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire.a50 },
-              hover: { lowContrast: globalColors.chromatic.sapphire.a100 },
-              focus: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              active: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              hover: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              focus: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              active: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[700] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[700] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[700] },
-              active: { lowContrast: globalColors.chromatic.sapphire[700] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[700],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire.a200,
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[700] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[700] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[700] },
-              active: { lowContrast: globalColors.chromatic.sapphire[700] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[700],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire.a200,
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-        },
-      },
-      neutral: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.navyGrayLight[1000],
-                lowContrast: globalColors.neutral.navyGrayLight.a50,
-              },
-              hover: {
-                highContrast: globalColors.neutral.navyGrayLight[1100],
-                lowContrast: globalColors.neutral.navyGrayLight.a100,
-              },
-              focus: {
-                highContrast: globalColors.neutral.navyGrayLight[1200],
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-              },
-              active: {
-                highContrast: globalColors.neutral.navyGrayLight[1200],
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-              },
-              disabled: {
-                highContrast: globalColors.neutral.navyGrayLight[1000],
-                lowContrast: globalColors.neutral.navyGrayLight.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.navyGrayLight.a50 },
-              hover: { lowContrast: globalColors.neutral.navyGrayLight.a100 },
-              focus: { lowContrast: globalColors.neutral.navyGrayLight.a200 },
-              active: { lowContrast: globalColors.neutral.navyGrayLight.a200 },
-              disabled: { lowContrast: globalColors.neutral.navyGrayLight.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.navyGrayLight[500],
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-              },
-              hover: {
-                highContrast: globalColors.neutral.navyGrayLight[500],
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-              },
-              focus: {
-                highContrast: globalColors.neutral.navyGrayLight[500],
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-              },
-              active: {
-                highContrast: globalColors.neutral.navyGrayLight[500],
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-              },
-              disabled: {
-                highContrast: globalColors.neutral.navyGrayLight[700],
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.navyGrayLight.a200 },
-              hover: { lowContrast: globalColors.neutral.navyGrayLight.a200 },
-              focus: { lowContrast: globalColors.neutral.navyGrayLight.a200 },
-              active: { lowContrast: globalColors.neutral.navyGrayLight.a200 },
-              disabled: { lowContrast: globalColors.neutral.navyGrayLight.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.navyGrayLight[50],
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-              },
-              hover: {
-                highContrast: globalColors.neutral.navyGrayLight[50],
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-              },
-              focus: {
-                highContrast: globalColors.neutral.navyGrayLight[50],
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-              },
-              active: {
-                highContrast: globalColors.neutral.navyGrayLight[50],
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.navyGrayLight[700],
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.navyGrayLight[900] },
-              hover: { lowContrast: globalColors.neutral.navyGrayLight[900] },
-              focus: { lowContrast: globalColors.neutral.navyGrayLight[900] },
-              active: { lowContrast: globalColors.neutral.navyGrayLight[900] },
-              disabled: { lowContrast: globalColors.neutral.navyGrayLight.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-                highContrast: globalColors.neutral.navyGrayLight[50],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.navyGrayLight[800],
-                highContrast: globalColors.neutral.navyGrayLight[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.navyGrayLight[1000],
-                highContrast: globalColors.neutral.navyGrayLight[400],
-              },
-              active: {
-                lowContrast: globalColors.neutral.navyGrayLight[1000],
-                highContrast: globalColors.neutral.navyGrayLight[400],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-                highContrast: globalColors.neutral.navyGrayLight[700],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.navyGrayLight[50],
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-              },
-              hover: {
-                highContrast: globalColors.neutral.navyGrayLight[50],
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-              },
-              focus: {
-                highContrast: globalColors.neutral.navyGrayLight[50],
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-              },
-              active: {
-                highContrast: globalColors.neutral.navyGrayLight[50],
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.navyGrayLight[700],
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.navyGrayLight[900] },
-              hover: { lowContrast: globalColors.neutral.navyGrayLight[900] },
-              focus: { lowContrast: globalColors.neutral.navyGrayLight[900] },
-              active: { lowContrast: globalColors.neutral.navyGrayLight[900] },
-              disabled: { lowContrast: globalColors.neutral.navyGrayLight.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.navyGrayLight[900],
-                highContrast: globalColors.neutral.navyGrayLight[50],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.navyGrayLight[800],
-                highContrast: globalColors.neutral.navyGrayLight[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.navyGrayLight[1000],
-                highContrast: globalColors.neutral.navyGrayLight[400],
-              },
-              active: {
-                lowContrast: globalColors.neutral.navyGrayLight[1000],
-                highContrast: globalColors.neutral.navyGrayLight[400],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.navyGrayLight.a200,
-                highContrast: globalColors.neutral.navyGrayLight[700],
-              },
-            },
-          },
-        },
-      },
-    },
-    action: {
-      background: {
-        primary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[900],
-          disabled: globalColors.neutral.navyGrayLight[300],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure.a00,
-          hover: globalColors.chromatic.azure.a50,
-          focus: globalColors.chromatic.azure.a100,
-          active: globalColors.chromatic.azure.a200,
-          disabled: globalColors.neutral.navyGrayLight.a00,
-        },
-        tertiary: {
-          default: globalColors.neutral.navyGrayLight.a50,
-          hover: globalColors.neutral.navyGrayLight.a100,
-          focus: globalColors.neutral.navyGrayLight.a200,
-          active: globalColors.neutral.navyGrayLight.a200,
-          disabled: globalColors.neutral.navyGrayLight.a50,
-        },
-      },
-      border: {
-        primary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[900],
-          disabled: globalColors.neutral.navyGrayLight[300],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[600],
-          active: globalColors.chromatic.azure[600],
-          disabled: globalColors.neutral.navyGrayLight[400],
-        },
-        tertiary: {
-          default: globalColors.neutral.navyGrayLight.a00,
-          hover: globalColors.neutral.navyGrayLight[400],
-          focus: globalColors.neutral.navyGrayLight[400],
-          active: globalColors.neutral.navyGrayLight[400],
-          disabled: globalColors.neutral.navyGrayLight[300],
-        },
-      },
-      text: {
-        primary: {
-          default: globalColors.neutral.navyGrayLight[0],
-          hover: globalColors.neutral.navyGrayLight[0],
-          focus: globalColors.neutral.navyGrayLight[0],
-          active: globalColors.neutral.navyGrayLight[0],
-          disabled: globalColors.neutral.navyGrayLight[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[600],
-          active: globalColors.chromatic.azure[600],
-          disabled: globalColors.neutral.navyGrayLight[400],
-        },
-        tertiary: {
-          default: globalColors.neutral.navyGrayLight[1000],
-          hover: globalColors.neutral.navyGrayLight[1000],
-          focus: globalColors.neutral.navyGrayLight[1000],
-          active: globalColors.neutral.navyGrayLight[1000],
-          disabled: globalColors.neutral.navyGrayLight[400],
-        },
-        link: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.navyGrayLight[400],
-          visited: globalColors.chromatic.orchid[400],
-        },
-      },
-      icon: {
-        primary: {
-          default: globalColors.neutral.navyGrayLight[0],
-          hover: globalColors.neutral.navyGrayLight[0],
-          focus: globalColors.neutral.navyGrayLight[0],
-          active: globalColors.neutral.navyGrayLight[0],
-          disabled: globalColors.neutral.navyGrayLight[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[600],
-          active: globalColors.chromatic.azure[600],
-          disabled: globalColors.neutral.navyGrayLight[400],
-        },
-        tertiary: {
-          default: globalColors.neutral.navyGrayLight[1000],
-          hover: globalColors.neutral.navyGrayLight[1000],
-          focus: globalColors.neutral.navyGrayLight[1000],
-          active: globalColors.neutral.navyGrayLight[1000],
-          disabled: globalColors.neutral.navyGrayLight[400],
-        },
-        link: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.navyGrayLight[400],
-          visited: globalColors.chromatic.orchid[400],
-        },
-      },
-    },
-    static: { white: globalColors.neutral.ashGrayLight[0] },
-    white: {
-      action: {
-        background: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a300,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a300,
-          },
-        },
-        border: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a00,
-            focus: globalColors.neutral.ashGrayLight.a00,
-            active: globalColors.neutral.ashGrayLight.a00,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-        },
-        text: {
-          primary: {
-            default: globalColors.chromatic.azure[600],
-            hover: globalColors.chromatic.azure[600],
-            focus: globalColors.chromatic.azure[600],
-            active: globalColors.chromatic.azure[600],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[400],
-          },
-        },
-        icon: {
-          primary: {
-            default: globalColors.chromatic.azure[600],
-            hover: globalColors.chromatic.azure[600],
-            focus: globalColors.chromatic.azure[600],
-            active: globalColors.chromatic.azure[600],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[400],
-          },
-        },
-      },
-    },
-    badge: {
-      background: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a50,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      border: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a200,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      text: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[600],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-      },
-      icon: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[600],
-          highContrast: globalColors.neutral.navyGrayLight[0],
-        },
-      },
-    },
-  },
-  onDark: {
-    surface: {
-      background: {
-        level1: {
-          lowContrast: globalColors.neutral.navyGrayDark[1300],
-          highContrast: globalColors.neutral.navyGrayDark[800],
-        },
-        level2: {
-          lowContrast: globalColors.neutral.navyGrayDark[1100],
-          highContrast: globalColors.neutral.navyGrayDark[700],
-        },
-        level3: {
-          lowContrast: globalColors.neutral.navyGrayDark[900],
-          highContrast: globalColors.neutral.navyGrayDark[600],
-        },
-      },
-      border: {
-        normal: {
-          lowContrast: globalColors.neutral.navyGrayDark.a100,
-          highContrast: globalColors.neutral.navyGrayDark.a400,
-        },
-        subtle: {
-          lowContrast: globalColors.neutral.navyGrayDark.a50,
-          highContrast: globalColors.neutral.navyGrayDark.a300,
-        },
-      },
-      text: {
-        normal: {
-          lowContrast: globalColors.neutral.navyGrayDark[0],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-        subtle: {
-          lowContrast: globalColors.neutral.navyGrayDark[50],
-          highContrast: globalColors.neutral.navyGrayDark[50],
-        },
-        subdued: {
-          lowContrast: globalColors.neutral.navyGrayDark[100],
-          highContrast: globalColors.neutral.navyGrayDark[100],
-        },
-        muted: {
-          lowContrast: globalColors.neutral.navyGrayDark[200],
-          highContrast: globalColors.neutral.navyGrayDark[200],
-        },
-        placeholder: {
-          lowContrast: globalColors.neutral.navyGrayDark[300],
-          highContrast: globalColors.neutral.navyGrayDark[300],
-        },
-      },
-      action: {
-        icon: {
-          default: {
-            lowContrast: globalColors.neutral.navyGrayDark[400],
-            highContrast: globalColors.neutral.navyGrayDark.a200,
-          },
-          hover: {
-            lowContrast: globalColors.neutral.navyGrayDark[200],
-            highContrast: globalColors.neutral.navyGrayDark[0],
-          },
-          focus: {
-            lowContrast: globalColors.neutral.navyGrayDark[200],
-            highContrast: globalColors.neutral.navyGrayDark[0],
-          },
-          active: {
-            lowContrast: globalColors.neutral.navyGrayDark[200],
-            highContrast: globalColors.neutral.navyGrayDark[0],
-          },
-          disabled: {
-            lowContrast: globalColors.neutral.navyGrayDark.a100,
-            highContrast: globalColors.neutral.navyGrayDark.a100,
-          },
-        },
-      },
-      overlay: {
-        background: {
-          400: globalColors.neutral.navyGrayDark.a1100,
-          800: globalColors.neutral.ashGrayDark.a1100,
-        },
-      },
-      popup: { background: globalColors.neutral.navyGrayDark[700] },
-    },
-    brand: {
-      primary: {
-        300: globalColors.chromatic.azure.a100,
-        400: globalColors.chromatic.azure.a200,
-        500: globalColors.chromatic.azure[400],
-        600: globalColors.chromatic.azure[500],
-        700: globalColors.chromatic.azure[600],
-        800: globalColors.chromatic.azure[900],
-      },
-      gray: {
-        200: {
-          lowContrast: globalColors.neutral.navyGrayDark[800],
-          highContrast: globalColors.neutral.navyGrayDark[600],
-        },
-        300: {
-          lowContrast: globalColors.neutral.navyGrayDark[700],
-          highContrast: globalColors.neutral.navyGrayDark[500],
-        },
-        400: {
-          lowContrast: globalColors.neutral.navyGrayDark[600],
-          highContrast: globalColors.neutral.navyGrayDark[400],
-        },
-        500: {
-          lowContrast: globalColors.neutral.navyGrayDark[500],
-          highContrast: globalColors.neutral.navyGrayDark[300],
-        },
-        600: {
-          lowContrast: globalColors.neutral.navyGrayDark[400],
-          highContrast: globalColors.neutral.navyGrayDark[200],
-        },
-        700: {
-          lowContrast: globalColors.neutral.navyGrayDark[200],
-          highContrast: globalColors.neutral.navyGrayDark[50],
-        },
-        a50: {
-          lowContrast: globalColors.neutral.navyGrayDark.a50,
-          highContrast: globalColors.neutral.navyGrayDark.a300,
-        },
-        a100: {
-          lowContrast: globalColors.neutral.navyGrayDark.a100,
-          highContrast: globalColors.neutral.navyGrayDark.a400,
-        },
-      },
-      secondary: { 500: globalColors.chromatic.cider[600] },
-    },
-    feedback: {
-      background: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald.a100,
-          highContrast: globalColors.chromatic.emerald[700],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson.a100,
-          highContrast: globalColors.chromatic.crimson[700],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider.a100,
-          highContrast: globalColors.chromatic.cider[800],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire.a100,
-          highContrast: globalColors.chromatic.sapphire[600],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.navyGrayDark.a100,
-          highContrast: globalColors.neutral.navyGrayDark.a100,
-        },
-      },
-      border: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald.a200,
-          highContrast: globalColors.chromatic.emerald[700],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson.a200,
-          highContrast: globalColors.chromatic.crimson[700],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider.a200,
-          highContrast: globalColors.chromatic.cider[800],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire.a200,
-          highContrast: globalColors.chromatic.sapphire[600],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.navyGrayDark.a200,
-          highContrast: globalColors.neutral.navyGrayDark[50],
-        },
-      },
-      text: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald[500],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson[400],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider[400],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire[400],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.navyGrayDark[100],
-          highContrast: globalColors.neutral.navyGrayDark[50],
-        },
-      },
-      icon: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald[500],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson[400],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider[400],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire[400],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.navyGrayDark[100],
-          highContrast: globalColors.neutral.navyGrayDark[50],
-        },
-      },
-      positive: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[800],
-                lowContrast: globalColors.chromatic.emerald.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald.a50 },
-              hover: { lowContrast: globalColors.chromatic.emerald.a100 },
-              focus: { lowContrast: globalColors.chromatic.emerald.a200 },
-              active: { lowContrast: globalColors.chromatic.emerald.a200 },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[700] },
-              hover: { lowContrast: globalColors.chromatic.emerald[700] },
-              focus: { lowContrast: globalColors.chromatic.emerald[700] },
-              active: { lowContrast: globalColors.chromatic.emerald[700] },
-              disabled: { lowContrast: globalColors.chromatic.emerald[700] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[500] },
-              hover: { lowContrast: globalColors.chromatic.emerald[500] },
-              focus: { lowContrast: globalColors.chromatic.emerald[500] },
-              active: { lowContrast: globalColors.chromatic.emerald[500] },
-              disabled: { lowContrast: globalColors.chromatic.emerald[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[500],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[500] },
-              hover: { lowContrast: globalColors.chromatic.emerald[500] },
-              focus: { lowContrast: globalColors.chromatic.emerald[500] },
-              active: { lowContrast: globalColors.chromatic.emerald[500] },
-              disabled: { lowContrast: globalColors.chromatic.emerald[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[500],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-        },
-      },
-      negative: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[800],
-                lowContrast: globalColors.chromatic.crimson.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson.a50 },
-              hover: { lowContrast: globalColors.chromatic.crimson.a100 },
-              focus: { lowContrast: globalColors.chromatic.crimson.a200 },
-              active: { lowContrast: globalColors.chromatic.crimson.a200 },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[500] },
-              hover: { lowContrast: globalColors.chromatic.crimson[500] },
-              focus: { lowContrast: globalColors.chromatic.crimson[500] },
-              active: { lowContrast: globalColors.chromatic.crimson[500] },
-              disabled: { lowContrast: globalColors.chromatic.crimson[900] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[400] },
-              hover: { lowContrast: globalColors.chromatic.crimson[400] },
-              focus: { lowContrast: globalColors.chromatic.crimson[400] },
-              active: { lowContrast: globalColors.chromatic.crimson[400] },
-              disabled: { lowContrast: globalColors.chromatic.crimson[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[500],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[400],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson[900],
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[400] },
-              hover: { lowContrast: globalColors.chromatic.crimson[400] },
-              focus: { lowContrast: globalColors.chromatic.crimson[400] },
-              active: { lowContrast: globalColors.chromatic.crimson[400] },
-              disabled: { lowContrast: globalColors.chromatic.crimson[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[500],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[400],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson[900],
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-        },
-      },
-      notice: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[800],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[900],
-                lowContrast: globalColors.chromatic.cider.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[950],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[950],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[800],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider.a50 },
-              hover: { lowContrast: globalColors.chromatic.cider.a100 },
-              focus: { lowContrast: globalColors.chromatic.cider.a200 },
-              active: { lowContrast: globalColors.chromatic.cider.a200 },
-              disabled: { lowContrast: globalColors.chromatic.cider.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[800] },
-              hover: { lowContrast: globalColors.chromatic.cider[800] },
-              focus: { lowContrast: globalColors.chromatic.cider[800] },
-              active: { lowContrast: globalColors.chromatic.cider[800] },
-              disabled: { lowContrast: globalColors.chromatic.cider[900] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[500] },
-              hover: { lowContrast: globalColors.chromatic.cider[500] },
-              focus: { lowContrast: globalColors.chromatic.cider[500] },
-              active: { lowContrast: globalColors.chromatic.cider[500] },
-              disabled: { lowContrast: globalColors.chromatic.cider[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[500],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[400],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[500] },
-              hover: { lowContrast: globalColors.chromatic.cider[500] },
-              focus: { lowContrast: globalColors.chromatic.cider[500] },
-              active: { lowContrast: globalColors.chromatic.cider[500] },
-              disabled: { lowContrast: globalColors.chromatic.cider[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[500],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[400],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-        },
-      },
-      information: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[700],
-                lowContrast: globalColors.chromatic.sapphire.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire.a50 },
-              hover: { lowContrast: globalColors.chromatic.sapphire.a100 },
-              focus: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              active: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[700] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[700] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[700] },
-              active: { lowContrast: globalColors.chromatic.sapphire[700] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire[900] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[500] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[500] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[500] },
-              active: { lowContrast: globalColors.chromatic.sapphire[500] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[500],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[400],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire[900],
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[500] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[500] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[500] },
-              active: { lowContrast: globalColors.chromatic.sapphire[500] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[500],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[400],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire[900],
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-        },
-      },
-      neutral: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.navyGrayDark[50],
-                lowContrast: globalColors.neutral.navyGrayDark.a50,
-              },
-              hover: {
-                highContrast: globalColors.neutral.navyGrayDark[100],
-                lowContrast: globalColors.neutral.navyGrayDark.a100,
-              },
-              focus: {
-                highContrast: globalColors.neutral.navyGrayDark[200],
-                lowContrast: globalColors.neutral.navyGrayDark.a200,
-              },
-              active: {
-                highContrast: globalColors.neutral.navyGrayDark[200],
-                lowContrast: globalColors.neutral.navyGrayDark.a200,
-              },
-              disabled: {
-                highContrast: globalColors.neutral.navyGrayDark[50],
-                lowContrast: globalColors.neutral.navyGrayDark.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.navyGrayDark.a50 },
-              hover: { lowContrast: globalColors.neutral.navyGrayDark.a100 },
-              focus: { lowContrast: globalColors.neutral.navyGrayDark.a200 },
-              active: { lowContrast: globalColors.neutral.navyGrayDark.a200 },
-              disabled: { lowContrast: globalColors.neutral.navyGrayDark.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.navyGrayDark[300],
-                lowContrast: globalColors.neutral.navyGrayDark[400],
-              },
-              hover: {
-                highContrast: globalColors.neutral.navyGrayDark[300],
-                lowContrast: globalColors.neutral.navyGrayDark[400],
-              },
-              focus: {
-                highContrast: globalColors.neutral.navyGrayDark[300],
-                lowContrast: globalColors.neutral.navyGrayDark[400],
-              },
-              active: {
-                highContrast: globalColors.neutral.navyGrayDark[300],
-                lowContrast: globalColors.neutral.navyGrayDark[400],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.navyGrayDark[300],
-                lowContrast: globalColors.neutral.navyGrayDark[400],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.navyGrayDark[400] },
-              hover: { lowContrast: globalColors.neutral.navyGrayDark[400] },
-              focus: { lowContrast: globalColors.neutral.navyGrayDark[400] },
-              active: { lowContrast: globalColors.neutral.navyGrayDark[400] },
-              disabled: { lowContrast: globalColors.neutral.navyGrayDark[400] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.navyGrayDark[700],
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              hover: {
-                highContrast: globalColors.neutral.navyGrayDark[700],
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              focus: {
-                highContrast: globalColors.neutral.navyGrayDark[700],
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              active: {
-                highContrast: globalColors.neutral.navyGrayDark[700],
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.navyGrayDark[300],
-                lowContrast: globalColors.neutral.navyGrayDark[400],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.navyGrayDark[100] },
-              hover: { lowContrast: globalColors.neutral.navyGrayDark[100] },
-              focus: { lowContrast: globalColors.neutral.navyGrayDark[100] },
-              active: { lowContrast: globalColors.neutral.navyGrayDark[100] },
-              disabled: { lowContrast: globalColors.neutral.navyGrayDark[400] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-                highContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.navyGrayDark[200],
-                highContrast: globalColors.neutral.navyGrayDark[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.navyGrayDark[300],
-                highContrast: globalColors.neutral.navyGrayDark[300],
-              },
-              active: {
-                lowContrast: globalColors.neutral.navyGrayDark[300],
-                highContrast: globalColors.neutral.navyGrayDark[300],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.navyGrayDark[400],
-                highContrast: globalColors.neutral.navyGrayDark[400],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.navyGrayDark[700],
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              hover: {
-                highContrast: globalColors.neutral.navyGrayDark[700],
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              focus: {
-                highContrast: globalColors.neutral.navyGrayDark[700],
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              active: {
-                highContrast: globalColors.neutral.navyGrayDark[700],
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.navyGrayDark[300],
-                lowContrast: globalColors.neutral.navyGrayDark[400],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.navyGrayDark[100] },
-              hover: { lowContrast: globalColors.neutral.navyGrayDark[100] },
-              focus: { lowContrast: globalColors.neutral.navyGrayDark[100] },
-              active: { lowContrast: globalColors.neutral.navyGrayDark[100] },
-              disabled: { lowContrast: globalColors.neutral.navyGrayDark[400] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.navyGrayDark[100],
-                highContrast: globalColors.neutral.navyGrayDark[100],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.navyGrayDark[200],
-                highContrast: globalColors.neutral.navyGrayDark[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.navyGrayDark[300],
-                highContrast: globalColors.neutral.navyGrayDark[300],
-              },
-              active: {
-                lowContrast: globalColors.neutral.navyGrayDark[300],
-                highContrast: globalColors.neutral.navyGrayDark[300],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.navyGrayDark[400],
-                highContrast: globalColors.neutral.navyGrayDark[400],
-              },
-            },
-          },
-        },
-      },
-    },
-    action: {
-      background: {
-        primary: {
-          default: globalColors.chromatic.azure[500],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[700],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.navyGrayDark[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure.a00,
-          hover: globalColors.chromatic.azure.a50,
-          focus: globalColors.chromatic.azure.a100,
-          active: globalColors.chromatic.azure.a200,
-          disabled: globalColors.neutral.navyGrayDark.a00,
-        },
-        tertiary: {
-          default: globalColors.neutral.navyGrayDark.a50,
-          hover: globalColors.neutral.navyGrayDark.a100,
-          focus: globalColors.neutral.navyGrayDark.a200,
-          active: globalColors.neutral.navyGrayDark.a200,
-          disabled: globalColors.neutral.navyGrayDark.a50,
-        },
-      },
-      border: {
-        primary: {
-          default: globalColors.chromatic.azure[500],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[700],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.navyGrayDark[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[400],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[400],
-          active: globalColors.chromatic.azure[400],
-          disabled: globalColors.neutral.navyGrayDark[500],
-        },
-        tertiary: {
-          default: globalColors.neutral.navyGrayDark.a00,
-          hover: globalColors.neutral.navyGrayDark[400],
-          focus: globalColors.neutral.navyGrayDark[400],
-          active: globalColors.neutral.navyGrayDark[400],
-          disabled: globalColors.neutral.navyGrayDark[600],
-        },
-      },
-      text: {
-        primary: {
-          default: globalColors.neutral.navyGrayDark[0],
-          hover: globalColors.neutral.navyGrayDark[0],
-          focus: globalColors.neutral.navyGrayDark[0],
-          active: globalColors.neutral.navyGrayDark[0],
-          disabled: globalColors.neutral.navyGrayDark[300],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[400],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[400],
-          active: globalColors.chromatic.azure[400],
-          disabled: globalColors.neutral.navyGrayDark[500],
-        },
-        tertiary: {
-          default: globalColors.neutral.navyGrayDark[100],
-          hover: globalColors.neutral.navyGrayDark[100],
-          focus: globalColors.neutral.navyGrayDark[100],
-          active: globalColors.neutral.navyGrayDark[100],
-          disabled: globalColors.neutral.navyGrayDark[500],
-        },
-        link: {
-          default: globalColors.chromatic.azure[300],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[500],
-          active: globalColors.chromatic.azure[500],
-          disabled: globalColors.neutral.navyGrayDark[400],
-          visited: globalColors.chromatic.orchid[300],
-        },
-      },
-      icon: {
-        primary: {
-          default: globalColors.neutral.navyGrayDark[0],
-          hover: globalColors.neutral.navyGrayDark[0],
-          focus: globalColors.neutral.navyGrayDark[0],
-          active: globalColors.neutral.navyGrayDark[0],
-          disabled: globalColors.neutral.navyGrayDark[300],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[400],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[400],
-          active: globalColors.chromatic.azure[400],
-          disabled: globalColors.neutral.navyGrayDark[500],
-        },
-        tertiary: {
-          default: globalColors.neutral.navyGrayDark[100],
-          hover: globalColors.neutral.navyGrayDark[100],
-          focus: globalColors.neutral.navyGrayDark[100],
-          active: globalColors.neutral.navyGrayDark[100],
-          disabled: globalColors.neutral.navyGrayDark[500],
-        },
-        link: {
-          default: globalColors.chromatic.azure[300],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[500],
-          active: globalColors.chromatic.azure[500],
-          disabled: globalColors.neutral.navyGrayDark[400],
-          visited: globalColors.chromatic.orchid[300],
-        },
-      },
-    },
-    static: { white: globalColors.neutral.ashGrayLight[0] },
-    white: {
-      action: {
-        background: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a300,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a300,
-          },
-        },
-        border: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a00,
-            focus: globalColors.neutral.ashGrayLight.a00,
-            active: globalColors.neutral.ashGrayLight.a00,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-        },
-        text: {
-          primary: {
-            default: globalColors.chromatic.azure[500],
-            hover: globalColors.chromatic.azure[500],
-            focus: globalColors.chromatic.azure[500],
-            active: globalColors.chromatic.azure[500],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[300],
-          },
-        },
-        icon: {
-          primary: {
-            default: globalColors.chromatic.azure[500],
-            hover: globalColors.chromatic.azure[500],
-            focus: globalColors.chromatic.azure[500],
-            active: globalColors.chromatic.azure[500],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[300],
-          },
-        },
-      },
-    },
-    badge: {
-      background: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a100,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      border: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a200,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      text: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[400],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-      },
-      icon: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[400],
-          highContrast: globalColors.neutral.navyGrayDark[0],
-        },
-      },
-    },
-  },
-};
-
-const bankingTheme: ThemeTokens = {
-  name: 'bankingTheme',
-  border,
-  breakpoints,
-  colors,
-  motion,
-  spacing,
-  elevation,
-  typography,
-};
-
-export default bankingTheme;
diff --git a/packages/blade/src/tokens/theme/bladeTheme.ts b/packages/blade/src/tokens/theme/bladeTheme.ts
index 6f8c4846ff0..8f09c743902 100644
--- a/packages/blade/src/tokens/theme/bladeTheme.ts
+++ b/packages/blade/src/tokens/theme/bladeTheme.ts
@@ -7,2658 +7,909 @@ import {
   spacing,
   typography,
   elevation,
+  opacity,
 } from '~tokens/global';
 
 const colors: ColorsWithModes = {
   onLight: {
     surface: {
       background: {
-        level1: {
-          lowContrast: globalColors.neutral.blueGrayLight[100],
-          highContrast: globalColors.neutral.blueGrayLight[1200],
+        gray: {
+          subtle: globalColors.neutral.blueGrayLight[100],
+          moderate: globalColors.neutral.blueGrayLight[50],
+          intense: globalColors.neutral.blueGrayLight[0],
         },
-        level2: {
-          lowContrast: globalColors.neutral.blueGrayLight[0],
-          highContrast: globalColors.neutral.blueGrayLight[1100],
+        primary: {
+          subtle: globalColors.chromatic.azure.a50,
+          intense: globalColors.chromatic.azure[500],
+        },
+        sea: {
+          subtle: globalColors.chromatic.sea[50],
+          intense: globalColors.chromatic.sea[800],
         },
-        level3: {
-          lowContrast: globalColors.neutral.blueGrayLight[50],
-          highContrast: globalColors.neutral.blueGrayLight[1000],
+        cloud: {
+          subtle: globalColors.chromatic.cloud[50],
+          intense: globalColors.chromatic.cloud[800],
         },
       },
       border: {
-        normal: {
-          lowContrast: globalColors.neutral.blueGrayLight.a100,
-          highContrast: globalColors.neutral.blueGrayLight.a400,
+        gray: {
+          normal: globalColors.neutral.blueGrayLight[500],
+          subtle: globalColors.neutral.blueGrayLight[300],
+          muted: globalColors.neutral.blueGrayLight.a100,
         },
-        subtle: {
-          lowContrast: globalColors.neutral.blueGrayLight.a50,
-          highContrast: globalColors.neutral.blueGrayLight.a300,
+        primary: {
+          normal: globalColors.chromatic.azure[500],
+          muted: globalColors.chromatic.azure.a100,
         },
       },
       text: {
-        normal: {
-          lowContrast: globalColors.neutral.blueGrayLight[1200],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+        gray: {
+          normal: globalColors.neutral.blueGrayLight[1200],
+          subtle: globalColors.neutral.blueGrayLight[900],
+          muted: globalColors.neutral.blueGrayLight[600],
+          disabled: globalColors.neutral.blueGrayLight.a200,
         },
-        subtle: {
-          lowContrast: globalColors.neutral.blueGrayLight[900],
-          highContrast: globalColors.neutral.blueGrayLight[100],
+        primary: {
+          normal: globalColors.chromatic.azure[500],
         },
-        subdued: {
-          lowContrast: globalColors.neutral.blueGrayLight[800],
-          highContrast: globalColors.neutral.blueGrayLight[300],
+        onSea: {
+          onSubtle: globalColors.chromatic.forest[800],
+          onIntense: globalColors.chromatic.forest[200],
         },
-        muted: {
-          lowContrast: globalColors.neutral.blueGrayLight[600],
-          highContrast: globalColors.neutral.blueGrayLight[400],
+        onCloud: {
+          onSubtle: globalColors.chromatic.azure[600],
+          onIntense: globalColors.chromatic.azure[200],
         },
-        placeholder: {
-          lowContrast: globalColors.neutral.blueGrayLight[500],
-          highContrast: globalColors.neutral.blueGrayLight[500],
+        staticWhite: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[450],
+          muted: globalColors.neutral.white[200],
+          disabled: globalColors.neutral.white[100],
         },
-      },
-      action: {
-        icon: {
-          default: {
-            lowContrast: globalColors.neutral.blueGrayLight[500],
-            highContrast: globalColors.neutral.blueGrayLight.a500,
-          },
-          hover: {
-            lowContrast: globalColors.neutral.blueGrayLight[800],
-            highContrast: globalColors.neutral.blueGrayLight[0],
-          },
-          focus: {
-            lowContrast: globalColors.neutral.blueGrayLight[800],
-            highContrast: globalColors.neutral.blueGrayLight[0],
-          },
-          active: {
-            lowContrast: globalColors.neutral.blueGrayLight[800],
-            highContrast: globalColors.neutral.blueGrayLight[0],
-          },
-          disabled: {
-            lowContrast: globalColors.neutral.blueGrayLight.a100,
-            highContrast: globalColors.neutral.blueGrayLight.a100,
-          },
+        staticBlack: {
+          normal: globalColors.neutral.black[500],
+          subtle: globalColors.neutral.black[300],
+          muted: globalColors.neutral.black[200],
+          disabled: globalColors.neutral.black[100],
         },
       },
-      overlay: {
-        background: {
-          400: globalColors.neutral.blueGrayLight.a1100,
-          800: globalColors.neutral.ashGrayLight.a1100,
-        },
-      },
-      popup: { background: globalColors.neutral.blueGrayLight[0] },
-    },
-    brand: {
-      primary: {
-        300: globalColors.chromatic.azure.a50,
-        400: globalColors.chromatic.azure.a100,
-        500: globalColors.chromatic.azure[600],
-        600: globalColors.chromatic.azure[700],
-        700: globalColors.chromatic.azure[800],
-        800: globalColors.chromatic.azure[950],
-      },
-      gray: {
-        200: {
-          lowContrast: globalColors.neutral.blueGrayLight[50],
-          highContrast: globalColors.neutral.blueGrayLight[1000],
-        },
-        300: {
-          lowContrast: globalColors.neutral.blueGrayLight[100],
-          highContrast: globalColors.neutral.blueGrayLight[900],
-        },
-        400: {
-          lowContrast: globalColors.neutral.blueGrayLight[300],
-          highContrast: globalColors.neutral.blueGrayLight[800],
+      icon: {
+        gray: {
+          normal: globalColors.neutral.blueGrayLight[1200],
+          subtle: globalColors.neutral.blueGrayLight[900],
+          muted: globalColors.neutral.blueGrayLight[600],
+          disabled: globalColors.neutral.blueGrayLight.a200,
         },
-        500: {
-          lowContrast: globalColors.neutral.blueGrayLight[500],
-          highContrast: globalColors.neutral.blueGrayLight[700],
+        primary: {
+          normal: globalColors.chromatic.azure[500],
         },
-        600: {
-          lowContrast: globalColors.neutral.blueGrayLight[600],
-          highContrast: globalColors.neutral.blueGrayLight[500],
+        onSea: {
+          onSubtle: globalColors.chromatic.forest[600],
+          onIntense: globalColors.chromatic.forest[400],
         },
-        700: {
-          lowContrast: globalColors.neutral.blueGrayLight[800],
-          highContrast: globalColors.neutral.blueGrayLight[100],
+        onCloud: {
+          onSubtle: globalColors.chromatic.azure[400],
+          onIntense: globalColors.chromatic.azure[300],
         },
-        a50: {
-          lowContrast: globalColors.neutral.blueGrayLight.a50,
-          highContrast: globalColors.neutral.blueGrayLight.a300,
+        staticWhite: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[450],
+          muted: globalColors.neutral.white[200],
+          disabled: globalColors.neutral.white[100],
         },
-        a100: {
-          lowContrast: globalColors.neutral.blueGrayLight.a100,
-          highContrast: globalColors.neutral.blueGrayLight.a400,
+        staticBlack: {
+          normal: globalColors.neutral.black[500],
+          subtle: globalColors.neutral.black[300],
+          muted: globalColors.neutral.black[200],
+          disabled: globalColors.neutral.black[100],
         },
       },
-      secondary: { 500: globalColors.chromatic.emerald[500] },
     },
     feedback: {
       background: {
         positive: {
-          lowContrast: globalColors.chromatic.emerald.a50,
-          highContrast: globalColors.chromatic.emerald[700],
+          subtle: globalColors.chromatic.emerald.a50,
+          intense: globalColors.chromatic.emerald[600],
         },
         negative: {
-          lowContrast: globalColors.chromatic.crimson.a50,
-          highContrast: globalColors.chromatic.crimson[700],
+          subtle: globalColors.chromatic.crimson.a50,
+          intense: globalColors.chromatic.crimson[600],
         },
         notice: {
-          lowContrast: globalColors.chromatic.cider.a50,
-          highContrast: globalColors.chromatic.cider[700],
+          subtle: globalColors.chromatic.cider.a50,
+          intense: globalColors.chromatic.cider[600],
         },
         information: {
-          lowContrast: globalColors.chromatic.sapphire.a50,
-          highContrast: globalColors.chromatic.sapphire[600],
+          subtle: globalColors.chromatic.sapphire.a50,
+          intense: globalColors.chromatic.sapphire[600],
         },
         neutral: {
-          lowContrast: globalColors.neutral.blueGrayLight.a50,
-          highContrast: globalColors.neutral.blueGrayLight[1000],
+          subtle: globalColors.neutral.blueGrayLight.a50,
+          intense: globalColors.neutral.blueGrayLight[1000],
         },
       },
       border: {
         positive: {
-          lowContrast: globalColors.chromatic.emerald.a200,
-          highContrast: globalColors.chromatic.emerald[700],
+          subtle: globalColors.chromatic.emerald.a100,
+          intense: globalColors.chromatic.emerald[700],
         },
         negative: {
-          lowContrast: globalColors.chromatic.crimson.a200,
-          highContrast: globalColors.chromatic.crimson[700],
+          subtle: globalColors.chromatic.crimson.a100,
+          intense: globalColors.chromatic.crimson[700],
         },
         notice: {
-          lowContrast: globalColors.chromatic.cider.a200,
-          highContrast: globalColors.chromatic.cider[700],
+          subtle: globalColors.chromatic.cider.a100,
+          intense: globalColors.chromatic.cider[700],
         },
         information: {
-          lowContrast: globalColors.chromatic.sapphire.a200,
-          highContrast: globalColors.chromatic.sapphire[600],
+          subtle: globalColors.chromatic.sapphire.a100,
+          intense: globalColors.chromatic.sapphire[700],
         },
         neutral: {
-          lowContrast: globalColors.neutral.blueGrayLight.a200,
-          highContrast: globalColors.neutral.blueGrayLight[1000],
+          subtle: globalColors.neutral.blueGrayLight.a100,
+          intense: globalColors.neutral.blueGrayLight[1100],
         },
       },
       text: {
         positive: {
-          lowContrast: globalColors.chromatic.emerald[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+          subtle: globalColors.chromatic.emerald[100],
+          intense: globalColors.chromatic.emerald[700],
         },
         negative: {
-          lowContrast: globalColors.chromatic.crimson[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+          subtle: globalColors.chromatic.crimson[100],
+          intense: globalColors.chromatic.crimson[600],
         },
         notice: {
-          lowContrast: globalColors.chromatic.cider[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+          subtle: globalColors.chromatic.cider[100],
+          intense: globalColors.chromatic.cider[700],
         },
         information: {
-          lowContrast: globalColors.chromatic.sapphire[600],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+          subtle: globalColors.chromatic.sapphire[100],
+          intense: globalColors.chromatic.sapphire[700],
         },
         neutral: {
-          lowContrast: globalColors.neutral.blueGrayLight[900],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+          subtle: globalColors.neutral.blueGrayLight[500],
+          intense: globalColors.neutral.blueGrayLight[1100],
         },
       },
       icon: {
         positive: {
-          lowContrast: globalColors.chromatic.emerald[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+          subtle: globalColors.chromatic.emerald[100],
+          intense: globalColors.chromatic.emerald[700],
         },
         negative: {
-          lowContrast: globalColors.chromatic.crimson[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+          subtle: globalColors.chromatic.crimson[100],
+          intense: globalColors.chromatic.crimson[600],
         },
         notice: {
-          lowContrast: globalColors.chromatic.cider[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+          subtle: globalColors.chromatic.cider[100],
+          intense: globalColors.chromatic.cider[700],
         },
         information: {
-          lowContrast: globalColors.chromatic.sapphire[600],
-          highContrast: globalColors.neutral.blueGrayLight[0],
+          subtle: globalColors.chromatic.sapphire[100],
+          intense: globalColors.chromatic.sapphire[700],
         },
         neutral: {
-          lowContrast: globalColors.neutral.blueGrayLight[900],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-      },
-      positive: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[800],
-                lowContrast: globalColors.chromatic.emerald.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald.a50 },
-              hover: { lowContrast: globalColors.chromatic.emerald.a100 },
-              focus: { lowContrast: globalColors.chromatic.emerald.a200 },
-              active: { lowContrast: globalColors.chromatic.emerald.a200 },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald.a200 },
-              hover: { lowContrast: globalColors.chromatic.emerald.a200 },
-              focus: { lowContrast: globalColors.chromatic.emerald.a200 },
-              active: { lowContrast: globalColors.chromatic.emerald.a200 },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[700] },
-              hover: { lowContrast: globalColors.chromatic.emerald[700] },
-              focus: { lowContrast: globalColors.chromatic.emerald[700] },
-              active: { lowContrast: globalColors.chromatic.emerald[700] },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[200],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[700] },
-              hover: { lowContrast: globalColors.chromatic.emerald[700] },
-              focus: { lowContrast: globalColors.chromatic.emerald[700] },
-              active: { lowContrast: globalColors.chromatic.emerald[700] },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[200],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-        },
-      },
-      negative: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[800],
-                lowContrast: globalColors.chromatic.crimson.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson.a50 },
-              hover: { lowContrast: globalColors.chromatic.crimson.a100 },
-              focus: { lowContrast: globalColors.chromatic.crimson.a200 },
-              active: { lowContrast: globalColors.chromatic.crimson.a200 },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson.a200 },
-              hover: { lowContrast: globalColors.chromatic.crimson.a200 },
-              focus: { lowContrast: globalColors.chromatic.crimson.a200 },
-              active: { lowContrast: globalColors.chromatic.crimson.a200 },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[700] },
-              hover: { lowContrast: globalColors.chromatic.crimson[700] },
-              focus: { lowContrast: globalColors.chromatic.crimson[700] },
-              active: { lowContrast: globalColors.chromatic.crimson[700] },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[700],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson.a200,
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[700] },
-              hover: { lowContrast: globalColors.chromatic.crimson[700] },
-              focus: { lowContrast: globalColors.chromatic.crimson[700] },
-              active: { lowContrast: globalColors.chromatic.crimson[700] },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[700],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson.a200,
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
+          subtle: globalColors.neutral.blueGrayLight[500],
+          intense: globalColors.neutral.blueGrayLight[1100],
         },
       },
-      notice: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[700],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[800],
-                lowContrast: globalColors.chromatic.cider.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[900],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[900],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[700],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider.a50 },
-              hover: { lowContrast: globalColors.chromatic.cider.a100 },
-              focus: { lowContrast: globalColors.chromatic.cider.a200 },
-              active: { lowContrast: globalColors.chromatic.cider.a200 },
-              disabled: { lowContrast: globalColors.chromatic.cider.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider.a200 },
-              hover: { lowContrast: globalColors.chromatic.cider.a200 },
-              focus: { lowContrast: globalColors.chromatic.cider.a200 },
-              active: { lowContrast: globalColors.chromatic.cider.a200 },
-              disabled: { lowContrast: globalColors.chromatic.cider.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[700] },
-              hover: { lowContrast: globalColors.chromatic.cider[700] },
-              focus: { lowContrast: globalColors.chromatic.cider[700] },
-              active: { lowContrast: globalColors.chromatic.cider[700] },
-              disabled: { lowContrast: globalColors.chromatic.cider.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[700],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider.a200,
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[700] },
-              hover: { lowContrast: globalColors.chromatic.cider[700] },
-              focus: { lowContrast: globalColors.chromatic.cider[700] },
-              active: { lowContrast: globalColors.chromatic.cider[700] },
-              disabled: { lowContrast: globalColors.chromatic.cider.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[700],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider.a200,
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
+    },
+    interactive: {
+      background: {
+        positive: {
+          default: globalColors.chromatic.emerald[600],
+          highlighted: globalColors.chromatic.emerald[700],
+          disabled: globalColors.chromatic.emerald.a50,
+          faded: globalColors.chromatic.emerald.a50,
+          fadedHighlighted: globalColors.chromatic.emerald.a100,
         },
-      },
-      information: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[700],
-                lowContrast: globalColors.chromatic.sapphire.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire.a50 },
-              hover: { lowContrast: globalColors.chromatic.sapphire.a100 },
-              focus: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              active: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              hover: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              focus: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              active: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[700] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[700] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[700] },
-              active: { lowContrast: globalColors.chromatic.sapphire[700] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[700],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire.a200,
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[700] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[700] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[700] },
-              active: { lowContrast: globalColors.chromatic.sapphire[700] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[700],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire.a200,
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
+        negative: {
+          default: globalColors.chromatic.crimson[600],
+          highlighted: globalColors.chromatic.crimson[700],
+          disabled: globalColors.chromatic.crimson.a50,
+          faded: globalColors.chromatic.crimson.a50,
+          fadedHighlighted: globalColors.chromatic.crimson.a100,
         },
-      },
-      neutral: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayLight[1000],
-                lowContrast: globalColors.neutral.blueGrayLight.a50,
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayLight[1100],
-                lowContrast: globalColors.neutral.blueGrayLight.a100,
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayLight[1200],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayLight[1200],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayLight[1000],
-                lowContrast: globalColors.neutral.blueGrayLight.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayLight.a50 },
-              hover: { lowContrast: globalColors.neutral.blueGrayLight.a100 },
-              focus: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              active: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              disabled: { lowContrast: globalColors.neutral.blueGrayLight.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayLight[500],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayLight[500],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayLight[500],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayLight[500],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayLight[700],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              hover: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              focus: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              active: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              disabled: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayLight[700],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              hover: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              focus: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              active: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-                highContrast: globalColors.neutral.blueGrayLight[50],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.blueGrayLight[800],
-                highContrast: globalColors.neutral.blueGrayLight[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.blueGrayLight[1000],
-                highContrast: globalColors.neutral.blueGrayLight[400],
-              },
-              active: {
-                lowContrast: globalColors.neutral.blueGrayLight[1000],
-                highContrast: globalColors.neutral.blueGrayLight[400],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-                highContrast: globalColors.neutral.blueGrayLight[700],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayLight[700],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              hover: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              focus: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              active: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-                highContrast: globalColors.neutral.blueGrayLight[50],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.blueGrayLight[800],
-                highContrast: globalColors.neutral.blueGrayLight[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.blueGrayLight[1000],
-                highContrast: globalColors.neutral.blueGrayLight[400],
-              },
-              active: {
-                lowContrast: globalColors.neutral.blueGrayLight[1000],
-                highContrast: globalColors.neutral.blueGrayLight[400],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-                highContrast: globalColors.neutral.blueGrayLight[700],
-              },
-            },
-          },
+        notice: {
+          default: globalColors.chromatic.cider[600],
+          highlighted: globalColors.chromatic.cider[700],
+          disabled: globalColors.chromatic.cider.a50,
+          faded: globalColors.chromatic.cider.a50,
+          fadedHighlighted: globalColors.chromatic.cider.a100,
         },
-      },
-    },
-    action: {
-      background: {
-        primary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[900],
-          disabled: globalColors.neutral.blueGrayLight[300],
+        information: {
+          default: globalColors.chromatic.sapphire[600],
+          highlighted: globalColors.chromatic.sapphire[700],
+          disabled: globalColors.chromatic.sapphire.a50,
+          faded: globalColors.chromatic.sapphire.a50,
+          fadedHighlighted: globalColors.chromatic.sapphire.a100,
         },
-        secondary: {
-          default: globalColors.chromatic.azure.a00,
-          hover: globalColors.chromatic.azure.a50,
-          focus: globalColors.chromatic.azure.a100,
-          active: globalColors.chromatic.azure.a200,
-          disabled: globalColors.neutral.blueGrayLight.a00,
+        neutral: {
+          default: globalColors.neutral.blueGrayLight[1000],
+          highlighted: globalColors.neutral.blueGrayLight[1100],
+          disabled: globalColors.neutral.blueGrayLight.a100,
+          faded: globalColors.neutral.blueGrayLight.a100,
+          fadedHighlighted: globalColors.neutral.blueGrayLight.a200,
         },
-        tertiary: {
+        gray: {
           default: globalColors.neutral.blueGrayLight.a50,
-          hover: globalColors.neutral.blueGrayLight.a100,
-          focus: globalColors.neutral.blueGrayLight.a200,
-          active: globalColors.neutral.blueGrayLight.a200,
+          highlighted: globalColors.neutral.blueGrayLight.a100,
           disabled: globalColors.neutral.blueGrayLight.a50,
+          faded: globalColors.neutral.blueGrayLight.a75,
+          fadedHighlighted: globalColors.neutral.blueGrayLight.a100,
+        },
+        primary: {
+          default: globalColors.chromatic.azure[500],
+          highlighted: globalColors.chromatic.azure[600],
+          disabled: globalColors.chromatic.azure.a50,
+          faded: globalColors.chromatic.azure.a50,
+          fadedHighlighted: globalColors.chromatic.azure.a100,
+        },
+        staticBlack: {
+          default: globalColors.neutral.black[500],
+          highlighted: globalColors.neutral.black[500],
+          disabled: globalColors.neutral.black[200],
+          faded: globalColors.neutral.black[50],
+          fadedHighlighted: globalColors.neutral.black[100],
+        },
+        staticWhite: {
+          default: globalColors.neutral.white[500],
+          highlighted: globalColors.neutral.white[400],
+          disabled: globalColors.neutral.white[50],
+          faded: globalColors.neutral.white[50],
+          fadedHighlighted: globalColors.neutral.white[100],
         },
       },
       border: {
-        primary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[900],
-          disabled: globalColors.neutral.blueGrayLight[300],
+        positive: {
+          default: globalColors.chromatic.emerald[600],
+          highlighted: globalColors.chromatic.emerald[700],
+          disabled: globalColors.chromatic.emerald.a100,
+          faded: globalColors.chromatic.emerald.a100,
+        },
+        negative: {
+          default: globalColors.chromatic.crimson[600],
+          highlighted: globalColors.chromatic.crimson[700],
+          disabled: globalColors.chromatic.crimson.a100,
+          faded: globalColors.chromatic.crimson.a100,
+        },
+        notice: {
+          default: globalColors.chromatic.cider[600],
+          highlighted: globalColors.chromatic.cider[700],
+          disabled: globalColors.chromatic.cider.a100,
+          faded: globalColors.chromatic.cider.a100,
         },
-        secondary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[600],
-          active: globalColors.chromatic.azure[600],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayLight.a00,
-          hover: globalColors.neutral.blueGrayLight[300],
-          focus: globalColors.neutral.blueGrayLight[300],
-          active: globalColors.neutral.blueGrayLight[300],
+        information: {
+          default: globalColors.chromatic.sapphire[600],
+          highlighted: globalColors.chromatic.sapphire[700],
+          disabled: globalColors.chromatic.sapphire.a100,
+          faded: globalColors.chromatic.sapphire.a100,
+        },
+        neutral: {
+          default: globalColors.neutral.blueGrayLight[700],
+          highlighted: globalColors.neutral.blueGrayLight[700],
           disabled: globalColors.neutral.blueGrayLight[300],
+          faded: globalColors.neutral.blueGrayLight.a100,
+        },
+        gray: {
+          default: globalColors.neutral.blueGrayLight[400],
+          highlighted: globalColors.neutral.blueGrayLight[400],
+          disabled: globalColors.neutral.blueGrayLight[200],
+          faded: globalColors.neutral.blueGrayLight.a100,
+        },
+        primary: {
+          default: globalColors.chromatic.azure[500],
+          highlighted: globalColors.chromatic.azure[500],
+          disabled: globalColors.chromatic.azure.a100,
+          faded: globalColors.chromatic.azure.a100,
+        },
+        staticWhite: {
+          default: globalColors.neutral.white[500],
+          highlighted: globalColors.neutral.white[400],
+          disabled: globalColors.neutral.white[100],
+          faded: globalColors.neutral.white[50],
+        },
+        staticBlack: {
+          default: globalColors.neutral.black[500],
+          highlighted: globalColors.neutral.black[500],
+          disabled: globalColors.neutral.black[100],
+          faded: globalColors.neutral.black[100],
         },
       },
       text: {
+        positive: {
+          normal: globalColors.chromatic.emerald[700],
+          subtle: globalColors.chromatic.emerald[600],
+          muted: globalColors.chromatic.emerald[400],
+          disabled: globalColors.chromatic.emerald.a200,
+        },
+        negative: {
+          normal: globalColors.chromatic.crimson[600],
+          subtle: globalColors.chromatic.crimson[500],
+          muted: globalColors.chromatic.crimson[400],
+          disabled: globalColors.chromatic.crimson.a200,
+        },
+        notice: {
+          normal: globalColors.chromatic.cider[700],
+          subtle: globalColors.chromatic.cider[600],
+          muted: globalColors.chromatic.cider[400],
+          disabled: globalColors.chromatic.cider.a200,
+        },
+        information: {
+          normal: globalColors.chromatic.sapphire[700],
+          subtle: globalColors.chromatic.sapphire[600],
+          muted: globalColors.chromatic.sapphire[400],
+          disabled: globalColors.chromatic.sapphire.a200,
+        },
+        neutral: {
+          normal: globalColors.neutral.blueGrayLight[1100],
+          subtle: globalColors.neutral.blueGrayLight[900],
+          muted: globalColors.neutral.blueGrayLight[600],
+          disabled: globalColors.neutral.blueGrayLight.a200,
+        },
+        gray: {
+          normal: globalColors.neutral.blueGrayLight[1200],
+          subtle: globalColors.neutral.blueGrayLight[900],
+          muted: globalColors.neutral.blueGrayLight[600],
+          disabled: globalColors.neutral.blueGrayLight.a200,
+        },
         primary: {
-          default: globalColors.neutral.blueGrayLight[0],
-          hover: globalColors.neutral.blueGrayLight[0],
-          focus: globalColors.neutral.blueGrayLight[0],
-          active: globalColors.neutral.blueGrayLight[0],
-          disabled: globalColors.neutral.blueGrayLight[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[600],
-          active: globalColors.chromatic.azure[600],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayLight[1000],
-          hover: globalColors.neutral.blueGrayLight[1000],
-          focus: globalColors.neutral.blueGrayLight[1000],
-          active: globalColors.neutral.blueGrayLight[1000],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        link: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.blueGrayLight[400],
-          visited: globalColors.chromatic.orchid[400],
+          normal: globalColors.chromatic.azure[600],
+          subtle: globalColors.chromatic.azure[500],
+          muted: globalColors.chromatic.azure[400],
+          disabled: globalColors.chromatic.azure.a100,
+        },
+        onPrimary: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[400],
+          muted: globalColors.neutral.white[300],
+          disabled: globalColors.neutral.white[100],
+        },
+        staticWhite: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[400],
+          muted: globalColors.neutral.white[300],
+          disabled: globalColors.neutral.white[100],
+        },
+        staticBlack: {
+          normal: globalColors.neutral.black[500],
+          subtle: globalColors.neutral.black[400],
+          muted: globalColors.neutral.black[300],
+          disabled: globalColors.neutral.black[100],
         },
       },
       icon: {
+        positive: {
+          normal: globalColors.chromatic.emerald[700],
+          subtle: globalColors.chromatic.emerald[600],
+          muted: globalColors.chromatic.emerald[400],
+          disabled: globalColors.chromatic.emerald.a200,
+        },
+        negative: {
+          normal: globalColors.chromatic.crimson[600],
+          subtle: globalColors.chromatic.crimson[500],
+          muted: globalColors.chromatic.crimson[400],
+          disabled: globalColors.chromatic.crimson.a200,
+        },
+        notice: {
+          normal: globalColors.chromatic.cider[700],
+          subtle: globalColors.chromatic.cider[600],
+          muted: globalColors.chromatic.cider[400],
+          disabled: globalColors.chromatic.cider.a200,
+        },
+        information: {
+          normal: globalColors.chromatic.sapphire[700],
+          subtle: globalColors.chromatic.sapphire[600],
+          muted: globalColors.chromatic.sapphire[400],
+          disabled: globalColors.chromatic.sapphire.a200,
+        },
+        neutral: {
+          normal: globalColors.neutral.blueGrayLight[1100],
+          subtle: globalColors.neutral.blueGrayLight[900],
+          muted: globalColors.neutral.blueGrayLight[600],
+          disabled: globalColors.neutral.blueGrayLight.a200,
+        },
+        gray: {
+          normal: globalColors.neutral.blueGrayLight[1200],
+          subtle: globalColors.neutral.blueGrayLight[900],
+          muted: globalColors.neutral.blueGrayLight[600],
+          disabled: globalColors.neutral.blueGrayLight.a200,
+        },
         primary: {
-          default: globalColors.neutral.blueGrayLight[0],
-          hover: globalColors.neutral.blueGrayLight[0],
-          focus: globalColors.neutral.blueGrayLight[0],
-          active: globalColors.neutral.blueGrayLight[0],
-          disabled: globalColors.neutral.blueGrayLight[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[600],
-          active: globalColors.chromatic.azure[600],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayLight[1000],
-          hover: globalColors.neutral.blueGrayLight[1000],
-          focus: globalColors.neutral.blueGrayLight[1000],
-          active: globalColors.neutral.blueGrayLight[1000],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        link: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.blueGrayLight[400],
-          visited: globalColors.chromatic.orchid[400],
+          normal: globalColors.chromatic.azure[600],
+          subtle: globalColors.chromatic.azure[500],
+          muted: globalColors.chromatic.azure[400],
+          disabled: globalColors.chromatic.azure.a100,
+        },
+        onPrimary: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[400],
+          muted: globalColors.neutral.white[300],
+          disabled: globalColors.neutral.white[100],
+        },
+        staticWhite: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[400],
+          muted: globalColors.neutral.white[300],
+          disabled: globalColors.neutral.white[100],
+        },
+        staticBlack: {
+          normal: globalColors.neutral.black[500],
+          subtle: globalColors.neutral.black[400],
+          muted: globalColors.neutral.black[300],
+          disabled: globalColors.neutral.black[100],
         },
       },
     },
-    static: { white: globalColors.neutral.ashGrayLight[0] },
-    white: {
-      action: {
-        background: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a300,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a300,
-          },
-        },
-        border: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a00,
-            focus: globalColors.neutral.ashGrayLight.a00,
-            active: globalColors.neutral.ashGrayLight.a00,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-        },
-        text: {
-          primary: {
-            default: globalColors.chromatic.azure[600],
-            hover: globalColors.chromatic.azure[600],
-            focus: globalColors.chromatic.azure[600],
-            active: globalColors.chromatic.azure[600],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[400],
-          },
-        },
-        icon: {
-          primary: {
-            default: globalColors.chromatic.azure[600],
-            hover: globalColors.chromatic.azure[600],
-            focus: globalColors.chromatic.azure[600],
-            active: globalColors.chromatic.azure[600],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[400],
-          },
-        },
+    overlay: {
+      background: {
+        moderate: globalColors.neutral.blueGrayLight.a200,
+        subtle: globalColors.neutral.black[200],
       },
     },
-    badge: {
+    popup: {
       background: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a50,
-          highContrast: globalColors.chromatic.azure[600],
-        },
+        subtle: globalColors.neutral.blueGrayLight[0],
+        intense: globalColors.neutral.blueGrayLight[1000],
       },
       border: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a200,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      text: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[600],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-      },
-      icon: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[600],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
+        subtle: globalColors.neutral.blueGrayLight.a100,
+        intense: globalColors.neutral.blueGrayLight[900],
       },
     },
+    transparent: `hsla(0, 0%, 100%, ${opacity[0]})`,
   },
   onDark: {
     surface: {
       background: {
-        level1: {
-          lowContrast: globalColors.neutral.blueGrayDark[1300],
-          highContrast: globalColors.neutral.blueGrayDark[800],
+        gray: {
+          subtle: globalColors.neutral.blueGrayDark[1300],
+          moderate: globalColors.neutral.blueGrayDark[1200],
+          intense: globalColors.neutral.blueGrayDark[1100],
+        },
+        primary: {
+          subtle: globalColors.chromatic.azure.a200,
+          intense: globalColors.chromatic.azure[500],
         },
-        level2: {
-          lowContrast: globalColors.neutral.blueGrayDark[1100],
-          highContrast: globalColors.neutral.blueGrayDark[700],
+        sea: {
+          subtle: globalColors.chromatic.sea[900],
+          intense: globalColors.chromatic.sea[100],
         },
-        level3: {
-          lowContrast: globalColors.neutral.blueGrayDark[900],
-          highContrast: globalColors.neutral.blueGrayDark[600],
+        cloud: {
+          subtle: globalColors.chromatic.cloud[900],
+          intense: globalColors.chromatic.cloud[100],
         },
       },
       border: {
-        normal: {
-          lowContrast: globalColors.neutral.blueGrayDark.a100,
-          highContrast: globalColors.neutral.blueGrayDark.a400,
+        gray: {
+          normal: globalColors.neutral.blueGrayDark[700],
+          subtle: globalColors.neutral.blueGrayDark[900],
+          muted: globalColors.neutral.blueGrayDark.a100,
         },
-        subtle: {
-          lowContrast: globalColors.neutral.blueGrayDark.a50,
-          highContrast: globalColors.neutral.blueGrayDark.a300,
+        primary: {
+          normal: globalColors.chromatic.azure[500],
+          muted: globalColors.chromatic.azure.a200,
         },
       },
       text: {
-        normal: {
-          lowContrast: globalColors.neutral.blueGrayDark[0],
-          highContrast: globalColors.neutral.blueGrayDark[0],
+        gray: {
+          normal: globalColors.neutral.blueGrayDark[50],
+          subtle: globalColors.neutral.blueGrayDark[300],
+          muted: globalColors.neutral.blueGrayDark[600],
+          disabled: globalColors.neutral.blueGrayDark.a200,
         },
-        subtle: {
-          lowContrast: globalColors.neutral.blueGrayDark[50],
-          highContrast: globalColors.neutral.blueGrayDark[50],
+        primary: {
+          normal: globalColors.chromatic.azure[300],
         },
-        subdued: {
-          lowContrast: globalColors.neutral.blueGrayDark[100],
-          highContrast: globalColors.neutral.blueGrayDark[100],
+        onSea: {
+          onSubtle: globalColors.chromatic.forest[200],
+          onIntense: globalColors.chromatic.forest[800],
         },
-        muted: {
-          lowContrast: globalColors.neutral.blueGrayDark[200],
-          highContrast: globalColors.neutral.blueGrayDark[200],
+        onCloud: {
+          onSubtle: globalColors.chromatic.azure[200],
+          onIntense: globalColors.chromatic.azure[600],
         },
-        placeholder: {
-          lowContrast: globalColors.neutral.blueGrayDark[300],
-          highContrast: globalColors.neutral.blueGrayDark[300],
+        staticWhite: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[450],
+          muted: globalColors.neutral.white[200],
+          disabled: globalColors.neutral.white[100],
         },
-      },
-      action: {
-        icon: {
-          default: {
-            lowContrast: globalColors.neutral.blueGrayDark[400],
-            highContrast: globalColors.neutral.blueGrayDark.a200,
-          },
-          hover: {
-            lowContrast: globalColors.neutral.blueGrayDark[200],
-            highContrast: globalColors.neutral.blueGrayDark[0],
-          },
-          focus: {
-            lowContrast: globalColors.neutral.blueGrayDark[200],
-            highContrast: globalColors.neutral.blueGrayDark[0],
-          },
-          active: {
-            lowContrast: globalColors.neutral.blueGrayDark[200],
-            highContrast: globalColors.neutral.blueGrayDark[0],
-          },
-          disabled: {
-            lowContrast: globalColors.neutral.blueGrayDark.a100,
-            highContrast: globalColors.neutral.blueGrayDark.a100,
-          },
+        staticBlack: {
+          normal: globalColors.neutral.black[500],
+          subtle: globalColors.neutral.black[300],
+          muted: globalColors.neutral.black[200],
+          disabled: globalColors.neutral.black[100],
         },
       },
-      overlay: {
-        background: {
-          400: globalColors.neutral.blueGrayDark.a1100,
-          800: globalColors.neutral.ashGrayDark.a1100,
-        },
-      },
-      popup: { background: globalColors.neutral.blueGrayDark[700] },
-    },
-    brand: {
-      primary: {
-        300: globalColors.chromatic.azure.a100,
-        400: globalColors.chromatic.azure.a200,
-        500: globalColors.chromatic.azure[400],
-        600: globalColors.chromatic.azure[500],
-        700: globalColors.chromatic.azure[600],
-        800: globalColors.chromatic.azure[900],
-      },
-      gray: {
-        200: {
-          lowContrast: globalColors.neutral.blueGrayDark[800],
-          highContrast: globalColors.neutral.blueGrayDark[600],
-        },
-        300: {
-          lowContrast: globalColors.neutral.blueGrayDark[700],
-          highContrast: globalColors.neutral.blueGrayDark[500],
-        },
-        400: {
-          lowContrast: globalColors.neutral.blueGrayDark[600],
-          highContrast: globalColors.neutral.blueGrayDark[400],
+      icon: {
+        gray: {
+          normal: globalColors.neutral.blueGrayDark[50],
+          subtle: globalColors.neutral.blueGrayDark[300],
+          muted: globalColors.neutral.blueGrayDark[600],
+          disabled: globalColors.neutral.blueGrayDark.a200,
         },
-        500: {
-          lowContrast: globalColors.neutral.blueGrayDark[500],
-          highContrast: globalColors.neutral.blueGrayDark[300],
+        primary: {
+          normal: globalColors.chromatic.azure[300],
         },
-        600: {
-          lowContrast: globalColors.neutral.blueGrayDark[400],
-          highContrast: globalColors.neutral.blueGrayDark[200],
+        onSea: {
+          onSubtle: globalColors.chromatic.forest[400],
+          onIntense: globalColors.chromatic.forest[600],
         },
-        700: {
-          lowContrast: globalColors.neutral.blueGrayDark[200],
-          highContrast: globalColors.neutral.blueGrayDark[50],
+        onCloud: {
+          onSubtle: globalColors.chromatic.azure[300],
+          onIntense: globalColors.chromatic.azure[400],
         },
-        a50: {
-          lowContrast: globalColors.neutral.blueGrayDark.a50,
-          highContrast: globalColors.neutral.blueGrayDark.a300,
+        staticWhite: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[450],
+          muted: globalColors.neutral.white[200],
+          disabled: globalColors.neutral.white[100],
         },
-        a100: {
-          lowContrast: globalColors.neutral.blueGrayDark.a100,
-          highContrast: globalColors.neutral.blueGrayDark.a400,
+        staticBlack: {
+          normal: globalColors.neutral.black[500],
+          subtle: globalColors.neutral.black[300],
+          muted: globalColors.neutral.black[200],
+          disabled: globalColors.neutral.black[100],
         },
       },
-      secondary: { 500: globalColors.chromatic.emerald[500] },
     },
     feedback: {
       background: {
         positive: {
-          lowContrast: globalColors.chromatic.emerald.a100,
-          highContrast: globalColors.chromatic.emerald[700],
+          subtle: globalColors.chromatic.emerald.a100,
+          intense: globalColors.chromatic.emerald[700],
         },
         negative: {
-          lowContrast: globalColors.chromatic.crimson.a100,
-          highContrast: globalColors.chromatic.crimson[700],
+          subtle: globalColors.chromatic.crimson.a100,
+          intense: globalColors.chromatic.crimson[700],
         },
         notice: {
-          lowContrast: globalColors.chromatic.cider.a100,
-          highContrast: globalColors.chromatic.cider[800],
+          subtle: globalColors.chromatic.cider.a100,
+          intense: globalColors.chromatic.cider[700],
         },
         information: {
-          lowContrast: globalColors.chromatic.sapphire.a100,
-          highContrast: globalColors.chromatic.sapphire[600],
+          subtle: globalColors.chromatic.sapphire.a100,
+          intense: globalColors.chromatic.sapphire[700],
         },
         neutral: {
-          lowContrast: globalColors.neutral.blueGrayDark.a100,
-          highContrast: globalColors.neutral.blueGrayDark.a100,
+          subtle: globalColors.neutral.blueGrayDark[900],
+          intense: globalColors.neutral.blueGrayDark[200],
         },
       },
       border: {
         positive: {
-          lowContrast: globalColors.chromatic.emerald.a200,
-          highContrast: globalColors.chromatic.emerald[700],
+          subtle: globalColors.chromatic.emerald.a200,
+          intense: globalColors.chromatic.emerald[800],
         },
         negative: {
-          lowContrast: globalColors.chromatic.crimson.a200,
-          highContrast: globalColors.chromatic.crimson[700],
+          subtle: globalColors.chromatic.crimson.a200,
+          intense: globalColors.chromatic.crimson[800],
         },
         notice: {
-          lowContrast: globalColors.chromatic.cider.a200,
-          highContrast: globalColors.chromatic.cider[800],
+          subtle: globalColors.chromatic.cider.a200,
+          intense: globalColors.chromatic.cider[800],
         },
         information: {
-          lowContrast: globalColors.chromatic.sapphire.a200,
-          highContrast: globalColors.chromatic.sapphire[600],
+          subtle: globalColors.chromatic.sapphire.a200,
+          intense: globalColors.chromatic.sapphire[800],
         },
         neutral: {
-          lowContrast: globalColors.neutral.blueGrayDark.a200,
-          highContrast: globalColors.neutral.blueGrayDark[50],
+          subtle: globalColors.neutral.blueGrayLight[900],
+          intense: globalColors.neutral.blueGrayLight[300],
         },
       },
       text: {
         positive: {
-          lowContrast: globalColors.chromatic.emerald[500],
-          highContrast: globalColors.neutral.blueGrayDark[0],
+          subtle: globalColors.chromatic.emerald[50],
+          intense: globalColors.chromatic.emerald[400],
         },
         negative: {
-          lowContrast: globalColors.chromatic.crimson[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
+          subtle: globalColors.chromatic.crimson[50],
+          intense: globalColors.chromatic.crimson[400],
         },
         notice: {
-          lowContrast: globalColors.chromatic.cider[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
+          subtle: globalColors.chromatic.cider[50],
+          intense: globalColors.chromatic.cider[400],
         },
         information: {
-          lowContrast: globalColors.chromatic.sapphire[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
+          subtle: globalColors.chromatic.sapphire[50],
+          intense: globalColors.chromatic.sapphire[400],
         },
         neutral: {
-          lowContrast: globalColors.neutral.blueGrayDark[100],
-          highContrast: globalColors.neutral.blueGrayDark[50],
+          subtle: globalColors.neutral.blueGrayDark[700],
+          intense: globalColors.neutral.blueGrayDark[50],
         },
       },
       icon: {
         positive: {
-          lowContrast: globalColors.chromatic.emerald[500],
-          highContrast: globalColors.neutral.blueGrayDark[0],
+          subtle: globalColors.chromatic.emerald[50],
+          intense: globalColors.chromatic.emerald[400],
         },
         negative: {
-          lowContrast: globalColors.chromatic.crimson[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
+          subtle: globalColors.chromatic.crimson[50],
+          intense: globalColors.chromatic.crimson[400],
         },
         notice: {
-          lowContrast: globalColors.chromatic.cider[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
+          subtle: globalColors.chromatic.cider[50],
+          intense: globalColors.chromatic.cider[400],
         },
         information: {
-          lowContrast: globalColors.chromatic.sapphire[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
+          subtle: globalColors.chromatic.sapphire[50],
+          intense: globalColors.chromatic.sapphire[400],
         },
         neutral: {
-          lowContrast: globalColors.neutral.blueGrayDark[100],
-          highContrast: globalColors.neutral.blueGrayDark[50],
+          subtle: globalColors.neutral.blueGrayDark[700],
+          intense: globalColors.neutral.blueGrayDark[50],
         },
       },
-      positive: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[800],
-                lowContrast: globalColors.chromatic.emerald.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald.a50 },
-              hover: { lowContrast: globalColors.chromatic.emerald.a100 },
-              focus: { lowContrast: globalColors.chromatic.emerald.a200 },
-              active: { lowContrast: globalColors.chromatic.emerald.a200 },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[700] },
-              hover: { lowContrast: globalColors.chromatic.emerald[700] },
-              focus: { lowContrast: globalColors.chromatic.emerald[700] },
-              active: { lowContrast: globalColors.chromatic.emerald[700] },
-              disabled: { lowContrast: globalColors.chromatic.emerald[700] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[500] },
-              hover: { lowContrast: globalColors.chromatic.emerald[500] },
-              focus: { lowContrast: globalColors.chromatic.emerald[500] },
-              active: { lowContrast: globalColors.chromatic.emerald[500] },
-              disabled: { lowContrast: globalColors.chromatic.emerald[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[500],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[500] },
-              hover: { lowContrast: globalColors.chromatic.emerald[500] },
-              focus: { lowContrast: globalColors.chromatic.emerald[500] },
-              active: { lowContrast: globalColors.chromatic.emerald[500] },
-              disabled: { lowContrast: globalColors.chromatic.emerald[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[500],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
+    },
+    interactive: {
+      background: {
+        positive: {
+          default: globalColors.chromatic.emerald[600],
+          highlighted: globalColors.chromatic.emerald[700],
+          disabled: globalColors.chromatic.emerald.a100,
+          faded: globalColors.chromatic.emerald.a150,
+          fadedHighlighted: globalColors.chromatic.emerald.a200,
         },
-      },
-      negative: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[800],
-                lowContrast: globalColors.chromatic.crimson.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson.a50 },
-              hover: { lowContrast: globalColors.chromatic.crimson.a100 },
-              focus: { lowContrast: globalColors.chromatic.crimson.a200 },
-              active: { lowContrast: globalColors.chromatic.crimson.a200 },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[500] },
-              hover: { lowContrast: globalColors.chromatic.crimson[500] },
-              focus: { lowContrast: globalColors.chromatic.crimson[500] },
-              active: { lowContrast: globalColors.chromatic.crimson[500] },
-              disabled: { lowContrast: globalColors.chromatic.crimson[900] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[400] },
-              hover: { lowContrast: globalColors.chromatic.crimson[400] },
-              focus: { lowContrast: globalColors.chromatic.crimson[400] },
-              active: { lowContrast: globalColors.chromatic.crimson[400] },
-              disabled: { lowContrast: globalColors.chromatic.crimson[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[500],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[400],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson[900],
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[400] },
-              hover: { lowContrast: globalColors.chromatic.crimson[400] },
-              focus: { lowContrast: globalColors.chromatic.crimson[400] },
-              active: { lowContrast: globalColors.chromatic.crimson[400] },
-              disabled: { lowContrast: globalColors.chromatic.crimson[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[500],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[400],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson[900],
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
+        negative: {
+          default: globalColors.chromatic.crimson[600],
+          highlighted: globalColors.chromatic.crimson[700],
+          disabled: globalColors.chromatic.crimson.a100,
+          faded: globalColors.chromatic.crimson.a150,
+          fadedHighlighted: globalColors.chromatic.crimson.a200,
         },
-      },
-      notice: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[800],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[900],
-                lowContrast: globalColors.chromatic.cider.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[950],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[950],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[800],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider.a50 },
-              hover: { lowContrast: globalColors.chromatic.cider.a100 },
-              focus: { lowContrast: globalColors.chromatic.cider.a200 },
-              active: { lowContrast: globalColors.chromatic.cider.a200 },
-              disabled: { lowContrast: globalColors.chromatic.cider.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[800] },
-              hover: { lowContrast: globalColors.chromatic.cider[800] },
-              focus: { lowContrast: globalColors.chromatic.cider[800] },
-              active: { lowContrast: globalColors.chromatic.cider[800] },
-              disabled: { lowContrast: globalColors.chromatic.cider[900] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[500] },
-              hover: { lowContrast: globalColors.chromatic.cider[500] },
-              focus: { lowContrast: globalColors.chromatic.cider[500] },
-              active: { lowContrast: globalColors.chromatic.cider[500] },
-              disabled: { lowContrast: globalColors.chromatic.cider[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[500],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[400],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider[900],
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[500] },
-              hover: { lowContrast: globalColors.chromatic.cider[500] },
-              focus: { lowContrast: globalColors.chromatic.cider[500] },
-              active: { lowContrast: globalColors.chromatic.cider[500] },
-              disabled: { lowContrast: globalColors.chromatic.cider[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[500],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[400],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider[900],
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
+        notice: {
+          default: globalColors.chromatic.cider[600],
+          highlighted: globalColors.chromatic.cider[700],
+          disabled: globalColors.chromatic.cider.a100,
+          faded: globalColors.chromatic.cider.a150,
+          fadedHighlighted: globalColors.chromatic.cider.a200,
         },
-      },
-      information: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[700],
-                lowContrast: globalColors.chromatic.sapphire.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire.a50 },
-              hover: { lowContrast: globalColors.chromatic.sapphire.a100 },
-              focus: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              active: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[700] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[700] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[700] },
-              active: { lowContrast: globalColors.chromatic.sapphire[700] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire[900] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[500] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[500] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[500] },
-              active: { lowContrast: globalColors.chromatic.sapphire[500] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[500],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[400],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire[900],
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[500] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[500] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[500] },
-              active: { lowContrast: globalColors.chromatic.sapphire[500] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[500],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[400],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire[900],
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
+        information: {
+          default: globalColors.chromatic.sapphire[600],
+          highlighted: globalColors.chromatic.sapphire[700],
+          disabled: globalColors.chromatic.sapphire.a100,
+          faded: globalColors.chromatic.sapphire.a150,
+          fadedHighlighted: globalColors.chromatic.sapphire.a200,
         },
-      },
-      neutral: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayDark[50],
-                lowContrast: globalColors.neutral.blueGrayDark.a50,
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayDark[100],
-                lowContrast: globalColors.neutral.blueGrayDark.a100,
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayDark[200],
-                lowContrast: globalColors.neutral.blueGrayDark.a200,
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayDark[200],
-                lowContrast: globalColors.neutral.blueGrayDark.a200,
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayDark[50],
-                lowContrast: globalColors.neutral.blueGrayDark.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayDark.a50 },
-              hover: { lowContrast: globalColors.neutral.blueGrayDark.a100 },
-              focus: { lowContrast: globalColors.neutral.blueGrayDark.a200 },
-              active: { lowContrast: globalColors.neutral.blueGrayDark.a200 },
-              disabled: { lowContrast: globalColors.neutral.blueGrayDark.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-              hover: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-              focus: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-              active: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              hover: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              focus: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              active: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-                highContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.blueGrayDark[200],
-                highContrast: globalColors.neutral.blueGrayDark[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.blueGrayDark[300],
-                highContrast: globalColors.neutral.blueGrayDark[300],
-              },
-              active: {
-                lowContrast: globalColors.neutral.blueGrayDark[300],
-                highContrast: globalColors.neutral.blueGrayDark[300],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-                highContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              hover: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              focus: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              active: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-                highContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.blueGrayDark[200],
-                highContrast: globalColors.neutral.blueGrayDark[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.blueGrayDark[300],
-                highContrast: globalColors.neutral.blueGrayDark[300],
-              },
-              active: {
-                lowContrast: globalColors.neutral.blueGrayDark[300],
-                highContrast: globalColors.neutral.blueGrayDark[300],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-                highContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-          },
+        neutral: {
+          default: globalColors.neutral.blueGrayDark[50],
+          highlighted: globalColors.neutral.blueGrayDark[200],
+          disabled: globalColors.neutral.blueGrayDark.a100,
+          faded: globalColors.neutral.blueGrayDark.a75,
+          fadedHighlighted: globalColors.neutral.blueGrayDark.a100,
         },
-      },
-    },
-    action: {
-      background: {
-        primary: {
-          default: globalColors.chromatic.azure[500],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[700],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.blueGrayDark[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure.a00,
-          hover: globalColors.chromatic.azure.a50,
-          focus: globalColors.chromatic.azure.a100,
-          active: globalColors.chromatic.azure.a200,
-          disabled: globalColors.neutral.blueGrayDark.a00,
-        },
-        tertiary: {
+        gray: {
           default: globalColors.neutral.blueGrayDark.a50,
-          hover: globalColors.neutral.blueGrayDark.a100,
-          focus: globalColors.neutral.blueGrayDark.a200,
-          active: globalColors.neutral.blueGrayLight.a200,
+          highlighted: globalColors.neutral.blueGrayDark.a100,
           disabled: globalColors.neutral.blueGrayDark.a50,
+          faded: globalColors.neutral.blueGrayDark.a75,
+          fadedHighlighted: globalColors.neutral.blueGrayDark.a100,
+        },
+        primary: {
+          default: globalColors.chromatic.azure[400],
+          highlighted: globalColors.chromatic.azure[500],
+          disabled: globalColors.chromatic.azure.a100,
+          faded: globalColors.chromatic.azure.a150,
+          fadedHighlighted: globalColors.chromatic.azure.a200,
+        },
+        staticBlack: {
+          default: globalColors.neutral.black[500],
+          highlighted: globalColors.neutral.black[500],
+          disabled: globalColors.neutral.black[200],
+          faded: globalColors.neutral.black[50],
+          fadedHighlighted: globalColors.neutral.black[100],
+        },
+        staticWhite: {
+          default: globalColors.neutral.white[500],
+          highlighted: globalColors.neutral.white[400],
+          disabled: globalColors.neutral.white[50],
+          faded: globalColors.neutral.white[50],
+          fadedHighlighted: globalColors.neutral.white[100],
         },
       },
       border: {
-        primary: {
-          default: globalColors.chromatic.azure[500],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[700],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.blueGrayDark[600],
+        positive: {
+          default: globalColors.chromatic.emerald[600],
+          highlighted: globalColors.chromatic.emerald[700],
+          disabled: globalColors.chromatic.emerald.a100,
+          faded: globalColors.chromatic.emerald.a100,
+        },
+        negative: {
+          default: globalColors.chromatic.crimson[600],
+          highlighted: globalColors.chromatic.crimson[700],
+          disabled: globalColors.chromatic.crimson.a100,
+          faded: globalColors.chromatic.crimson.a100,
+        },
+        notice: {
+          default: globalColors.chromatic.cider[600],
+          highlighted: globalColors.chromatic.cider[700],
+          disabled: globalColors.chromatic.cider.a100,
+          faded: globalColors.chromatic.cider.a100,
+        },
+        information: {
+          default: globalColors.chromatic.sapphire[600],
+          highlighted: globalColors.chromatic.sapphire[700],
+          disabled: globalColors.chromatic.sapphire.a100,
+          faded: globalColors.chromatic.sapphire.a100,
         },
-        secondary: {
+        neutral: {
+          default: globalColors.neutral.blueGrayDark[200],
+          highlighted: globalColors.neutral.blueGrayDark[200],
+          disabled: globalColors.neutral.blueGrayDark[800],
+          faded: globalColors.neutral.blueGrayDark.a100,
+        },
+        gray: {
+          default: globalColors.neutral.blueGrayDark[800],
+          highlighted: globalColors.neutral.blueGrayDark[800],
+          disabled: globalColors.neutral.blueGrayDark[1000],
+          faded: globalColors.neutral.blueGrayDark.a100,
+        },
+        primary: {
           default: globalColors.chromatic.azure[400],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[400],
-          active: globalColors.chromatic.azure[400],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayDark.a00,
-          hover: globalColors.neutral.blueGrayDark[400],
-          focus: globalColors.neutral.blueGrayDark[400],
-          active: globalColors.neutral.blueGrayDark[400],
-          disabled: globalColors.neutral.blueGrayDark[600],
+          highlighted: globalColors.chromatic.azure[500],
+          disabled: globalColors.chromatic.azure.a200,
+          faded: globalColors.chromatic.azure.a150,
+        },
+        staticWhite: {
+          default: globalColors.neutral.white[500],
+          highlighted: globalColors.neutral.white[400],
+          disabled: globalColors.neutral.white[100],
+          faded: globalColors.neutral.white[50],
+        },
+        staticBlack: {
+          default: globalColors.neutral.black[500],
+          highlighted: globalColors.neutral.black[500],
+          disabled: globalColors.neutral.black[100],
+          faded: globalColors.neutral.black[100],
         },
       },
       text: {
-        primary: {
-          default: globalColors.neutral.blueGrayDark[0],
-          hover: globalColors.neutral.blueGrayDark[0],
-          focus: globalColors.neutral.blueGrayDark[0],
-          active: globalColors.neutral.blueGrayDark[0],
-          disabled: globalColors.neutral.blueGrayDark[300],
+        positive: {
+          normal: globalColors.chromatic.emerald[400],
+          subtle: globalColors.chromatic.emerald[500],
+          muted: globalColors.chromatic.emerald[700],
+          disabled: globalColors.chromatic.emerald.a200,
         },
-        secondary: {
-          default: globalColors.chromatic.azure[400],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[400],
-          active: globalColors.chromatic.azure[400],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayDark[100],
-          hover: globalColors.neutral.blueGrayDark[100],
-          focus: globalColors.neutral.blueGrayDark[100],
-          active: globalColors.neutral.blueGrayDark[100],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        link: {
-          default: globalColors.chromatic.azure[300],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[500],
-          active: globalColors.chromatic.azure[500],
-          disabled: globalColors.neutral.blueGrayDark[400],
-          visited: globalColors.chromatic.orchid[300],
+        negative: {
+          normal: globalColors.chromatic.crimson[400],
+          subtle: globalColors.chromatic.crimson[500],
+          muted: globalColors.chromatic.crimson[700],
+          disabled: globalColors.chromatic.crimson.a200,
+        },
+        notice: {
+          normal: globalColors.chromatic.cider[400],
+          subtle: globalColors.chromatic.cider[500],
+          muted: globalColors.chromatic.cider[700],
+          disabled: globalColors.chromatic.cider.a200,
+        },
+        information: {
+          normal: globalColors.chromatic.sapphire[400],
+          subtle: globalColors.chromatic.sapphire[500],
+          muted: globalColors.chromatic.sapphire[700],
+          disabled: globalColors.chromatic.sapphire.a200,
+        },
+        neutral: {
+          normal: globalColors.neutral.blueGrayDark[50],
+          subtle: globalColors.neutral.blueGrayDark[300],
+          muted: globalColors.neutral.blueGrayDark[600],
+          disabled: globalColors.neutral.blueGrayDark.a200,
+        },
+        gray: {
+          normal: globalColors.neutral.blueGrayDark[50],
+          subtle: globalColors.neutral.blueGrayDark[300],
+          muted: globalColors.neutral.blueGrayDark[600],
+          disabled: globalColors.neutral.blueGrayDark.a200,
+        },
+        primary: {
+          normal: globalColors.chromatic.azure[300],
+          subtle: globalColors.chromatic.azure[400],
+          muted: globalColors.chromatic.azure[600],
+          disabled: globalColors.chromatic.azure.a200,
+        },
+        onPrimary: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[400],
+          muted: globalColors.neutral.white[300],
+          disabled: globalColors.neutral.white[100],
+        },
+        staticWhite: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[400],
+          muted: globalColors.neutral.white[300],
+          disabled: globalColors.neutral.white[100],
+        },
+        staticBlack: {
+          normal: globalColors.neutral.black[500],
+          subtle: globalColors.neutral.black[400],
+          muted: globalColors.neutral.black[300],
+          disabled: globalColors.neutral.black[100],
         },
       },
       icon: {
-        primary: {
-          default: globalColors.neutral.blueGrayDark[0],
-          hover: globalColors.neutral.blueGrayDark[0],
-          focus: globalColors.neutral.blueGrayDark[0],
-          active: globalColors.neutral.blueGrayDark[0],
-          disabled: globalColors.neutral.blueGrayDark[300],
+        positive: {
+          normal: globalColors.chromatic.emerald[400],
+          subtle: globalColors.chromatic.emerald[500],
+          muted: globalColors.chromatic.emerald[700],
+          disabled: globalColors.chromatic.emerald.a200,
         },
-        secondary: {
-          default: globalColors.chromatic.azure[400],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[400],
-          active: globalColors.chromatic.azure[400],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayDark[100],
-          hover: globalColors.neutral.blueGrayDark[100],
-          focus: globalColors.neutral.blueGrayLight[1000],
-          active: globalColors.neutral.blueGrayDark[100],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        link: {
-          default: globalColors.chromatic.azure[300],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[500],
-          active: globalColors.chromatic.azure[500],
-          disabled: globalColors.neutral.blueGrayDark[400],
-          visited: globalColors.chromatic.orchid[300],
+        negative: {
+          normal: globalColors.chromatic.crimson[400],
+          subtle: globalColors.chromatic.crimson[500],
+          muted: globalColors.chromatic.crimson[700],
+          disabled: globalColors.chromatic.crimson.a200,
+        },
+        notice: {
+          normal: globalColors.chromatic.cider[400],
+          subtle: globalColors.chromatic.cider[500],
+          muted: globalColors.chromatic.cider[700],
+          disabled: globalColors.chromatic.cider.a200,
+        },
+        information: {
+          normal: globalColors.chromatic.sapphire[400],
+          subtle: globalColors.chromatic.sapphire[500],
+          muted: globalColors.chromatic.sapphire[700],
+          disabled: globalColors.chromatic.sapphire.a200,
+        },
+        neutral: {
+          normal: globalColors.neutral.blueGrayDark[50],
+          subtle: globalColors.neutral.blueGrayDark[300],
+          muted: globalColors.neutral.blueGrayDark[600],
+          disabled: globalColors.neutral.blueGrayDark.a200,
+        },
+        gray: {
+          normal: globalColors.neutral.blueGrayDark[50],
+          subtle: globalColors.neutral.blueGrayDark[300],
+          muted: globalColors.neutral.blueGrayDark[600],
+          disabled: globalColors.neutral.blueGrayDark.a200,
+        },
+        primary: {
+          normal: globalColors.chromatic.azure[300],
+          subtle: globalColors.chromatic.azure[400],
+          muted: globalColors.chromatic.azure[600],
+          disabled: globalColors.chromatic.azure.a200,
+        },
+        onPrimary: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[400],
+          muted: globalColors.neutral.white[300],
+          disabled: globalColors.neutral.white[100],
+        },
+        staticWhite: {
+          normal: globalColors.neutral.white[500],
+          subtle: globalColors.neutral.white[400],
+          muted: globalColors.neutral.white[300],
+          disabled: globalColors.neutral.white[100],
+        },
+        staticBlack: {
+          normal: globalColors.neutral.black[500],
+          subtle: globalColors.neutral.black[400],
+          muted: globalColors.neutral.black[300],
+          disabled: globalColors.neutral.black[100],
         },
       },
     },
-    static: { white: globalColors.neutral.ashGrayLight[0] },
-    white: {
-      action: {
-        background: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a300,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a300,
-          },
-        },
-        border: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a00,
-            focus: globalColors.neutral.ashGrayLight.a00,
-            active: globalColors.neutral.ashGrayLight.a00,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-        },
-        text: {
-          primary: {
-            default: globalColors.chromatic.azure[500],
-            hover: globalColors.chromatic.azure[500],
-            focus: globalColors.chromatic.azure[500],
-            active: globalColors.chromatic.azure[500],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[300],
-          },
-        },
-        icon: {
-          primary: {
-            default: globalColors.chromatic.azure[500],
-            hover: globalColors.chromatic.azure[500],
-            focus: globalColors.chromatic.azure[500],
-            active: globalColors.chromatic.azure[500],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[300],
-          },
-        },
+    overlay: {
+      background: {
+        moderate: globalColors.neutral.blueGrayDark.a200,
+        subtle: globalColors.neutral.black[400],
       },
     },
-    badge: {
+    popup: {
       background: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a100,
-          highContrast: globalColors.chromatic.azure[600],
-        },
+        subtle: globalColors.neutral.blueGrayDark[1000],
+        intense: globalColors.neutral.blueGrayDark[1000],
       },
       border: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a200,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      text: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-      },
-      icon: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
+        subtle: globalColors.neutral.blueGrayDark.a100,
+        intense: globalColors.neutral.blueGrayDark.a100,
       },
     },
+    transparent: `hsla(0, 0%, 100%, ${opacity[0]})`,
   },
 };
 
diff --git a/packages/blade/src/tokens/theme/createTheme.ts b/packages/blade/src/tokens/theme/createTheme.ts
index 01747d5bce7..9b947010ec8 100644
--- a/packages/blade/src/tokens/theme/createTheme.ts
+++ b/packages/blade/src/tokens/theme/createTheme.ts
@@ -2,7 +2,7 @@ import tinycolor from 'tinycolor2';
 import type { WCAG2Options, ColorInput } from 'tinycolor2';
 import type { ThemeTokens } from './theme';
 import overrideTheme from './overrideTheme';
-import paymentTheme from './paymentTheme';
+import bladeTheme from './bladeTheme';
 import { colors as globalColors, opacity } from '~tokens/global';
 import type { ColorChromaticScale } from '~tokens/global/colors';
 import { throwBladeError } from '~utils/logger';
@@ -72,7 +72,7 @@ const generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromati
   const colorPalette = palette.reverse();
   const brandPrimaryColor = colorPalette[6];
 
-  const brandColors = {
+  const brandColors: ColorChromaticScale = {
     '50': colorPalette[0],
     '100': colorPalette[1],
     '200': colorPalette[2],
@@ -83,9 +83,9 @@ const generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromati
     '700': colorPalette[7],
     '800': colorPalette[8],
     '900': colorPalette[9],
-    '950': colorPalette[10],
-    a00: getColorWithOpacity(brandPrimaryColor, opacity[0]),
+    '1000': colorPalette[10],
     a50: getColorWithOpacity(brandPrimaryColor, opacity[1]),
+    a150: getColorWithOpacity(brandPrimaryColor, opacity[1]),
     a100: getColorWithOpacity(brandPrimaryColor, opacity[2]),
     a200: getColorWithOpacity(brandPrimaryColor, opacity[3]),
   };
@@ -99,20 +99,12 @@ const generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromati
  * @description Returns overrides for the light theme with the brand colors passed in
  * @returns Overrides for the light theme with the custom brand colors
  */
-const getOnLightOverrides = (brandColors: ColorChromaticScale): DeepPartial<ThemeTokens> => {
-  // Select the most readable color to use as the foreground color on top of brand color
-  // For example: On Primary Button where the background color is brand color, the text color should be either dark or light depending on which is more readable on top of that brand color
-  const foregroundOnBrandColorLight = tinycolor
-    .mostReadable(
-      brandColors[800],
-      [globalColors.neutral.blueGrayLight[1300], globalColors.neutral.blueGrayLight[0]],
-      WCAG2ContrastOptions,
-    )
-    .toHslString();
-
+const getOnLightOverrides = (
+  brandColors: ColorChromaticScale,
+): DeepPartial<ThemeTokens['colors']['onLight']> => {
   // Select the most readable color to use as the foreground color on top of surface color
   // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color
-  const foregroundOnSurfaceLight = tinycolor.isReadable(
+  const foregroundOnSurface = tinycolor.isReadable(
     globalColors.neutral.blueGrayLight[50],
     brandColors[600],
     WCAG2ContrastOptions,
@@ -120,94 +112,73 @@ const getOnLightOverrides = (brandColors: ColorChromaticScale): DeepPartial<Them
     ? brandColors[600]
     : globalColors.neutral.blueGrayLight[1100];
 
+  const foregroundOnBrand = tinycolor
+    .mostReadable(
+      brandColors[900],
+      [globalColors.neutral.white[500], globalColors.neutral.black[500]],
+      WCAG2ContrastOptions,
+    )
+    .toHslString();
+
   // Overrides for the light theme with the brand colors passed in
-  const lightThemeOverrides = {
-    colors: {
-      onLight: {
-        brand: {
-          primary: {
-            300: brandColors.a50,
-            400: brandColors.a100,
-            500: brandColors[600],
-            600: brandColors[700],
-            700: brandColors[800],
-            800: brandColors[950],
-          },
-          gray: {
-            200: {
-              lowContrast: foregroundOnBrandColorLight,
-            },
-          },
+  const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {
+    interactive: {
+      background: {
+        primary: {
+          default: brandColors[600],
+          highlighted: brandColors[700],
+          disabled: brandColors.a100,
+          faded: brandColors.a100,
+          fadedHighlighted: brandColors.a150,
         },
-        action: {
-          background: {
-            primary: {
-              default: brandColors[600],
-              hover: brandColors[700],
-              focus: brandColors[800],
-              active: brandColors[900],
-            },
-            secondary: {
-              default: brandColors.a00,
-              hover: brandColors.a50,
-              focus: brandColors.a100,
-              active: brandColors.a200,
-            },
-            tertiary: {
-              default: globalColors.neutral.blueGrayLight[0],
-              hover: globalColors.neutral.blueGrayLight[50],
-              focus: globalColors.neutral.blueGrayLight[100],
-              active: globalColors.neutral.blueGrayLight[200],
-            },
-          },
-          border: {
-            primary: {
-              default: brandColors[600],
-              hover: brandColors[700],
-              focus: brandColors[800],
-              active: brandColors[900],
-            },
-            secondary: {
-              default: brandColors[600],
-              hover: brandColors[600],
-              focus: brandColors[600],
-              active: brandColors[600],
-            },
-            tertiary: {
-              default: globalColors.neutral.blueGrayLight[300],
-              hover: globalColors.neutral.blueGrayLight[300],
-              focus: globalColors.neutral.blueGrayLight[300],
-              active: globalColors.neutral.blueGrayLight[300],
-            },
-          },
-          text: {
-            primary: {
-              default: foregroundOnBrandColorLight,
-              hover: foregroundOnBrandColorLight,
-              focus: foregroundOnBrandColorLight,
-              active: foregroundOnBrandColorLight,
-            },
-            secondary: {
-              default: foregroundOnSurfaceLight,
-              hover: foregroundOnSurfaceLight,
-              focus: foregroundOnSurfaceLight,
-              active: foregroundOnSurfaceLight,
-            },
-          },
-          icon: {
-            primary: {
-              default: foregroundOnBrandColorLight,
-              hover: foregroundOnBrandColorLight,
-              focus: foregroundOnBrandColorLight,
-              active: foregroundOnBrandColorLight,
-            },
-            secondary: {
-              default: foregroundOnSurfaceLight,
-              hover: foregroundOnSurfaceLight,
-              focus: foregroundOnSurfaceLight,
-              active: foregroundOnSurfaceLight,
-            },
-          },
+      },
+      border: {
+        primary: {
+          default: brandColors[600],
+          highlighted: brandColors[700],
+          disabled: brandColors.a100,
+          faded: brandColors.a100,
+        },
+      },
+      text: {
+        primary: {
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
+        },
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
+        },
+      },
+      icon: {
+        primary: {
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
+        },
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
+        },
+      },
+    },
+    surface: {
+      background: {
+        primary: {
+          intense: brandColors[600],
+          subtle: brandColors[200],
+        },
+      },
+      icon: {
+        primary: {
+          normal: brandColors[600],
         },
       },
     },
@@ -222,20 +193,12 @@ const getOnLightOverrides = (brandColors: ColorChromaticScale): DeepPartial<Them
  * @description Returns overrides for the dark theme with the brand colors passed in
  * @returns Overrides for the dark theme with the custom brand colors
  */
-const getOnDarkOverrides = (brandColors: ColorChromaticScale): DeepPartial<ThemeTokens> => {
-  // Select the most readable color to use as the foreground color on top of brand color
-  // For example: On Primary Button where the background color is brand color, the text color should be either dark or light depending on which is more readable on top of that brand color
-  const foregroundOnBrandColorDark = tinycolor
-    .mostReadable(
-      brandColors[800],
-      [globalColors.neutral.blueGrayDark[800], globalColors.neutral.blueGrayDark[0]],
-      WCAG2ContrastOptions,
-    )
-    .toHslString();
-
+const getOnDarkOverrides = (
+  brandColors: ColorChromaticScale,
+): DeepPartial<ThemeTokens['colors']['onDark']> => {
   // Select the most readable color to use as the foreground color on top of surface color
-  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or light color depending on which is more readable on top of that surface color
-  const foregroundOnSurfaceDark = tinycolor.isReadable(
+  // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color
+  const foregroundOnSurface = tinycolor.isReadable(
     globalColors.neutral.blueGrayDark[1100],
     brandColors[400],
     WCAG2ContrastOptions,
@@ -243,82 +206,73 @@ const getOnDarkOverrides = (brandColors: ColorChromaticScale): DeepPartial<Theme
     ? brandColors[400]
     : globalColors.neutral.blueGrayDark[0];
 
+  const foregroundOnBrand = tinycolor
+    .mostReadable(
+      brandColors[900],
+      [globalColors.neutral.white[500], globalColors.neutral.black[500]],
+      WCAG2ContrastOptions,
+    )
+    .toHslString();
+
   // Overrides for the dark theme with the brand colors passed in
-  const darkThemeOverrides = {
-    colors: {
-      onDark: {
-        brand: {
-          primary: {
-            300: brandColors.a100,
-            400: brandColors.a200,
-            500: brandColors[400],
-            600: brandColors[500],
-            700: brandColors[600],
-            800: brandColors[900],
-          },
-          gray: {
-            200: {
-              lowContrast: foregroundOnBrandColorDark,
-            },
-          },
+  const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {
+    interactive: {
+      background: {
+        primary: {
+          default: brandColors[600],
+          highlighted: brandColors[700],
+          disabled: brandColors.a100,
+          faded: brandColors.a100,
+          fadedHighlighted: brandColors.a150,
         },
-        action: {
-          background: {
-            primary: {
-              default: brandColors[500],
-              hover: brandColors[600],
-              focus: brandColors[700],
-              active: brandColors[800],
-            },
-            secondary: {
-              default: brandColors.a00,
-              hover: brandColors.a50,
-              focus: brandColors.a100,
-              active: brandColors.a200,
-            },
-          },
-          border: {
-            primary: {
-              default: brandColors[500],
-              hover: brandColors[600],
-              focus: brandColors[700],
-              active: brandColors[800],
-            },
-            secondary: {
-              default: brandColors[400],
-              hover: brandColors[400],
-              focus: brandColors[400],
-              active: brandColors[400],
-            },
-          },
-          text: {
-            primary: {
-              default: foregroundOnBrandColorDark,
-              hover: foregroundOnBrandColorDark,
-              focus: foregroundOnBrandColorDark,
-              active: foregroundOnBrandColorDark,
-            },
-            secondary: {
-              default: foregroundOnSurfaceDark,
-              hover: foregroundOnSurfaceDark,
-              focus: foregroundOnSurfaceDark,
-              active: foregroundOnSurfaceDark,
-            },
-          },
-          icon: {
-            primary: {
-              default: foregroundOnBrandColorDark,
-              hover: foregroundOnBrandColorDark,
-              focus: foregroundOnBrandColorDark,
-              active: foregroundOnBrandColorDark,
-            },
-            secondary: {
-              default: foregroundOnSurfaceDark,
-              hover: foregroundOnSurfaceDark,
-              focus: foregroundOnSurfaceDark,
-              active: foregroundOnSurfaceDark,
-            },
-          },
+      },
+      border: {
+        primary: {
+          default: brandColors[600],
+          highlighted: brandColors[700],
+          disabled: brandColors.a100,
+          faded: brandColors.a100,
+        },
+      },
+      text: {
+        primary: {
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
+        },
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
+        },
+      },
+      icon: {
+        primary: {
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
+        },
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
+        },
+      },
+    },
+    surface: {
+      background: {
+        primary: {
+          intense: brandColors[600],
+          subtle: brandColors[200],
+        },
+      },
+      icon: {
+        primary: {
+          normal: brandColors[600],
         },
       },
     },
@@ -342,18 +296,17 @@ export const createTheme = ({ brandColor }: { brandColor: ColorInput }): ThemeTo
   const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);
   // Get onDark overrides
   const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);
-
   // Override the payment theme with the brand colors
   const brandedThemeTokens = overrideTheme({
-    baseThemeTokens: paymentTheme,
+    baseThemeTokens: bladeTheme,
     overrides: {
       name: `custom-${tinycolor(brandColor).toHex()}`,
       colors: {
         onLight: {
-          ...brandedLightTheme?.colors?.onLight,
+          ...brandedLightTheme,
         },
         onDark: {
-          ...brandedDarkTheme?.colors?.onDark,
+          ...brandedDarkTheme,
         },
       },
     },
diff --git a/packages/blade/src/tokens/theme/index.ts b/packages/blade/src/tokens/theme/index.ts
index 202a517ab12..f81b1ad38fc 100644
--- a/packages/blade/src/tokens/theme/index.ts
+++ b/packages/blade/src/tokens/theme/index.ts
@@ -1,5 +1,4 @@
-export { default as paymentTheme } from './paymentTheme';
-export { default as bankingTheme } from './bankingTheme';
+export { default as bladeTheme } from './bladeTheme';
 export { default as overrideTheme } from './overrideTheme';
 export type {
   ColorSchemeNames,
diff --git a/packages/blade/src/tokens/theme/overrideTheme.ts b/packages/blade/src/tokens/theme/overrideTheme.ts
index 23edb2fad42..98f17a0b9a3 100644
--- a/packages/blade/src/tokens/theme/overrideTheme.ts
+++ b/packages/blade/src/tokens/theme/overrideTheme.ts
@@ -1,7 +1,7 @@
-import paymentTheme from './paymentTheme';
+import bladeTheme from './bladeTheme';
 import type { ThemeTokens } from './theme';
-import cloneDeep from '~utils/lodashButBetter/cloneDeep';
 import merge from '~utils/lodashButBetter/merge';
+import cloneDeep from '~utils/lodashButBetter/cloneDeep';
 import { hasSameObjectStructure } from '~utils/hasSameObjectStructure';
 import type { ObjectWithKeys } from '~utils/hasSameObjectStructure';
 import { isPartialMatchObjectKeys } from '~utils/isPartialMatchObjectKeys';
@@ -30,7 +30,7 @@ type OverrideTheme = {
  * @example
  * ```tsx
  * const customTheme = overrideTheme({
- *   baseThemeTokens: paymentTheme, // theme to override
+ *   baseThemeTokens: bladeTheme, // theme to override
  *   overrides: {
  *     colors: {
  *       onLight: {
@@ -52,7 +52,7 @@ const overrideTheme = ({ baseThemeTokens, overrides }: OverrideTheme): ThemeToke
     if (
       !hasSameObjectStructure(
         (baseThemeTokens as unknown) as ObjectWithKeys,
-        (paymentTheme as unknown) as ObjectWithKeys,
+        (bladeTheme as unknown) as ObjectWithKeys,
       )
     ) {
       throwBladeError({
diff --git a/packages/blade/src/tokens/theme/paymentTheme.ts b/packages/blade/src/tokens/theme/paymentTheme.ts
deleted file mode 100644
index c71278fe182..00000000000
--- a/packages/blade/src/tokens/theme/paymentTheme.ts
+++ /dev/null
@@ -1,2676 +0,0 @@
-import type { ThemeTokens, ColorsWithModes } from './theme';
-import {
-  border,
-  breakpoints,
-  colors as globalColors,
-  motion,
-  spacing,
-  typography,
-  elevation,
-} from '~tokens/global';
-
-const colors: ColorsWithModes = {
-  onLight: {
-    surface: {
-      background: {
-        level1: {
-          lowContrast: globalColors.neutral.blueGrayLight[100],
-          highContrast: globalColors.neutral.blueGrayLight[1200],
-        },
-        level2: {
-          lowContrast: globalColors.neutral.blueGrayLight[0],
-          highContrast: globalColors.neutral.blueGrayLight[1100],
-        },
-        level3: {
-          lowContrast: globalColors.neutral.blueGrayLight[50],
-          highContrast: globalColors.neutral.blueGrayLight[1000],
-        },
-      },
-      border: {
-        normal: {
-          lowContrast: globalColors.neutral.blueGrayLight.a100,
-          highContrast: globalColors.neutral.blueGrayLight.a400,
-        },
-        subtle: {
-          lowContrast: globalColors.neutral.blueGrayLight.a50,
-          highContrast: globalColors.neutral.blueGrayLight.a300,
-        },
-      },
-      text: {
-        normal: {
-          lowContrast: globalColors.neutral.blueGrayLight[1200],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-        subtle: {
-          lowContrast: globalColors.neutral.blueGrayLight[900],
-          highContrast: globalColors.neutral.blueGrayLight[100],
-        },
-        subdued: {
-          lowContrast: globalColors.neutral.blueGrayLight[800],
-          highContrast: globalColors.neutral.blueGrayLight[300],
-        },
-        muted: {
-          lowContrast: globalColors.neutral.blueGrayLight[600],
-          highContrast: globalColors.neutral.blueGrayLight[400],
-        },
-        placeholder: {
-          lowContrast: globalColors.neutral.blueGrayLight[500],
-          highContrast: globalColors.neutral.blueGrayLight[500],
-        },
-      },
-      action: {
-        icon: {
-          default: {
-            lowContrast: globalColors.neutral.blueGrayLight[500],
-            highContrast: globalColors.neutral.blueGrayLight.a500,
-          },
-          hover: {
-            lowContrast: globalColors.neutral.blueGrayLight[800],
-            highContrast: globalColors.neutral.blueGrayLight[0],
-          },
-          focus: {
-            lowContrast: globalColors.neutral.blueGrayLight[800],
-            highContrast: globalColors.neutral.blueGrayLight[0],
-          },
-          active: {
-            lowContrast: globalColors.neutral.blueGrayLight[800],
-            highContrast: globalColors.neutral.blueGrayLight[0],
-          },
-          disabled: {
-            lowContrast: globalColors.neutral.blueGrayLight.a100,
-            highContrast: globalColors.neutral.blueGrayLight.a100,
-          },
-        },
-      },
-      overlay: {
-        background: {
-          400: globalColors.neutral.blueGrayLight.a1100,
-          800: globalColors.neutral.ashGrayLight.a1100,
-        },
-      },
-      popup: { background: globalColors.neutral.blueGrayLight[0] },
-    },
-    brand: {
-      primary: {
-        300: globalColors.chromatic.azure.a50,
-        400: globalColors.chromatic.azure.a100,
-        500: globalColors.chromatic.azure[600],
-        600: globalColors.chromatic.azure[700],
-        700: globalColors.chromatic.azure[800],
-        800: globalColors.chromatic.azure[950],
-      },
-      gray: {
-        200: {
-          lowContrast: globalColors.neutral.blueGrayLight[50],
-          highContrast: globalColors.neutral.blueGrayLight[1000],
-        },
-        300: {
-          lowContrast: globalColors.neutral.blueGrayLight[100],
-          highContrast: globalColors.neutral.blueGrayLight[900],
-        },
-        400: {
-          lowContrast: globalColors.neutral.blueGrayLight[300],
-          highContrast: globalColors.neutral.blueGrayLight[800],
-        },
-        500: {
-          lowContrast: globalColors.neutral.blueGrayLight[500],
-          highContrast: globalColors.neutral.blueGrayLight[700],
-        },
-        600: {
-          lowContrast: globalColors.neutral.blueGrayLight[600],
-          highContrast: globalColors.neutral.blueGrayLight[500],
-        },
-        700: {
-          lowContrast: globalColors.neutral.blueGrayLight[800],
-          highContrast: globalColors.neutral.blueGrayLight[100],
-        },
-        a50: {
-          lowContrast: globalColors.neutral.blueGrayLight.a50,
-          highContrast: globalColors.neutral.blueGrayLight.a300,
-        },
-        a100: {
-          lowContrast: globalColors.neutral.blueGrayLight.a100,
-          highContrast: globalColors.neutral.blueGrayLight.a400,
-        },
-      },
-      secondary: { 500: globalColors.chromatic.emerald[500] },
-    },
-    feedback: {
-      background: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald.a50,
-          highContrast: globalColors.chromatic.emerald[700],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson.a50,
-          highContrast: globalColors.chromatic.crimson[700],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider.a50,
-          highContrast: globalColors.chromatic.cider[700],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire.a50,
-          highContrast: globalColors.chromatic.sapphire[600],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.blueGrayLight.a50,
-          highContrast: globalColors.neutral.blueGrayLight[1000],
-        },
-      },
-      border: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald.a200,
-          highContrast: globalColors.chromatic.emerald[700],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson.a200,
-          highContrast: globalColors.chromatic.crimson[700],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider.a200,
-          highContrast: globalColors.chromatic.cider[700],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire.a200,
-          highContrast: globalColors.chromatic.sapphire[600],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.blueGrayLight.a200,
-          highContrast: globalColors.neutral.blueGrayLight[1000],
-        },
-      },
-      text: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire[600],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.blueGrayLight[900],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-      },
-      icon: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider[700],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire[600],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.blueGrayLight[900],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-      },
-      positive: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[800],
-                lowContrast: globalColors.chromatic.emerald.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald.a50 },
-              hover: { lowContrast: globalColors.chromatic.emerald.a100 },
-              focus: { lowContrast: globalColors.chromatic.emerald.a200 },
-              active: { lowContrast: globalColors.chromatic.emerald.a200 },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald.a200 },
-              hover: { lowContrast: globalColors.chromatic.emerald.a200 },
-              focus: { lowContrast: globalColors.chromatic.emerald.a200 },
-              active: { lowContrast: globalColors.chromatic.emerald.a200 },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[700] },
-              hover: { lowContrast: globalColors.chromatic.emerald[700] },
-              focus: { lowContrast: globalColors.chromatic.emerald[700] },
-              active: { lowContrast: globalColors.chromatic.emerald[700] },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[200],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[700] },
-              hover: { lowContrast: globalColors.chromatic.emerald[700] },
-              focus: { lowContrast: globalColors.chromatic.emerald[700] },
-              active: { lowContrast: globalColors.chromatic.emerald[700] },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[200],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-        },
-      },
-      negative: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[800],
-                lowContrast: globalColors.chromatic.crimson.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson.a50 },
-              hover: { lowContrast: globalColors.chromatic.crimson.a100 },
-              focus: { lowContrast: globalColors.chromatic.crimson.a200 },
-              active: { lowContrast: globalColors.chromatic.crimson.a200 },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson.a200 },
-              hover: { lowContrast: globalColors.chromatic.crimson.a200 },
-              focus: { lowContrast: globalColors.chromatic.crimson.a200 },
-              active: { lowContrast: globalColors.chromatic.crimson.a200 },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[700] },
-              hover: { lowContrast: globalColors.chromatic.crimson[700] },
-              focus: { lowContrast: globalColors.chromatic.crimson[700] },
-              active: { lowContrast: globalColors.chromatic.crimson[700] },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[700],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson.a200,
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[700] },
-              hover: { lowContrast: globalColors.chromatic.crimson[700] },
-              focus: { lowContrast: globalColors.chromatic.crimson[700] },
-              active: { lowContrast: globalColors.chromatic.crimson[700] },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[700],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[800],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson.a200,
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-        },
-      },
-      notice: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[700],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[800],
-                lowContrast: globalColors.chromatic.cider.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[900],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[900],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[700],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider.a50 },
-              hover: { lowContrast: globalColors.chromatic.cider.a100 },
-              focus: { lowContrast: globalColors.chromatic.cider.a200 },
-              active: { lowContrast: globalColors.chromatic.cider.a200 },
-              disabled: { lowContrast: globalColors.chromatic.cider.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider.a200 },
-              hover: { lowContrast: globalColors.chromatic.cider.a200 },
-              focus: { lowContrast: globalColors.chromatic.cider.a200 },
-              active: { lowContrast: globalColors.chromatic.cider.a200 },
-              disabled: { lowContrast: globalColors.chromatic.cider.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[700] },
-              hover: { lowContrast: globalColors.chromatic.cider[700] },
-              focus: { lowContrast: globalColors.chromatic.cider[700] },
-              active: { lowContrast: globalColors.chromatic.cider[700] },
-              disabled: { lowContrast: globalColors.chromatic.cider.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[700],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider.a200,
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[700] },
-              hover: { lowContrast: globalColors.chromatic.cider[700] },
-              focus: { lowContrast: globalColors.chromatic.cider[700] },
-              active: { lowContrast: globalColors.chromatic.cider[700] },
-              disabled: { lowContrast: globalColors.chromatic.cider.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[700],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[800],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider.a200,
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-        },
-      },
-      information: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[700],
-                lowContrast: globalColors.chromatic.sapphire.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire.a50 },
-              hover: { lowContrast: globalColors.chromatic.sapphire.a100 },
-              focus: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              active: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              hover: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              focus: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              active: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[700] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[700] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[700] },
-              active: { lowContrast: globalColors.chromatic.sapphire[700] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[700],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire.a200,
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[700] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[700] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[700] },
-              active: { lowContrast: globalColors.chromatic.sapphire[700] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[700],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[800],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire.a200,
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-        },
-      },
-      neutral: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayLight[1000],
-                lowContrast: globalColors.neutral.blueGrayLight.a50,
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayLight[1100],
-                lowContrast: globalColors.neutral.blueGrayLight.a100,
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayLight[1200],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayLight[1200],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayLight[1000],
-                lowContrast: globalColors.neutral.blueGrayLight.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayLight.a50 },
-              hover: { lowContrast: globalColors.neutral.blueGrayLight.a100 },
-              focus: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              active: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              disabled: { lowContrast: globalColors.neutral.blueGrayLight.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayLight[500],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayLight[500],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayLight[500],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayLight[500],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayLight[700],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              hover: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              focus: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              active: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-              disabled: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayLight[700],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              hover: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              focus: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              active: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-                highContrast: globalColors.neutral.blueGrayLight[50],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.blueGrayLight[800],
-                highContrast: globalColors.neutral.blueGrayLight[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.blueGrayLight[1000],
-                highContrast: globalColors.neutral.blueGrayLight[400],
-              },
-              active: {
-                lowContrast: globalColors.neutral.blueGrayLight[1000],
-                highContrast: globalColors.neutral.blueGrayLight[400],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-                highContrast: globalColors.neutral.blueGrayLight[700],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayLight[50],
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayLight[700],
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              hover: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              focus: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              active: { lowContrast: globalColors.neutral.blueGrayLight[900] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayLight.a200 },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.blueGrayLight[900],
-                highContrast: globalColors.neutral.blueGrayLight[50],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.blueGrayLight[800],
-                highContrast: globalColors.neutral.blueGrayLight[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.blueGrayLight[1000],
-                highContrast: globalColors.neutral.blueGrayLight[400],
-              },
-              active: {
-                lowContrast: globalColors.neutral.blueGrayLight[1000],
-                highContrast: globalColors.neutral.blueGrayLight[400],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.blueGrayLight.a200,
-                highContrast: globalColors.neutral.blueGrayLight[700],
-              },
-            },
-          },
-        },
-      },
-    },
-    action: {
-      background: {
-        primary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[900],
-          disabled: globalColors.neutral.blueGrayLight[300],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure.a00,
-          hover: globalColors.chromatic.azure.a50,
-          focus: globalColors.chromatic.azure.a100,
-          active: globalColors.chromatic.azure.a200,
-          disabled: globalColors.neutral.blueGrayLight.a00,
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayLight.a50,
-          hover: globalColors.neutral.blueGrayLight.a100,
-          focus: globalColors.neutral.blueGrayLight.a200,
-          active: globalColors.neutral.blueGrayLight.a200,
-          disabled: globalColors.neutral.blueGrayLight.a50,
-        },
-      },
-      border: {
-        primary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[900],
-          disabled: globalColors.neutral.blueGrayLight[300],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[600],
-          active: globalColors.chromatic.azure[600],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayLight.a00,
-          hover: globalColors.neutral.blueGrayLight[300],
-          focus: globalColors.neutral.blueGrayLight[300],
-          active: globalColors.neutral.blueGrayLight[300],
-          disabled: globalColors.neutral.blueGrayLight[300],
-        },
-      },
-      text: {
-        primary: {
-          default: globalColors.neutral.blueGrayLight[0],
-          hover: globalColors.neutral.blueGrayLight[0],
-          focus: globalColors.neutral.blueGrayLight[0],
-          active: globalColors.neutral.blueGrayLight[0],
-          disabled: globalColors.neutral.blueGrayLight[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[600],
-          active: globalColors.chromatic.azure[600],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayLight[1000],
-          hover: globalColors.neutral.blueGrayLight[1000],
-          focus: globalColors.neutral.blueGrayLight[1000],
-          active: globalColors.neutral.blueGrayLight[1000],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        link: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.blueGrayLight[400],
-          visited: globalColors.chromatic.orchid[400],
-        },
-      },
-      icon: {
-        primary: {
-          default: globalColors.neutral.blueGrayLight[0],
-          hover: globalColors.neutral.blueGrayLight[0],
-          focus: globalColors.neutral.blueGrayLight[0],
-          active: globalColors.neutral.blueGrayLight[0],
-          disabled: globalColors.neutral.blueGrayLight[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[600],
-          active: globalColors.chromatic.azure[600],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayLight[1000],
-          hover: globalColors.neutral.blueGrayLight[1000],
-          focus: globalColors.neutral.blueGrayLight[1000],
-          active: globalColors.neutral.blueGrayLight[1000],
-          disabled: globalColors.neutral.blueGrayLight[400],
-        },
-        link: {
-          default: globalColors.chromatic.azure[600],
-          hover: globalColors.chromatic.azure[700],
-          focus: globalColors.chromatic.azure[800],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.blueGrayLight[400],
-          visited: globalColors.chromatic.orchid[400],
-        },
-      },
-    },
-    static: { white: globalColors.neutral.ashGrayLight[0] },
-    white: {
-      action: {
-        background: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a300,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a300,
-          },
-        },
-        border: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a00,
-            focus: globalColors.neutral.ashGrayLight.a00,
-            active: globalColors.neutral.ashGrayLight.a00,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-        },
-        text: {
-          primary: {
-            default: globalColors.chromatic.azure[600],
-            hover: globalColors.chromatic.azure[600],
-            focus: globalColors.chromatic.azure[600],
-            active: globalColors.chromatic.azure[600],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[400],
-          },
-        },
-        icon: {
-          primary: {
-            default: globalColors.chromatic.azure[600],
-            hover: globalColors.chromatic.azure[600],
-            focus: globalColors.chromatic.azure[600],
-            active: globalColors.chromatic.azure[600],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[400],
-          },
-        },
-      },
-    },
-    badge: {
-      background: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a50,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      border: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a200,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      text: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[600],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-      },
-      icon: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[600],
-          highContrast: globalColors.neutral.blueGrayLight[0],
-        },
-      },
-    },
-  },
-  onDark: {
-    surface: {
-      background: {
-        level1: {
-          lowContrast: globalColors.neutral.blueGrayDark[1300],
-          highContrast: globalColors.neutral.blueGrayDark[800],
-        },
-        level2: {
-          lowContrast: globalColors.neutral.blueGrayDark[1100],
-          highContrast: globalColors.neutral.blueGrayDark[700],
-        },
-        level3: {
-          lowContrast: globalColors.neutral.blueGrayDark[900],
-          highContrast: globalColors.neutral.blueGrayDark[600],
-        },
-      },
-      border: {
-        normal: {
-          lowContrast: globalColors.neutral.blueGrayDark.a100,
-          highContrast: globalColors.neutral.blueGrayDark.a400,
-        },
-        subtle: {
-          lowContrast: globalColors.neutral.blueGrayDark.a50,
-          highContrast: globalColors.neutral.blueGrayDark.a300,
-        },
-      },
-      text: {
-        normal: {
-          lowContrast: globalColors.neutral.blueGrayDark[0],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-        subtle: {
-          lowContrast: globalColors.neutral.blueGrayDark[50],
-          highContrast: globalColors.neutral.blueGrayDark[50],
-        },
-        subdued: {
-          lowContrast: globalColors.neutral.blueGrayDark[100],
-          highContrast: globalColors.neutral.blueGrayDark[100],
-        },
-        muted: {
-          lowContrast: globalColors.neutral.blueGrayDark[200],
-          highContrast: globalColors.neutral.blueGrayDark[200],
-        },
-        placeholder: {
-          lowContrast: globalColors.neutral.blueGrayDark[300],
-          highContrast: globalColors.neutral.blueGrayDark[300],
-        },
-      },
-      action: {
-        icon: {
-          default: {
-            lowContrast: globalColors.neutral.blueGrayDark[400],
-            highContrast: globalColors.neutral.blueGrayDark.a200,
-          },
-          hover: {
-            lowContrast: globalColors.neutral.blueGrayDark[200],
-            highContrast: globalColors.neutral.blueGrayDark[0],
-          },
-          focus: {
-            lowContrast: globalColors.neutral.blueGrayDark[200],
-            highContrast: globalColors.neutral.blueGrayDark[0],
-          },
-          active: {
-            lowContrast: globalColors.neutral.blueGrayDark[200],
-            highContrast: globalColors.neutral.blueGrayDark[0],
-          },
-          disabled: {
-            lowContrast: globalColors.neutral.blueGrayDark.a100,
-            highContrast: globalColors.neutral.blueGrayDark.a100,
-          },
-        },
-      },
-      overlay: {
-        background: {
-          400: globalColors.neutral.blueGrayDark.a1100,
-          800: globalColors.neutral.ashGrayDark.a1100,
-        },
-      },
-      popup: { background: globalColors.neutral.blueGrayDark[700] },
-    },
-    brand: {
-      primary: {
-        300: globalColors.chromatic.azure.a100,
-        400: globalColors.chromatic.azure.a200,
-        500: globalColors.chromatic.azure[400],
-        600: globalColors.chromatic.azure[500],
-        700: globalColors.chromatic.azure[600],
-        800: globalColors.chromatic.azure[900],
-      },
-      gray: {
-        200: {
-          lowContrast: globalColors.neutral.blueGrayDark[800],
-          highContrast: globalColors.neutral.blueGrayDark[600],
-        },
-        300: {
-          lowContrast: globalColors.neutral.blueGrayDark[700],
-          highContrast: globalColors.neutral.blueGrayDark[500],
-        },
-        400: {
-          lowContrast: globalColors.neutral.blueGrayDark[600],
-          highContrast: globalColors.neutral.blueGrayDark[400],
-        },
-        500: {
-          lowContrast: globalColors.neutral.blueGrayDark[500],
-          highContrast: globalColors.neutral.blueGrayDark[300],
-        },
-        600: {
-          lowContrast: globalColors.neutral.blueGrayDark[400],
-          highContrast: globalColors.neutral.blueGrayDark[200],
-        },
-        700: {
-          lowContrast: globalColors.neutral.blueGrayDark[200],
-          highContrast: globalColors.neutral.blueGrayDark[50],
-        },
-        a50: {
-          lowContrast: globalColors.neutral.blueGrayDark.a50,
-          highContrast: globalColors.neutral.blueGrayDark.a300,
-        },
-        a100: {
-          lowContrast: globalColors.neutral.blueGrayDark.a100,
-          highContrast: globalColors.neutral.blueGrayDark.a400,
-        },
-      },
-      secondary: { 500: globalColors.chromatic.emerald[500] },
-    },
-    feedback: {
-      background: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald.a100,
-          highContrast: globalColors.chromatic.emerald[700],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson.a100,
-          highContrast: globalColors.chromatic.crimson[700],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider.a100,
-          highContrast: globalColors.chromatic.cider[800],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire.a100,
-          highContrast: globalColors.chromatic.sapphire[600],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.blueGrayDark.a100,
-          highContrast: globalColors.neutral.blueGrayDark.a100,
-        },
-      },
-      border: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald.a200,
-          highContrast: globalColors.chromatic.emerald[700],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson.a200,
-          highContrast: globalColors.chromatic.crimson[700],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider.a200,
-          highContrast: globalColors.chromatic.cider[800],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire.a200,
-          highContrast: globalColors.chromatic.sapphire[600],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.blueGrayDark.a200,
-          highContrast: globalColors.neutral.blueGrayDark[50],
-        },
-      },
-      text: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald[500],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.blueGrayDark[100],
-          highContrast: globalColors.neutral.blueGrayDark[50],
-        },
-      },
-      icon: {
-        positive: {
-          lowContrast: globalColors.chromatic.emerald[500],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-        negative: {
-          lowContrast: globalColors.chromatic.crimson[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-        notice: {
-          lowContrast: globalColors.chromatic.cider[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-        information: {
-          lowContrast: globalColors.chromatic.sapphire[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-        neutral: {
-          lowContrast: globalColors.neutral.blueGrayDark[100],
-          highContrast: globalColors.neutral.blueGrayDark[50],
-        },
-      },
-      positive: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[800],
-                lowContrast: globalColors.chromatic.emerald.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[900],
-                lowContrast: globalColors.chromatic.emerald.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[700],
-                lowContrast: globalColors.chromatic.emerald.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald.a50 },
-              hover: { lowContrast: globalColors.chromatic.emerald.a100 },
-              focus: { lowContrast: globalColors.chromatic.emerald.a200 },
-              active: { lowContrast: globalColors.chromatic.emerald.a200 },
-              disabled: { lowContrast: globalColors.chromatic.emerald.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald[700],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[700] },
-              hover: { lowContrast: globalColors.chromatic.emerald[700] },
-              focus: { lowContrast: globalColors.chromatic.emerald[700] },
-              active: { lowContrast: globalColors.chromatic.emerald[700] },
-              disabled: { lowContrast: globalColors.chromatic.emerald[700] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[500] },
-              hover: { lowContrast: globalColors.chromatic.emerald[500] },
-              focus: { lowContrast: globalColors.chromatic.emerald[500] },
-              active: { lowContrast: globalColors.chromatic.emerald[500] },
-              disabled: { lowContrast: globalColors.chromatic.emerald[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[500],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.emerald[50],
-                lowContrast: globalColors.chromatic.emerald[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.emerald[500],
-                lowContrast: globalColors.chromatic.emerald[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.emerald[500] },
-              hover: { lowContrast: globalColors.chromatic.emerald[500] },
-              focus: { lowContrast: globalColors.chromatic.emerald[500] },
-              active: { lowContrast: globalColors.chromatic.emerald[500] },
-              disabled: { lowContrast: globalColors.chromatic.emerald[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.emerald[500],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.emerald[600],
-                highContrast: globalColors.chromatic.emerald[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.emerald[700],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.emerald[800],
-                highContrast: globalColors.chromatic.emerald[100],
-              },
-            },
-          },
-        },
-      },
-      negative: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[800],
-                lowContrast: globalColors.chromatic.crimson.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[900],
-                lowContrast: globalColors.chromatic.crimson.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[700],
-                lowContrast: globalColors.chromatic.crimson.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson.a50 },
-              hover: { lowContrast: globalColors.chromatic.crimson.a100 },
-              focus: { lowContrast: globalColors.chromatic.crimson.a200 },
-              active: { lowContrast: globalColors.chromatic.crimson.a200 },
-              disabled: { lowContrast: globalColors.chromatic.crimson.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[500] },
-              hover: { lowContrast: globalColors.chromatic.crimson[500] },
-              focus: { lowContrast: globalColors.chromatic.crimson[500] },
-              active: { lowContrast: globalColors.chromatic.crimson[500] },
-              disabled: { lowContrast: globalColors.chromatic.crimson[900] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[400] },
-              hover: { lowContrast: globalColors.chromatic.crimson[400] },
-              focus: { lowContrast: globalColors.chromatic.crimson[400] },
-              active: { lowContrast: globalColors.chromatic.crimson[400] },
-              disabled: { lowContrast: globalColors.chromatic.crimson[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[500],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[400],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson[900],
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              active: {
-                highContrast: globalColors.chromatic.crimson[50],
-                lowContrast: globalColors.chromatic.crimson[400],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.crimson[500],
-                lowContrast: globalColors.chromatic.crimson[800],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.crimson[400] },
-              hover: { lowContrast: globalColors.chromatic.crimson[400] },
-              focus: { lowContrast: globalColors.chromatic.crimson[400] },
-              active: { lowContrast: globalColors.chromatic.crimson[400] },
-              disabled: { lowContrast: globalColors.chromatic.crimson[800] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.crimson[500],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.crimson[400],
-                highContrast: globalColors.chromatic.crimson[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.crimson[600],
-                highContrast: globalColors.chromatic.crimson[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.crimson[900],
-                highContrast: globalColors.chromatic.crimson[500],
-              },
-            },
-          },
-        },
-      },
-      notice: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[800],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[900],
-                lowContrast: globalColors.chromatic.cider.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[950],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[950],
-                lowContrast: globalColors.chromatic.cider.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[800],
-                lowContrast: globalColors.chromatic.cider.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider.a50 },
-              hover: { lowContrast: globalColors.chromatic.cider.a100 },
-              focus: { lowContrast: globalColors.chromatic.cider.a200 },
-              active: { lowContrast: globalColors.chromatic.cider.a200 },
-              disabled: { lowContrast: globalColors.chromatic.cider.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[800],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[800] },
-              hover: { lowContrast: globalColors.chromatic.cider[800] },
-              focus: { lowContrast: globalColors.chromatic.cider[800] },
-              active: { lowContrast: globalColors.chromatic.cider[800] },
-              disabled: { lowContrast: globalColors.chromatic.cider[900] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[500] },
-              hover: { lowContrast: globalColors.chromatic.cider[500] },
-              focus: { lowContrast: globalColors.chromatic.cider[500] },
-              active: { lowContrast: globalColors.chromatic.cider[500] },
-              disabled: { lowContrast: globalColors.chromatic.cider[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[500],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[400],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider[900],
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.cider[50],
-                lowContrast: globalColors.chromatic.cider[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.cider[500],
-                lowContrast: globalColors.chromatic.cider[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.cider[500] },
-              hover: { lowContrast: globalColors.chromatic.cider[500] },
-              focus: { lowContrast: globalColors.chromatic.cider[500] },
-              active: { lowContrast: globalColors.chromatic.cider[500] },
-              disabled: { lowContrast: globalColors.chromatic.cider[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.cider[500],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.cider[400],
-                highContrast: globalColors.chromatic.cider[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.cider[600],
-                highContrast: globalColors.chromatic.cider[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.cider[900],
-                highContrast: globalColors.chromatic.cider[500],
-              },
-            },
-          },
-        },
-      },
-      information: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[700],
-                lowContrast: globalColors.chromatic.sapphire.a100,
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[800],
-                lowContrast: globalColors.chromatic.sapphire.a200,
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[600],
-                lowContrast: globalColors.chromatic.sapphire.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire.a50 },
-              hover: { lowContrast: globalColors.chromatic.sapphire.a100 },
-              focus: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              active: { lowContrast: globalColors.chromatic.sapphire.a200 },
-              disabled: { lowContrast: globalColors.chromatic.sapphire.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[700],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[700] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[700] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[700] },
-              active: { lowContrast: globalColors.chromatic.sapphire[700] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire[900] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[500] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[500] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[500] },
-              active: { lowContrast: globalColors.chromatic.sapphire[500] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[500],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[400],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire[900],
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              hover: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              focus: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              active: {
-                highContrast: globalColors.chromatic.sapphire[50],
-                lowContrast: globalColors.chromatic.sapphire[500],
-              },
-              disabled: {
-                highContrast: globalColors.chromatic.sapphire[400],
-                lowContrast: globalColors.chromatic.sapphire[900],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.chromatic.sapphire[500] },
-              hover: { lowContrast: globalColors.chromatic.sapphire[500] },
-              focus: { lowContrast: globalColors.chromatic.sapphire[500] },
-              active: { lowContrast: globalColors.chromatic.sapphire[500] },
-              disabled: { lowContrast: globalColors.chromatic.sapphire[900] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.chromatic.sapphire[500],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              hover: {
-                lowContrast: globalColors.chromatic.sapphire[400],
-                highContrast: globalColors.chromatic.sapphire[50],
-              },
-              focus: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              active: {
-                lowContrast: globalColors.chromatic.sapphire[600],
-                highContrast: globalColors.chromatic.sapphire[100],
-              },
-              disabled: {
-                lowContrast: globalColors.chromatic.sapphire[900],
-                highContrast: globalColors.chromatic.sapphire[400],
-              },
-            },
-          },
-        },
-      },
-      neutral: {
-        action: {
-          background: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayDark[50],
-                lowContrast: globalColors.neutral.blueGrayDark.a50,
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayDark[100],
-                lowContrast: globalColors.neutral.blueGrayDark.a100,
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayDark[200],
-                lowContrast: globalColors.neutral.blueGrayDark.a200,
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayDark[200],
-                lowContrast: globalColors.neutral.blueGrayDark.a200,
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayDark[50],
-                lowContrast: globalColors.neutral.blueGrayDark.a50,
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayDark.a50 },
-              hover: { lowContrast: globalColors.neutral.blueGrayDark.a100 },
-              focus: { lowContrast: globalColors.neutral.blueGrayDark.a200 },
-              active: { lowContrast: globalColors.neutral.blueGrayDark.a200 },
-              disabled: { lowContrast: globalColors.neutral.blueGrayDark.a50 },
-            },
-          },
-          border: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-              hover: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-              focus: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-              active: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-            },
-          },
-          text: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              hover: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              focus: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              active: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-                highContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.blueGrayDark[200],
-                highContrast: globalColors.neutral.blueGrayDark[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.blueGrayDark[300],
-                highContrast: globalColors.neutral.blueGrayDark[300],
-              },
-              active: {
-                lowContrast: globalColors.neutral.blueGrayDark[300],
-                highContrast: globalColors.neutral.blueGrayDark[300],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-                highContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-          },
-          icon: {
-            primary: {
-              default: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              hover: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              focus: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              active: {
-                highContrast: globalColors.neutral.blueGrayDark[700],
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              disabled: {
-                highContrast: globalColors.neutral.blueGrayDark[300],
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-            secondary: {
-              default: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              hover: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              focus: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              active: { lowContrast: globalColors.neutral.blueGrayDark[100] },
-              disabled: { lowContrast: globalColors.neutral.blueGrayDark[400] },
-            },
-            link: {
-              default: {
-                lowContrast: globalColors.neutral.blueGrayDark[100],
-                highContrast: globalColors.neutral.blueGrayDark[100],
-              },
-              hover: {
-                lowContrast: globalColors.neutral.blueGrayDark[200],
-                highContrast: globalColors.neutral.blueGrayDark[200],
-              },
-              focus: {
-                lowContrast: globalColors.neutral.blueGrayDark[300],
-                highContrast: globalColors.neutral.blueGrayDark[300],
-              },
-              active: {
-                lowContrast: globalColors.neutral.blueGrayDark[300],
-                highContrast: globalColors.neutral.blueGrayDark[300],
-              },
-              disabled: {
-                lowContrast: globalColors.neutral.blueGrayDark[400],
-                highContrast: globalColors.neutral.blueGrayDark[400],
-              },
-            },
-          },
-        },
-      },
-    },
-    action: {
-      background: {
-        primary: {
-          default: globalColors.chromatic.azure[500],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[700],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.blueGrayDark[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure.a00,
-          hover: globalColors.chromatic.azure.a50,
-          focus: globalColors.chromatic.azure.a100,
-          active: globalColors.chromatic.azure.a200,
-          disabled: globalColors.neutral.blueGrayDark.a00,
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayDark.a50,
-          hover: globalColors.neutral.blueGrayDark.a100,
-          focus: globalColors.neutral.blueGrayDark.a200,
-          active: globalColors.neutral.blueGrayLight.a200,
-          disabled: globalColors.neutral.blueGrayDark.a50,
-        },
-      },
-      border: {
-        primary: {
-          default: globalColors.chromatic.azure[500],
-          hover: globalColors.chromatic.azure[600],
-          focus: globalColors.chromatic.azure[700],
-          active: globalColors.chromatic.azure[800],
-          disabled: globalColors.neutral.blueGrayDark[600],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[400],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[400],
-          active: globalColors.chromatic.azure[400],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayDark.a00,
-          hover: globalColors.neutral.blueGrayDark[400],
-          focus: globalColors.neutral.blueGrayDark[400],
-          active: globalColors.neutral.blueGrayDark[400],
-          disabled: globalColors.neutral.blueGrayDark[600],
-        },
-      },
-      text: {
-        primary: {
-          default: globalColors.neutral.blueGrayDark[0],
-          hover: globalColors.neutral.blueGrayDark[0],
-          focus: globalColors.neutral.blueGrayDark[0],
-          active: globalColors.neutral.blueGrayDark[0],
-          disabled: globalColors.neutral.blueGrayDark[300],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[400],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[400],
-          active: globalColors.chromatic.azure[400],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayDark[100],
-          hover: globalColors.neutral.blueGrayDark[100],
-          focus: globalColors.neutral.blueGrayDark[100],
-          active: globalColors.neutral.blueGrayDark[100],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        link: {
-          default: globalColors.chromatic.azure[300],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[500],
-          active: globalColors.chromatic.azure[500],
-          disabled: globalColors.neutral.blueGrayDark[400],
-          visited: globalColors.chromatic.orchid[300],
-        },
-      },
-      icon: {
-        primary: {
-          default: globalColors.neutral.blueGrayDark[0],
-          hover: globalColors.neutral.blueGrayDark[0],
-          focus: globalColors.neutral.blueGrayDark[0],
-          active: globalColors.neutral.blueGrayDark[0],
-          disabled: globalColors.neutral.blueGrayDark[300],
-        },
-        secondary: {
-          default: globalColors.chromatic.azure[400],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[400],
-          active: globalColors.chromatic.azure[400],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        tertiary: {
-          default: globalColors.neutral.blueGrayDark[100],
-          hover: globalColors.neutral.blueGrayDark[100],
-          focus: globalColors.neutral.blueGrayLight[1000],
-          active: globalColors.neutral.blueGrayDark[100],
-          disabled: globalColors.neutral.blueGrayDark[500],
-        },
-        link: {
-          default: globalColors.chromatic.azure[300],
-          hover: globalColors.chromatic.azure[400],
-          focus: globalColors.chromatic.azure[500],
-          active: globalColors.chromatic.azure[500],
-          disabled: globalColors.neutral.blueGrayDark[400],
-          visited: globalColors.chromatic.orchid[300],
-        },
-      },
-    },
-    static: { white: globalColors.neutral.ashGrayLight[0] },
-    white: {
-      action: {
-        background: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a300,
-            hover: globalColors.neutral.ashGrayLight.a400,
-            focus: globalColors.neutral.ashGrayLight.a500,
-            active: globalColors.neutral.ashGrayLight.a500,
-            disabled: globalColors.neutral.ashGrayLight.a300,
-          },
-        },
-        border: {
-          primary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[200],
-            focus: globalColors.neutral.ashGrayLight[300],
-            active: globalColors.neutral.ashGrayLight[300],
-            disabled: globalColors.neutral.ashGrayLight.a400,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight.a00,
-            hover: globalColors.neutral.ashGrayLight.a00,
-            focus: globalColors.neutral.ashGrayLight.a00,
-            active: globalColors.neutral.ashGrayLight.a00,
-            disabled: globalColors.neutral.ashGrayLight.a00,
-          },
-        },
-        text: {
-          primary: {
-            default: globalColors.chromatic.azure[500],
-            hover: globalColors.chromatic.azure[500],
-            focus: globalColors.chromatic.azure[500],
-            active: globalColors.chromatic.azure[500],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[300],
-          },
-        },
-        icon: {
-          primary: {
-            default: globalColors.chromatic.azure[500],
-            hover: globalColors.chromatic.azure[500],
-            focus: globalColors.chromatic.azure[500],
-            active: globalColors.chromatic.azure[500],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          secondary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          tertiary: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[0],
-            focus: globalColors.neutral.ashGrayLight[0],
-            active: globalColors.neutral.ashGrayLight[0],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-          },
-          link: {
-            default: globalColors.neutral.ashGrayLight[0],
-            hover: globalColors.neutral.ashGrayLight[300],
-            focus: globalColors.neutral.ashGrayLight[400],
-            active: globalColors.neutral.ashGrayLight[400],
-            disabled: globalColors.neutral.ashGrayLight.a500,
-            visited: globalColors.chromatic.orchid[300],
-          },
-        },
-      },
-    },
-    badge: {
-      background: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a100,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      border: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure.a200,
-          highContrast: globalColors.chromatic.azure[600],
-        },
-      },
-      text: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-      },
-      icon: {
-        blue: {
-          lowContrast: globalColors.chromatic.azure[400],
-          highContrast: globalColors.neutral.blueGrayDark[0],
-        },
-      },
-    },
-  },
-};
-
-const paymentTheme: ThemeTokens = {
-  name: 'paymentTheme',
-  border,
-  breakpoints,
-  colors,
-  motion,
-  spacing,
-  elevation,
-  typography,
-};
-
-export default paymentTheme;
diff --git a/packages/blade/src/tokens/theme/theme.ts b/packages/blade/src/tokens/theme/theme.ts
index 1ce02696475..e9331fdf3b4 100644
--- a/packages/blade/src/tokens/theme/theme.ts
+++ b/packages/blade/src/tokens/theme/theme.ts
@@ -13,171 +13,90 @@ export type ColorSchemeNamesInput = ColorSchemeNames | 'system';
 
 export type ColorSchemeModes = 'onDark' | 'onLight';
 
-export type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
-
-export type ColorContrastTypes = 'low' | 'high';
-
-export type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
-
-export type ColorContrast = {
-  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
+export type FeedbackColors = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
+
+export type Emphasis = {
+  subtle: string;
+  moderate: string;
+  intense: string;
+  normal: string;
+  muted: string;
+  disabled: string;
 };
 
-// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens
-export type SurfaceLevels = 1 | 2 | 3;
-
-export type ActionStates = {
+type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
+// Exporting this for usage in other components
+export type SubtleOrIntense = keyof SubtleOrIntenseEmphasis;
+type InteractiveStates = {
   default: string;
-  hover: string;
-  focus: string;
-  active: string;
+  highlighted: string;
   disabled: string;
+  faded: string;
 };
 
-export type LinkActionStates = ActionStates & {
-  visited: string;
-};
-
-export type ActionStatesWithContrast = {
-  default: ColorContrast;
-  hover: ColorContrast;
-  focus: ColorContrast;
-  active: ColorContrast;
-  disabled: ColorContrast;
-};
-
-export type ActionStatesWithLowContrast = {
-  default: Pick<ColorContrast, 'lowContrast'>;
-  hover: Pick<ColorContrast, 'lowContrast'>;
-  focus: Pick<ColorContrast, 'lowContrast'>;
-  active: Pick<ColorContrast, 'lowContrast'>;
-  disabled: Pick<ColorContrast, 'lowContrast'>;
-};
-
-export type LinkActionStatesWithContrast = ActionStatesWithContrast & {
-  visited: ColorContrast;
-};
-
-export type ActionVariants = {
-  primary: ActionStates;
-  secondary: ActionStates;
-  tertiary: ActionStates;
-  link: LinkActionStates;
-};
-
-export type ActionVariantsWithContrast = {
-  primary: ActionStatesWithContrast;
-  secondary: ActionStatesWithContrast;
-  tertiary: ActionStatesWithContrast;
-  link: ActionStatesWithContrast;
-};
-
-export type SecondaryFeedbackActionStatesWithContrast = {
-  secondary: {
-    default: Pick<ColorContrast, 'lowContrast'>;
-    hover: Pick<ColorContrast, 'lowContrast'>;
-    focus: Pick<ColorContrast, 'lowContrast'>;
-    active: Pick<ColorContrast, 'lowContrast'>;
-    disabled: Pick<ColorContrast, 'lowContrast'>;
-  };
+type OnEmphasis = {
+  onSubtle: string;
+  onIntense: string;
 };
 
-// export type ActionProperties = {
-//   background: ActionVariants;
-//   border: ActionVariants;
-//   text: ActionVariants;
-//   icon: ActionVariants;
-// };
-
-export type FeedbackActions = {
-  action: {
-    background: {
-      primary: ActionStatesWithContrast;
-      secondary: ActionStatesWithLowContrast;
-    };
-    border: {
-      primary: ActionStatesWithContrast;
-      secondary: ActionStatesWithLowContrast;
-    };
-    text: {
-      link: ActionStatesWithContrast;
-      primary: ActionStatesWithContrast;
-      secondary: ActionStatesWithLowContrast;
-    };
-    icon: {
-      link: ActionStatesWithContrast;
-      primary: ActionStatesWithContrast;
-      secondary: ActionStatesWithLowContrast;
-    };
-  };
+type ColorCategories = {
+  staticBlack: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
+  staticWhite: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
+  gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
+  onSea: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;
+  onCloud: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;
+  primary: Pick<Emphasis, 'normal'>;
 };
 
-export type WhiteColors = {
-  background: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;
-  border: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;
-  text: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;
-  icon: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;
-};
+type InteractiveColorKeys = FeedbackColors | Exclude<keyof ColorCategories, 'onSea' | 'onCloud'>;
 
 export type Colors = {
-  brand: {
-    primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
-    secondary: Record<500, string>;
-    gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
+  interactive: {
+    background: Record<InteractiveColorKeys, InteractiveStates & { fadedHighlighted: string }>;
+    border: Record<InteractiveColorKeys, InteractiveStates>;
+    text: Record<
+      InteractiveColorKeys | 'onPrimary',
+      Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>
+    >;
+    icon: Record<
+      InteractiveColorKeys | 'onPrimary',
+      Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>
+    >;
   };
   feedback: {
-    background: Record<Feedback, ColorContrast>;
-    border: Record<Feedback, ColorContrast>;
-    text: Record<Feedback, ColorContrast>;
-    icon: Record<Feedback, ColorContrast>;
-    positive: FeedbackActions;
-    negative: FeedbackActions;
-    information: FeedbackActions;
-    notice: FeedbackActions;
-    neutral: FeedbackActions;
+    background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
+    border: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
+    text: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
+    icon: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
   };
   surface: {
-    background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
-    border: Record<'normal' | 'subtle', ColorContrast>;
-    text: Record<TextTypes, ColorContrast>;
-    action: {
-      icon: ActionStatesWithContrast;
-    };
-    overlay: Record<'background', Record<400 | 800, string>>;
-    popup: Record<'background', string>;
-  };
-  action: {
-    background: Omit<ActionVariants, 'link'>;
-    border: Omit<ActionVariants, 'link'>;
-    text: ActionVariants;
-    icon: ActionVariants;
-  };
-  badge: {
     background: {
-      blue: ColorContrast;
+      gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
+      primary: SubtleOrIntenseEmphasis;
+      sea: SubtleOrIntenseEmphasis;
+      cloud: SubtleOrIntenseEmphasis;
     };
     border: {
-      blue: ColorContrast;
-    };
-    text: {
-      blue: ColorContrast;
-    };
-    icon: {
-      blue: ColorContrast;
+      gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;
+      primary: Pick<Emphasis, 'normal' | 'muted'>;
     };
+    text: ColorCategories;
+    icon: ColorCategories;
   };
-  static: {
-    white: string;
+  overlay: {
+    background: Pick<Emphasis, 'moderate' | 'subtle'>;
   };
-  white: {
-    action: WhiteColors;
+  popup: {
+    background: SubtleOrIntenseEmphasis;
+    border: SubtleOrIntenseEmphasis;
   };
+  transparent: string;
 };
 
 export type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 
 export type ThemeTokens = {
-  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
+  name: 'bladeTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
   border: Border;
   breakpoints: Breakpoints;
   colors: ColorsWithModes;
diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts
new file mode 100644
index 00000000000..ff2ceae5cc1
--- /dev/null
+++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts
@@ -0,0 +1,16 @@
+import { bladeTheme } from '../../tokens';
+import { getFocusRingStyles } from './getFocusRingStyles';
+
+describe('getFocusRingStyles', () => {
+  it('should return correct styles when called with valid parameters', () => {
+    const result = getFocusRingStyles({
+      theme: {
+        ...bladeTheme,
+        colors: bladeTheme.colors.onLight,
+        elevation: bladeTheme.elevation.onLight,
+        typography: bladeTheme.typography.onDesktop,
+      },
+    });
+    expect(result).toMatchObject({});
+  });
+});
diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts
new file mode 100644
index 00000000000..b91e5e1b591
--- /dev/null
+++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts
@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'styled-components';
+import type { Theme } from '../../components/BladeProvider';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function getFocusRingStyles(_: { theme: Theme; negativeOffset?: boolean }): CSSProperties {
+  // React Native does not need focus rings
+  return {};
+}
+
+export { getFocusRingStyles };
diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts
new file mode 100644
index 00000000000..76a9f63dd7d
--- /dev/null
+++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts
@@ -0,0 +1,22 @@
+import { bladeTheme } from '../../tokens';
+import { getFocusRingStyles } from './getFocusRingStyles';
+
+describe('getFocusRingStyles', () => {
+  it('should return correct styles when called with valid parameters', () => {
+    const result = getFocusRingStyles({
+      theme: {
+        ...bladeTheme,
+        colors: bladeTheme.colors.onLight,
+        elevation: bladeTheme.elevation.onLight,
+        typography: bladeTheme.typography.onDesktop,
+      },
+    });
+    expect(result).toMatchObject({
+      outline: '4px solid hsla(227, 100%, 59%, 0.18)',
+      outlineOffset: '1px',
+      transitionDuration: '70ms',
+      transitionProperty: 'outline-width',
+      transitionTimingFunction: 'cubic-bezier(0.3, 0, 0.2, 1)',
+    });
+  });
+});
diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts
new file mode 100644
index 00000000000..7ede3ee6a00
--- /dev/null
+++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts
@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import type { Theme } from '../../components/BladeProvider';
+import { castWebType, makeMotionTime } from '~utils';
+
+type GetFocusRingProps = {
+  theme: Theme;
+  negativeOffset?: boolean;
+};
+
+/**
+ * @param props.theme Blade Theme Object
+ * @param props.negativeOffset if set the outline offset will be set to -4px, this is useful
+ * in table component where the outline will get cutoff by the table border
+ */
+function getFocusRingStyles({ theme, negativeOffset = false }: GetFocusRingProps) {
+  return {
+    outline: `4px solid ${theme.colors.surface.border.primary.muted}`,
+    outlineOffset: negativeOffset ? '-4px' : '1px',
+    transitionProperty: 'outline-width',
+    transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])),
+    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),
+  } as const;
+}
+
+export { getFocusRingStyles };
diff --git a/packages/blade/src/utils/getFocusRingStyles/index.ts b/packages/blade/src/utils/getFocusRingStyles/index.ts
new file mode 100644
index 00000000000..066c6cac225
--- /dev/null
+++ b/packages/blade/src/utils/getFocusRingStyles/index.ts
@@ -0,0 +1 @@
+export * from './getFocusRingStyles';
diff --git a/packages/blade/src/utils/lodashButBetter/get.test.ts b/packages/blade/src/utils/lodashButBetter/get.test.ts
index b1cb6e3d2ea..7facdddc29e 100644
--- a/packages/blade/src/utils/lodashButBetter/get.test.ts
+++ b/packages/blade/src/utils/lodashButBetter/get.test.ts
@@ -6,26 +6,32 @@ describe('lodashButBetter/get', () => {
   });
 
   it('should fallback to default value', () => {
+    // @ts-expect-error
     expect(get({ a: { b: 2 } }, 'a.c', 3)).toBe(3);
   });
 
   it('should return undefined if no default value', () => {
+    // @ts-expect-error
     expect(get({ a: { b: 2 } }, 'a.c')).toBe(undefined);
   });
 
   it('should return objects', () => {
+    // @ts-expect-error
     expect(get({ a: { b: 2 } }, 'a')).toEqual({ b: 2 });
   });
 
   it('should return arrays', () => {
+    // @ts-expect-error
     expect(get({ a: { b: [2] } }, 'a')).toEqual({ b: [2] });
   });
 
   it('should return undefined if no object', () => {
+    // @ts-expect-error
     expect(get({}, 'a.c')).toBe(undefined);
   });
 
   it('should return undefined if no path', () => {
+    // @ts-expect-error
     expect(get({ a: { b: 2 } }, '')).toBe(undefined);
   });
 
diff --git a/packages/blade/src/utils/lodashButBetter/get.ts b/packages/blade/src/utils/lodashButBetter/get.ts
index 09502e6a5a4..1ffe02a8095 100644
--- a/packages/blade/src/utils/lodashButBetter/get.ts
+++ b/packages/blade/src/utils/lodashButBetter/get.ts
@@ -1,5 +1,29 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-function getIn(obj: Record<string, any>, path: string, defaultValue?: any): any {
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+import type { ElevationStyles } from '~tokens/global/elevation';
+import type { EasingType } from '~tokens/global/motion';
+
+/**
+ * @template TokenType token type generic
+ * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`
+ */
+export type DotNotationToken<_TokenType, TokenType = Omit<_TokenType, 'name'>> = {
+  [K in keyof TokenType]: TokenType[K] extends string | number | ElevationStyles
+    ? `${Extract<K, number | string>}`
+    : `${Extract<K, number | string>}.${TokenType[K] extends Record<
+        string,
+        string | number | boolean | EasingType<string>
+      >
+        ? Extract<keyof TokenType[K], number | string>
+        : DotNotationToken<TokenType[K]>}`;
+}[keyof TokenType];
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function getIn<
+  T extends Record<string, any>,
+  K extends DotNotationToken<T>,
+  Default extends any = any
+>(obj: T, path: K, defaultValue?: Default): any {
   if (!path) {
     return defaultValue;
   }
diff --git a/packages/blade/src/utils/lodashButBetter/isEmpty.ts b/packages/blade/src/utils/lodashButBetter/isEmpty.ts
index 17ef01e730c..f6330cfc9c8 100644
--- a/packages/blade/src/utils/lodashButBetter/isEmpty.ts
+++ b/packages/blade/src/utils/lodashButBetter/isEmpty.ts
@@ -11,7 +11,7 @@ type Collection =
   | undefined;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function isEmpty(value: Collection): boolean {
+export default function isEmpty(value: Collection): value is null | undefined {
   // Check if the value is null or undefined
   if (value == null) {
     return true;
diff --git a/packages/blade/src/utils/makeLetterSpacing/index.ts b/packages/blade/src/utils/makeLetterSpacing/index.ts
new file mode 100644
index 00000000000..51c8ebbf708
--- /dev/null
+++ b/packages/blade/src/utils/makeLetterSpacing/index.ts
@@ -0,0 +1 @@
+export { makeLetterSpacing } from './makeLetterSpacing';
diff --git a/packages/blade/src/utils/makeLetterSpacing/makeLetterSpacing.ts b/packages/blade/src/utils/makeLetterSpacing/makeLetterSpacing.ts
new file mode 100644
index 00000000000..eaee1c634bd
--- /dev/null
+++ b/packages/blade/src/utils/makeLetterSpacing/makeLetterSpacing.ts
@@ -0,0 +1,4 @@
+export const makeLetterSpacing = (letterSpacing: number, fontSize: number): `${number}px` => {
+  // Calculating a px letter-spacing from % letter spacing
+  return `${fontSize * (letterSpacing / 100)}px`;
+};
diff --git a/packages/blade/src/utils/makeTypographySize/makeTypographySize.native.test.ts b/packages/blade/src/utils/makeTypographySize/makeTypographySize.native.test.ts
index 1f53c4d3734..39708764671 100644
--- a/packages/blade/src/utils/makeTypographySize/makeTypographySize.native.test.ts
+++ b/packages/blade/src/utils/makeTypographySize/makeTypographySize.native.test.ts
@@ -3,12 +3,12 @@ import { typography } from '~tokens/global';
 
 describe('makeTypographySize', () => {
   it('should return the font-size value in `px`', () => {
-    const fontSize = makeTypographySize(typography.onMobile.fonts.size[10]);
-    expect(fontSize).toEqual('9px');
+    const fontSize = makeTypographySize(typography.onMobile.fonts.size[25]);
+    expect(fontSize).toEqual('10px');
   });
 
   it('should return the line-height value in `px`', () => {
     const lineHeight = makeTypographySize(typography.onMobile.lineHeights[200]);
-    expect(lineHeight).toEqual('20px');
+    expect(lineHeight).toEqual('24px');
   });
 });
diff --git a/packages/blade/src/utils/makeTypographySize/makeTypographySize.web.test.ts b/packages/blade/src/utils/makeTypographySize/makeTypographySize.web.test.ts
index d507b27fa22..b5754b28bb4 100644
--- a/packages/blade/src/utils/makeTypographySize/makeTypographySize.web.test.ts
+++ b/packages/blade/src/utils/makeTypographySize/makeTypographySize.web.test.ts
@@ -3,8 +3,8 @@ import { typography } from '~tokens/global';
 
 describe('makeTypographySize', () => {
   it('should return the font-size value in `rem`', () => {
-    const fontSize = makeTypographySize(typography.onDesktop.fonts.size[10]);
-    expect(fontSize).toEqual('0.5625rem');
+    const fontSize = makeTypographySize(typography.onDesktop.fonts.size[25]);
+    expect(fontSize).toEqual('0.625rem');
   });
 
   it('should return the line-height value in `rem`', () => {
diff --git a/packages/blade/src/utils/objectKeysWithType.ts b/packages/blade/src/utils/objectKeysWithType.ts
new file mode 100644
index 00000000000..3a8f9c13a09
--- /dev/null
+++ b/packages/blade/src/utils/objectKeysWithType.ts
@@ -0,0 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function objectKeysWithType<T extends Record<any, any>>(obj: T): (keyof T)[] {
+  return Object.keys(obj) as (keyof T)[];
+}
+
+export { objectKeysWithType };
diff --git a/packages/blade/src/utils/storybook/ArgsTable.tsx b/packages/blade/src/utils/storybook/ArgsTable.tsx
index 19d71dfa5cd..30ce788ad10 100644
--- a/packages/blade/src/utils/storybook/ArgsTable.tsx
+++ b/packages/blade/src/utils/storybook/ArgsTable.tsx
@@ -12,7 +12,7 @@ const StyledArgsTable = styled(BaseBox)(
   &,
   & th,
   & td {
-    border: 1px solid ${props.theme.colors.surface.border.normal.lowContrast};
+    border: 1px solid ${props.theme.colors.surface.border.gray.normal};
     border-collapse: collapse;
   }
 
@@ -36,10 +36,10 @@ const ArgsTable = ({
     <StyledArgsTable as="table" marginBottom={marginBottom} marginTop={marginTop}>
       <tr>
         <th>
-          <Text weight="bold">Prop</Text>
+          <Text weight="semibold">Prop</Text>
         </th>
         <th>
-          <Text weight="bold">Type</Text>
+          <Text weight="semibold">Type</Text>
         </th>
       </tr>
       {Object.entries(data).map(([propName, propType]) => {
@@ -60,7 +60,7 @@ const ArgsTable = ({
         return (
           <tr key={propName}>
             <td>
-              <Text size="medium" variant="caption">
+              <Text size="medium" variant="body">
                 <Code size="medium">{propName}</Code> {propNote}
               </Text>
             </td>
diff --git a/packages/blade/src/utils/storybook/ComponentStatusTable.tsx b/packages/blade/src/utils/storybook/ComponentStatusTable.tsx
index 47a3b998291..36f2c438616 100644
--- a/packages/blade/src/utils/storybook/ComponentStatusTable.tsx
+++ b/packages/blade/src/utils/storybook/ComponentStatusTable.tsx
@@ -34,37 +34,37 @@ const Table = styled.table`
   }
 
   tr:nth-child(odd) {
-    background-color: ${({ theme }) => theme.colors.brand.gray[200].lowContrast};
+    background-color: ${({ theme }) => theme.colors.surface.background.gray.subtle};
   }
 
   tr:nth-child(even) {
-    background-color: ${({ theme }) => theme.colors.brand.gray[300].lowContrast};
+    background-color: ${({ theme }) => theme.colors.surface.background.gray.moderate};
   }
 `;
 
 const ComponentStatusBadge = ({ status }: { status: ComponentStatuses }): React.ReactElement => {
   const badgeVariants: Record<
     ComponentStatuses,
-    { label: string; variant: BadgeProps['variant']; icon: IconComponent }
+    { label: string; color: BadgeProps['color']; icon: IconComponent }
   > = {
-    released: { label: 'Released', variant: 'positive', icon: CheckIcon },
-    deprecated: { label: 'Deprecated', variant: 'negative', icon: AlertCircleIcon },
-    'to-be-decided': { label: 'TBD', variant: 'information', icon: StampIcon },
-    'in-design': { label: 'In Design', variant: 'notice', icon: LoaderIcon },
-    'in-api-spec': { label: 'API In Progress', variant: 'notice', icon: EditIcon },
-    'in-development': { label: 'In Development', variant: 'notice', icon: LoaderIcon },
-    'planned-Q1-dev': { label: 'Planned: Q1 Dev', variant: 'information', icon: ClockIcon },
-    'planned-Q2-dev': { label: 'Planned: Q2 Dev', variant: 'information', icon: ClockIcon },
-    'planned-Q3-dev': { label: 'Planned: Q3 Dev', variant: 'information', icon: ClockIcon },
-    'planned-Q4-dev': { label: 'Planned: Q4 Dev', variant: 'information', icon: ClockIcon },
-    'planned-Q1-design': { label: 'Planned: Q1 Design', variant: 'information', icon: ClockIcon },
-    'planned-Q2-design': { label: 'Planned: Q2 Design', variant: 'information', icon: ClockIcon },
-    'planned-Q3-design': { label: 'Planned: Q3 Design', variant: 'information', icon: ClockIcon },
-    'planned-Q4-design': { label: 'Planned: Q4 Design', variant: 'information', icon: ClockIcon },
+    released: { label: 'Released', color: 'positive', icon: CheckIcon },
+    deprecated: { label: 'Deprecated', color: 'negative', icon: AlertCircleIcon },
+    'to-be-decided': { label: 'TBD', color: 'information', icon: StampIcon },
+    'in-design': { label: 'In Design', color: 'notice', icon: LoaderIcon },
+    'in-api-spec': { label: 'API In Progress', color: 'notice', icon: EditIcon },
+    'in-development': { label: 'In Development', color: 'notice', icon: LoaderIcon },
+    'planned-Q1-dev': { label: 'Planned: Q1 Dev', color: 'information', icon: ClockIcon },
+    'planned-Q2-dev': { label: 'Planned: Q2 Dev', color: 'information', icon: ClockIcon },
+    'planned-Q3-dev': { label: 'Planned: Q3 Dev', color: 'information', icon: ClockIcon },
+    'planned-Q4-dev': { label: 'Planned: Q4 Dev', color: 'information', icon: ClockIcon },
+    'planned-Q1-design': { label: 'Planned: Q1 Design', color: 'information', icon: ClockIcon },
+    'planned-Q2-design': { label: 'Planned: Q2 Design', color: 'information', icon: ClockIcon },
+    'planned-Q3-design': { label: 'Planned: Q3 Design', color: 'information', icon: ClockIcon },
+    'planned-Q4-design': { label: 'Planned: Q4 Design', color: 'information', icon: ClockIcon },
   };
 
   return (
-    <Badge variant={badgeVariants[status].variant} icon={badgeVariants[status].icon}>
+    <Badge color={badgeVariants[status].color} icon={badgeVariants[status].icon}>
       {badgeVariants[status].label}
     </Badge>
   );
@@ -127,38 +127,38 @@ const ComponentStatusTable = (): React.ReactElement => {
 
   return (
     <>
-      <Heading variant="regular">Lifecycle of a component</Heading>
+      <Heading>Lifecycle of a component</Heading>
       <br />
       <BaseBox display="flex" flexDirection="row" marginBottom="spacing.7" gap="spacing.2">
         <Tooltip content="Not yet decided or planned" placement="bottom">
           <TooltipInteractiveWrapper>
-            <Badge variant="information" icon={StampIcon}>
+            <Badge color="information" icon={StampIcon}>
               TBD
             </Badge>
           </TooltipInteractiveWrapper>
         </Tooltip>
         ➡️
-        <Badge variant="information" icon={ClockIcon}>
+        <Badge color="information" icon={ClockIcon}>
           Planned: Qn Design
         </Badge>
         ➡️
-        <Badge variant="information" icon={ClockIcon}>
+        <Badge color="information" icon={ClockIcon}>
           Planned: Qn Dev
         </Badge>
         ➡️
-        <Badge variant="notice" icon={LoaderIcon}>
+        <Badge color="notice" icon={LoaderIcon}>
           In Design
         </Badge>
         ➡️
-        <Badge variant="notice" icon={EditIcon}>
+        <Badge color="notice" icon={EditIcon}>
           API In Progress
         </Badge>
         ➡️
-        <Badge variant="notice" icon={LoaderIcon}>
+        <Badge color="notice" icon={LoaderIcon}>
           In Development
         </Badge>
         ➡️
-        <Badge variant="positive" icon={CheckIcon}>
+        <Badge color="positive" icon={CheckIcon}>
           Released
         </Badge>
       </BaseBox>
@@ -167,16 +167,16 @@ const ComponentStatusTable = (): React.ReactElement => {
           <thead>
             <tr>
               <th align="left">
-                <Text weight="bold">Component</Text>
+                <Text weight="semibold">Component</Text>
               </th>
               <th align="left">
-                <Text weight="bold">Status</Text>
+                <Text weight="semibold">Status</Text>
               </th>
               <th style={{ width: '50%' }} align="left">
-                <Text weight="bold">Description</Text>
+                <Text weight="semibold">Description</Text>
               </th>
               <th align="right">
-                <Text weight="bold">Released In</Text>
+                <Text weight="semibold">Released In</Text>
               </th>
             </tr>
           </thead>
@@ -195,7 +195,7 @@ const ComponentStatusTable = (): React.ReactElement => {
                     <ComponentStatusBadge status={data.status} />
                   </td>
                   <td align="left">
-                    <Text size="medium" color="surface.text.subtle.lowContrast">
+                    <Text size="medium" color="surface.text.gray.subtle">
                       {data.description}
                     </Text>
                   </td>
diff --git a/packages/blade/src/utils/storybook/FigmaEmbed.tsx b/packages/blade/src/utils/storybook/FigmaEmbed.tsx
index c1f3bb07151..5063b4c1539 100644
--- a/packages/blade/src/utils/storybook/FigmaEmbed.tsx
+++ b/packages/blade/src/utils/storybook/FigmaEmbed.tsx
@@ -13,7 +13,7 @@ function FigmaEmbed(props: { src: string; title: string }): JSX.Element {
         allowFullScreen
       />
 
-      <Text size="small" type="subdued">
+      <Text size="small" color="surface.text.gray.muted">
         Note: Figma designs are only accessible to Razorpay Employees
       </Text>
       <br />
diff --git a/packages/blade/src/utils/storybook/PopoverVsTooltip.tsx b/packages/blade/src/utils/storybook/PopoverVsTooltip.tsx
index 6f5afc4b4a9..8922b5a3449 100644
--- a/packages/blade/src/utils/storybook/PopoverVsTooltip.tsx
+++ b/packages/blade/src/utils/storybook/PopoverVsTooltip.tsx
@@ -18,16 +18,16 @@ const Table = styled.table`
   }
 
   tr:nth-child(odd) {
-    background-color: ${({ theme }) => theme.colors.brand.gray[200].lowContrast};
+    background-color: ${({ theme }) => theme.colors.surface.background.gray.moderate};
   }
 
   tr:nth-child(even) {
-    background-color: ${({ theme }) => theme.colors.brand.gray[300].lowContrast};
+    background-color: ${({ theme }) => theme.colors.surface.background.gray.subtle};
   }
 `;
 
 const Strong = ({ children }: { children: React.ReactNode }): React.ReactElement => {
-  return <Text weight="bold">{children}</Text>;
+  return <Text weight="semibold">{children}</Text>;
 };
 
 const PopoverVsTooltip = (): React.ReactElement => {
diff --git a/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/Sandbox.web.tsx b/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/Sandbox.web.tsx
index eda87a57837..c183430dbba 100644
--- a/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/Sandbox.web.tsx
+++ b/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/Sandbox.web.tsx
@@ -29,8 +29,6 @@ const useSandpackSetup = ({
 }): any => {
   const docsContext = React.useContext(DocsContext);
 
-  // @ts-expect-error docsContext.store exists
-  const themeTokenName = docsContext?.store?.globals?.globals?.themeTokenName ?? 'paymentTheme';
   // @ts-expect-error docsContext.store exists
   const colorScheme = docsContext?.store?.globals?.globals?.colorScheme ?? 'light';
   // @ts-expect-error docsContext.store exists
@@ -39,7 +37,7 @@ const useSandpackSetup = ({
   return {
     template: 'react-ts',
     files: {
-      '/index.tsx': getIndexTSX({ themeTokenName, brandColor, colorScheme }),
+      '/index.tsx': getIndexTSX({ themeTokenName: 'bladeTheme', brandColor, colorScheme }),
       [`/App.${language}`]: dedent(code),
     },
     customSetup: getReactScriptsJSDependencies(),
@@ -167,7 +165,7 @@ const VerticalSandbox = ({
         maxHeight={castWebType('100vh')}
       >
         <BaseBox
-          backgroundColor="surface.background.level1.lowContrast"
+          backgroundColor="surface.background.gray.intense"
           border={castWebType('1px solid #EFEFEF')}
           flex="1"
         >
diff --git a/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx b/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx
index be4389e063e..6f23af41849 100644
--- a/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx
+++ b/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx
@@ -28,8 +28,6 @@ const useStackblitzSetup = ({
 }): Project => {
   const docsContext = React.useContext(DocsContext);
 
-  // @ts-expect-error docsContext.store exists
-  const themeTokenName = docsContext?.store?.globals?.globals?.themeTokenName ?? 'paymentTheme';
   // @ts-expect-error docsContext.store exists
   const colorScheme = docsContext?.store?.globals?.globals?.colorScheme ?? 'light';
   // @ts-expect-error docsContext.store exists
@@ -54,7 +52,12 @@ const useStackblitzSetup = ({
           4,
         ),
         'index.html': indexHTML,
-        'index.tsx': getIndexTSX({ themeTokenName, colorScheme, brandColor, showConsole }),
+        'index.tsx': getIndexTSX({
+          themeTokenName: 'bladeTheme',
+          colorScheme,
+          brandColor,
+          showConsole,
+        }),
         'App.tsx': dedent(code),
         'Logger.tsx': logger,
         'vite.config.ts': viteConfigTS,
@@ -64,7 +67,7 @@ const useStackblitzSetup = ({
       },
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [themeTokenName, colorScheme, brandColor]);
+  }, [colorScheme, brandColor]);
 
   React.useEffect(() => {
     void sdk.embedProject('sb-embed', stackblitzProject, {
@@ -78,7 +81,7 @@ const useStackblitzSetup = ({
       showSidebar: false,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [themeTokenName, colorScheme, brandColor]);
+  }, [colorScheme, brandColor]);
 
   return stackblitzProject;
 };
diff --git a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts
index a6cae6046c2..e7d80bb7e90 100644
--- a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts
+++ b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts
@@ -240,13 +240,8 @@ import { ${themeTokenName}, createTheme } from "@razorpay/blade/tokens";
 
 import App from "./App";
 ${showConsole ? 'import { Logger } from "./Logger";' : ''}
+import '@razorpay/blade/fonts.css';
 
-// Only way to load font correctly in sandbpack. Use @fontsource/lato in your actual projects
-document.head.innerHTML += \`
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
-\`
 
 const GlobalStyles = createGlobalStyle\`
   * { 
diff --git a/packages/blade/src/utils/storybook/StoryPageWrapper.tsx b/packages/blade/src/utils/storybook/StoryPageWrapper.tsx
index 14ed08bd599..c3cdade569b 100644
--- a/packages/blade/src/utils/storybook/StoryPageWrapper.tsx
+++ b/packages/blade/src/utils/storybook/StoryPageWrapper.tsx
@@ -1,30 +1,28 @@
 import React from 'react';
 import { ArgsTable, Primary, PRIMARY_STORY, Stories } from '@storybook/addon-docs';
 import styled from 'styled-components';
-import useMakeFigmaURL from './useMakeFigmaURL';
 import FigmaEmbed from './FigmaEmbed';
 import { SandboxHighlighter } from './Sandbox/SandpackEditor';
 import { componentData } from './componentStatusData';
 import BaseBox from '~components/Box/BaseBox';
 import { Alert } from '~components/Alert';
 import { BladeProvider } from '~components/BladeProvider';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 import { Box } from '~components/Box';
 import { Link } from '~components/Link';
 import type { HeadingProps } from '~components/Typography';
-import { Title, Text, Heading } from '~components/Typography';
+import { Display, Text, Heading } from '~components/Typography';
 import { Badge } from '~components/Badge';
 import { AnnouncementIcon } from '~components/Icons';
 
-const Subtitle = (props: HeadingProps<{ variant: 'regular' }>): React.ReactElement => {
-  return <Heading type="subtle" size="large" weight="regular" as="span" {...props} />;
+const Subtitle = (props: HeadingProps): React.ReactElement => {
+  return (
+    <Heading color="surface.text.gray.subtle" size="large" weight="regular" as="span" {...props} />
+  );
 };
 
 type StoryPageWrapperTypes = {
-  figmaURL?: {
-    paymentTheme: string;
-    bankingTheme: string;
-  };
+  figmaURL?: string;
   argTableComponent?: unknown;
   componentDescription: string;
   propsDescription?: string;
@@ -73,19 +71,6 @@ const WithGlobalStyles = styled(BaseBox)`
 `;
 
 const StoryPageWrapper = (props: StoryPageWrapperTypes): React.ReactElement => {
-  const figmaURL = useMakeFigmaURL([
-    {
-      themeTokenName: 'paymentTheme',
-      lightModeURL: props.figmaURL?.paymentTheme,
-      darkModeURL: props.figmaURL?.paymentTheme,
-    },
-    {
-      themeTokenName: 'bankingTheme',
-      lightModeURL: props.figmaURL?.bankingTheme,
-      darkModeURL: props.figmaURL?.bankingTheme,
-    },
-  ]);
-
   React.useEffect(() => {
     // Storybook renders inside iframe so by default it doesn't support scrolling to the sections.
     // So we manually read location.hash of parent window and scroll to that section on load
@@ -101,15 +86,13 @@ const StoryPageWrapper = (props: StoryPageWrapperTypes): React.ReactElement => {
   const { showStorybookControls = true, showArgsTable = true, showDefaultExample = true } = props;
 
   return (
-    <BladeProvider themeTokens={paymentTheme}>
+    <BladeProvider themeTokens={bladeTheme}>
       <WithGlobalStyles>
-        <Title size="xlarge" marginBottom="spacing.3">
+        <Display size="small" marginBottom="spacing.3">
           {props.componentName}
-        </Title>
+        </Display>
         <Box marginBottom="spacing.4" paddingLeft="spacing.1">
-          <Heading type="subtle" size="large" weight="regular" as="span">
-            {props.componentDescription}
-          </Heading>
+          <Subtitle>{props.componentDescription}</Subtitle>
         </Box>
         {componentMetaInfo?.releasedIn ? (
           <Box paddingBottom="spacing.6" paddingLeft="spacing.1">
@@ -118,7 +101,7 @@ const StoryPageWrapper = (props: StoryPageWrapperTypes): React.ReactElement => {
               target="_blank"
               rel="noreferrer"
             >
-              <Badge color="default" fontWeight="bold" size="large" icon={AnnouncementIcon}>
+              <Badge color="primary" size="large" icon={AnnouncementIcon}>
                 Release: v{componentMetaInfo.releasedIn}
               </Badge>
             </a>
@@ -129,17 +112,17 @@ const StoryPageWrapper = (props: StoryPageWrapperTypes): React.ReactElement => {
             description={props.note}
             isFullWidth
             isDismissible={false}
-            intent="notice"
+            color="notice"
             marginBottom="spacing.5"
           />
         ) : null}
-        {figmaURL !== '#' ? (
-          <FigmaEmbed src={figmaURL} title={`${props.componentName} Figma Designs`} />
+        {props.figmaURL && props.figmaURL !== '#' ? (
+          <FigmaEmbed src={props.figmaURL} title={`${props.componentName} Figma Designs`} />
         ) : null}
         {props.children}
         {props.imports === '' ? null : (
           <>
-            <Title size="large">Imports</Title>
+            <Heading size="xlarge">Imports</Heading>
             <SandboxHighlighter showLineNumbers={false} showTabs={false}>
               {props.imports
                 ? props.imports
@@ -153,7 +136,7 @@ const StoryPageWrapper = (props: StoryPageWrapperTypes): React.ReactElement => {
           <>
             {showDefaultExample ? (
               <>
-                <Title size="large">Example</Title>
+                <Heading size="xlarge">Example</Heading>
                 <Subtitle size="medium" marginY="spacing.4">
                   {`This is the default ${props.componentName}. You can change the properties using the controls below.`}
                 </Subtitle>
@@ -163,7 +146,7 @@ const StoryPageWrapper = (props: StoryPageWrapperTypes): React.ReactElement => {
             {showArgsTable ? (
               <>
                 <BaseBox id="properties-ref">
-                  <Title size="large">Properties</Title>
+                  <Heading size="xlarge">Properties</Heading>
                   {props.apiDecisionLink === '' || props.apiDecisionLink === null ? null : (
                     <Text marginY="spacing.5">
                       Check out{' '}
@@ -180,7 +163,7 @@ const StoryPageWrapper = (props: StoryPageWrapperTypes): React.ReactElement => {
                   )}
                   {props.propsDescription ? (
                     // adding box with surface background so that when theme of storybook is changed, the alert doesn't become invisible
-                    <Box backgroundColor="surface.background.level3.lowContrast">
+                    <Box backgroundColor="surface.background.gray.subtle">
                       <Alert
                         isFullWidth
                         marginTop="spacing.5"
diff --git a/packages/blade/src/utils/storybook/useMakeFigmaURL.ts b/packages/blade/src/utils/storybook/useMakeFigmaURL.ts
deleted file mode 100644
index 67053588b6c..00000000000
--- a/packages/blade/src/utils/storybook/useMakeFigmaURL.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DocsContext } from '@storybook/addon-docs';
-import { useContext } from 'react';
-
-const useMakeFigmaURL = (
-  themeURLs: {
-    themeTokenName: 'paymentTheme' | 'bankingTheme';
-    lightModeURL?: string;
-    darkModeURL?: string;
-  }[],
-): string => {
-  const {
-    // @ts-expect-error globals is available but the typings in storybook are properly defined hence, ignoring it
-    store: {
-      globals: {
-        globals: { themeTokenName, colorScheme },
-      },
-    },
-  } = useContext(DocsContext);
-
-  const themeURL = themeURLs.find((url) => url.themeTokenName === themeTokenName);
-
-  if (themeTokenName === 'paymentTheme') {
-    if (colorScheme === 'light') {
-      return themeURL?.lightModeURL ?? '#';
-    }
-    return themeURL?.darkModeURL ?? '#';
-  }
-  if (themeTokenName === 'bankingTheme') {
-    if (colorScheme === 'light') {
-      return themeURL?.lightModeURL ?? '#';
-    }
-    return themeURL?.darkModeURL ?? '#';
-  }
-  return '#';
-};
-
-export default useMakeFigmaURL;
diff --git a/packages/blade/src/utils/testing/renderWithSSR.web.tsx b/packages/blade/src/utils/testing/renderWithSSR.web.tsx
index cb857e46322..79c557c293d 100644
--- a/packages/blade/src/utils/testing/renderWithSSR.web.tsx
+++ b/packages/blade/src/utils/testing/renderWithSSR.web.tsx
@@ -7,13 +7,13 @@ import type { ReactElement } from 'react';
 import { renderToString } from 'react-dom/server';
 import jsdom from 'jsdom';
 import { BladeProvider } from '~components/BladeProvider';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 
 const globalNames = new Set(Object.getOwnPropertyNames(global));
 
 const renderWithSSR = (ui: ReactElement): RenderResult => {
   const App = (): ReactElement => (
-    <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+    <BladeProvider themeTokens={bladeTheme} colorScheme="light">
       {ui}
     </BladeProvider>
   );
diff --git a/packages/blade/src/utils/testing/renderWithTheme.native.tsx b/packages/blade/src/utils/testing/renderWithTheme.native.tsx
index 8913ca70385..4c93e4c494f 100644
--- a/packages/blade/src/utils/testing/renderWithTheme.native.tsx
+++ b/packages/blade/src/utils/testing/renderWithTheme.native.tsx
@@ -2,11 +2,11 @@ import type { RenderAPI } from '@testing-library/react-native';
 import { render } from '@testing-library/react-native';
 import type { ReactElement } from 'react';
 import { BladeProvider } from '~components/BladeProvider';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 
 const renderWithTheme = (ui: ReactElement): RenderAPI =>
   render(
-    <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+    <BladeProvider themeTokens={bladeTheme} colorScheme="light">
       {ui}
     </BladeProvider>,
   );
diff --git a/packages/blade/src/utils/testing/renderWithTheme.web.tsx b/packages/blade/src/utils/testing/renderWithTheme.web.tsx
index 4744d515fad..ca463690c46 100644
--- a/packages/blade/src/utils/testing/renderWithTheme.web.tsx
+++ b/packages/blade/src/utils/testing/renderWithTheme.web.tsx
@@ -2,11 +2,11 @@ import type { RenderResult } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import type { ReactElement } from 'react';
 import { BladeProvider } from '~components/BladeProvider';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 
 const renderWithTheme = (ui: ReactElement): RenderResult =>
   render(
-    <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+    <BladeProvider themeTokens={bladeTheme} colorScheme="light">
       {ui}
     </BladeProvider>,
   );
diff --git a/packages/blade/src/utils/testing/themeWrapper.tsx b/packages/blade/src/utils/testing/themeWrapper.tsx
index c77a3926bb3..6576e68c25d 100644
--- a/packages/blade/src/utils/testing/themeWrapper.tsx
+++ b/packages/blade/src/utils/testing/themeWrapper.tsx
@@ -1,9 +1,9 @@
 import type { ReactElement } from 'react';
 import { BladeProvider } from '~components/BladeProvider';
-import { paymentTheme } from '~tokens/theme';
+import { bladeTheme } from '~tokens/theme';
 
 const themeWrapper = ({ children }: { children: ReactElement }): ReactElement => (
-  <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+  <BladeProvider themeTokens={bladeTheme} colorScheme="light">
     {children}
   </BladeProvider>
 );
diff --git a/packages/blade/src/utils/types.ts b/packages/blade/src/utils/types.ts
index 3212d9d1b2c..93ef423f395 100644
--- a/packages/blade/src/utils/types.ts
+++ b/packages/blade/src/utils/types.ts
@@ -50,8 +50,8 @@ type KeysRequired<T> = AllowUndefinedValue<Required<T>>;
  *
  * This covers scenarios like
  * ```jsx
- * <Title>Hi</Title>
- * <Title>{dynamicVariable} something</Title>
+ * <Heading>Hi</Heading>
+ * <Heading>{dynamicVariable} something</Heading>
  * ```
  *
  *
@@ -74,10 +74,10 @@ type StringChildrenType = React.ReactText | React.ReactText[];
  * ### Usage
  *
  * ```ts
- * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * type ThemeName = 'themeOne' | 'themeTwo' | StringWithAutocomplete;
  * ```
  *
- * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
+ * This will show themeOne and themeTwo in autocomplete but also allow any other string as value.
  *
  * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
  * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
diff --git a/packages/blade/src/utils/useInteraction.ts b/packages/blade/src/utils/useInteraction.ts
index a529d990f74..d3cf5af8033 100644
--- a/packages/blade/src/utils/useInteraction.ts
+++ b/packages/blade/src/utils/useInteraction.ts
@@ -1,25 +1,25 @@
 import type { Dispatch, SetStateAction } from 'react';
 import { useState } from 'react';
-import type { ActionStates } from '~tokens/theme/theme';
 
+export type ActionStates = 'default' | 'hover' | 'focus' | 'disabled';
 const useInteraction = (): {
   onMouseEnter: () => void;
   onMouseLeave: () => void;
   onFocus: () => void;
   onBlur: () => void;
-  currentInteraction: keyof ActionStates;
-  setCurrentInteraction: Dispatch<SetStateAction<keyof ActionStates>>;
+  currentInteraction: ActionStates;
+  setCurrentInteraction: Dispatch<SetStateAction<ActionStates>>;
 } => {
-  const [currentInteraction, setCurrentInteraction] = useState<keyof ActionStates>('default');
+  const [currentInteraction, setCurrentInteraction] = useState<ActionStates>('default');
 
   const onMouseEnter = (): void => {
-    if (currentInteraction !== 'active') setCurrentInteraction('hover');
+    if (currentInteraction !== 'focus') setCurrentInteraction('hover');
   };
   const onMouseLeave = (): void => {
-    if (currentInteraction !== 'active') setCurrentInteraction('default');
+    if (currentInteraction !== 'focus') setCurrentInteraction('default');
   };
   const onFocus = (): void => {
-    setCurrentInteraction('active');
+    setCurrentInteraction('focus');
   };
   const onBlur = (): void => {
     setCurrentInteraction('default');
diff --git a/packages/blade/tsconfig-typecheck.web.json b/packages/blade/tsconfig-typecheck.web.json
index 496f49eac3e..51832e4d313 100644
--- a/packages/blade/tsconfig-typecheck.web.json
+++ b/packages/blade/tsconfig-typecheck.web.json
@@ -9,7 +9,8 @@
     "**/**.native.tsx",
     "**/**.native.test.ts",
     "**/**.native.test.tsx",
-    "**/ThemePlayground/**.tsx"
+    "**/ThemePlayground/**.tsx",
+    "**/ThemePlayground/**.ts"
   ],
   "compilerOptions": {
     "noEmit": true,
diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md
new file mode 100644
index 00000000000..8421b100506
--- /dev/null
+++ b/packages/blade/upgrade-v11.md
@@ -0,0 +1,493 @@
+# Upgrade Guide for v11 (Brand Refresh)
+
+## Upgrade Workflow Overview
+
+All the rebranding upgrade activity starts at the design end and is then followed by engineering
+
+<img alt="Upgrade Workflow Overview" src="./docs/images/upgrade-v11-workflow.png" width="800px">
+
+## Migration with Codemod
+
+**Step 1:** Install this version of Blade as `yarn add @razorpay/blade-rebranded@npm:@razorpay/blade@v11.0.0`.
+
+**Step 2:** Install new fonts (Inter & Tasa) by following [this file](https://blade.razorpay.com/?path=/docs/guides-installation--docs#-installing-fonts).
+
+**Step 3:** The codemod will update the components to the new version of Blade. Execute the codemod on the file/directory that needs to be migrated for the page via the following command:
+
+> Need help? Check out [jscodeshift docs](https://github.com/facebook/jscodeshift) for CLI usage tips.
+
+```sh
+npx jscodeshift ./PATH_TO_YOUR_DIR --extensions=tsx,ts,jsx,js -t ./node_modules/@razorpay/blade-rebranded/codemods/brand-refresh/transformers/index.ts --ignore-pattern="**/node_modules/**"
+```
+
+### 🚧 Watch Out for Limitations & Edge Cases
+
+> [!IMPORTANT]
+>
+> There might be some situations where the codemod falls short. If you encounter errors, handle those cases manually by following up with your designer.
+
+- The codemod doesn't handle the migration of conditionally rendered props. Take a moment to manually inspect and update such cases. The codemod will also log a warning for such cases with the line number & path to the file. For example: `Expression found in the "size" attribute, please update manually: src/pages/ResumeWithRazorpay/sections/WhyResumeSection.tsx:20`
+
+  ```diff
+  - <Title size={isMobile ? "small" : "medium"}> Hello </Title>
+  + <Heading size={isMobile ? "large" : "xlarge"}> Hello </Heading>
+  ```
+
+- With Blade v11, we have removed `highContrast` & `lowContrast` terminology from color tokens. If you have used any color token which has `highContrast` in its name or `contrast="high"` prop in typography components, the codemod will replace it with `"UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"` string. You will have to discuss these instances with designers & manually update this value with a new color token that matches the contrast you need.
+
+  ```diff
+  - <Text color="surface.text.subtle.highContrast"> Lorem ipsum </Text>
+  + <Text color="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"> Lorem ipsum </Text>
+  ```
+
+**Step 5**: Test your page and make sure everything works as expected. Once the migration is complete for all pages, you can remove the old version of Blade from your project.
+
+## Documentation
+
+By default, `blade.razorpay.com` will show documentation for the latest version of Blade. To view the documentation for an older version, you can use the version selector in the top-left corner of the page.
+
+<img alt="Version Switcher" src="./docs/images/docs-vrsion-switcher.png" width="800px">
+
+## Available Rebranded Components
+
+To check out the list of available components, visit [Blade Component Status](https://blade.razorpay.com/?path=/docs/guides-component-status--docs).
+
+## Manual Migration Guide
+
+Only use this if you're unable to run the codemod described above.
+
+### Theme Tokens
+
+- **`paymentTheme` & `bankingTheme` have been removed. Use `bladeTheme` instead.**
+
+  ```diff
+    import { BladeProvider } from '@razorpay/blade/components';
+  - import { paymentTheme, bankingTheme } from "@razorpay/blade/tokens";
+  + import { bladeTheme } from "@razorpay/blade/tokens";
+
+    const AppWrapper = () => {
+      return (
+  -     <BladeProvider themeTokens={paymentTheme|bankingTheme} colorScheme="light">
+  +     <BladeProvider themeTokens={bladeTheme} colorScheme="light">
+          <App />
+        </BladeProvider>
+      );
+    }
+
+    export default AppWrapper;
+  ```
+
+- **The `color` tokens have been updated. You may need to update your custom component styles to map with new tokens:**
+
+  - [color tokens mapping](https://docs.google.com/spreadsheets/d/14p3QqubqkTe2K0701EYY_Ehia4fzFMOIzOo8exCguUA/edit#gid=877366376)
+
+- **The `font-size` and `line-height` tokens have been updated to a new scale. You may need to update your custom component styles to match the new scale:**
+  - [font-size scale](https://www.figma.com/file/5BZsOpNjbUHqgVh850yPBW/%5BResearch%5D-Typography-%26-Spacing-Refresh?type=design&node-id=244%3A188858&mode=design&t=vpFlyrSzO1jdpAPu-1)
+  - [line-height scale](https://www.figma.com/file/5BZsOpNjbUHqgVh850yPBW/%5BResearch%5D-Typography-%26-Spacing-Refresh?type=design&node-id=244%3A188858&mode=design&t=vpFlyrSzO1jdpAPu-1)
+
+### ActionList
+
+- **The `surfaceLevel` prop has been removed without replacement.**
+
+  ```diff
+  - <ActionList surfaceLevel={2/3} >
+  + <ActionList >
+  ```
+
+### Amount
+
+- **The accepted values for the `size` prop has been updated.**
+
+  ```diff
+  - <Amount size="body-small" value={123456.789} />
+  + <Amount value={123456.789} type="body" size="small" />
+
+  - <Amount size="body-small-bold" value={123456.789} />
+  + <Amount value={123456.789} type="body" size="small" weight="semibold" />
+
+  - <Amount size="body-medium" value={123456.789} />
+  + <Amount value={123456.789} type="body" size="medium" />
+
+  - <Amount size="body-medium-bold" value={123456.789} />
+  + <Amount value={123456.789} type="body" size="medium" weight="semibold" />
+
+  - <Amount size="heading-small" value={123456.789} />
+  + <Amount value={123456.789} type="body" size="large" />
+
+  - <Amount size="heading-small-bold" value={123456.789} />
+  + <Amount value={123456.789} type="body" size="large" weight="semibold" />
+
+  - <Amount size="heading-large" value={123456.789} />
+  + <Amount value={123456.789} type="heading" size="medium" />
+
+  - <Amount size="heading-large-bold" value={123456.789} />
+  + <Amount value={123456.789} type="heading" size="medium" weight="semibold" />
+
+  - <Amount size="title-small" value={123456.789} />
+  + <Amount value={123456.789} type="heading" size="large" />
+
+  - <Amount size="title-medium" value={123456.789} />
+  + <Amount value={123456.789} type="heading" size="xlarge" />
+  ```
+
+- **The `intent` prop has been removed in favor of the `color` prop.**
+
+  ```diff
+  - <Amount intent="positive" value={123456.789} />
+  + <Amount color="feedback.text.positive.intense" value={123456.789} />
+
+  - <Amount intent="negative" value={123456.789} />
+  + <Amount color="feedback.text.negative.intense" value={123456.789} />
+
+  - <Amount intent="information" value={123456.789} />
+  + <Amount color="feedback.text.information.intense" value={123456.789} />
+
+  - <Amount intent="notice" value={123456.789} />
+  + <Amount color="feedback.text.notice.intense" value={123456.789} />
+  ```
+
+- **The `prefix` prop has been removed in favor of the new `currencyIndicator` prop.**
+
+  ```diff
+  - <Amount prefix="currency-symbol" value={123456.789} />
+  + <Amount currencyIndicator="currency-symbol" value={123456.789} />
+
+  - <Amount prefix="currency-code" value={123456.789} />
+  + <Amount currencyIndicator="currency-code" value={123456.789} />
+  ```
+
+### Alert
+
+- **The `contrast` prop has been removed in favor of the new `emphasis` prop.**
+
+  ```diff
+  - <Alert description="Hello World" contrast="low" />
+  + <Alert description="Hello World" emphasis="subtle" />
+
+  - <Alert description="Hello World" contrast="high" />
+  + <Alert description="Hello World" emphasis="intense" />
+  ```
+
+- **The `intent` prop has been removed in favor of the `color` prop.**
+
+  ```diff
+  - <Alert description="Hello World" intent="positive|negative|information|notice|neutral" />
+  + <Alert description="Hello World" color="positive|negative|information|notice|neutral" />
+  ```
+
+### Typography Components
+
+- **The `Title` component has been removed in favor of the `Heading` component.**
+
+  ```diff
+  - <Title size="xlarge"> Hello </Title>
+  + <Heading size="2xlarge"> Hello </Heading>
+
+  - <Title size="large"> Hello </Title>
+  + <Heading size="xlarge"> Hello </Heading>
+
+  - <Title size="medium"> Hello </Title>
+  + <Heading size="xlarge"> Hello </Heading>
+
+  - <Title size="small"> Hello </Title>
+  + <Heading size="large"> Hello </Heading>
+  ```
+
+- **The `type` prop has been removed from the `Text`, `Heading`, & `Display` components in favor of the `color` prop.**
+
+  ```diff
+  - <Text type="normal"> Hello </Text>
+  + <Text color="surface.text.gray.normal"> Hello </Text>
+
+  - <Text type="subtle"> Hello </Text>
+  + <Text color="surface.text.gray.subtle"> Hello </Text>
+
+  - <Text type="muted"> Hello </Text>
+  + <Text color="surface.text.gray.muted"> Hello </Text>
+
+  - <Text type="subdued"> Hello </Text>
+  + <Text color="surface.text.gray.muted"> Hello </Text>
+
+  - <Text type="placeholder"> Hello </Text>
+  + <Text color="surface.text.gray.disabled"> Hello </Text>
+  ```
+
+- **The `contrast` prop has been removed from the `Text`, `Heading`, & `Display` components.**
+
+  ```diff
+  - <Text contrast="low"> Hello </Text>
+  + <Text> Hello </Text>
+
+  // contrast="high" doesn't exist anymore, so you will need to manually update these cases a new color token that matches the contrast you need.
+  - <Text contrast="high"> Hello </Text>
+  + <Text> Hello </Text>
+  ```
+
+- **The `variant` prop has been removed from the `Heading` component.**
+
+  ```diff
+  - <Heading variant="regular"> Hello </Heading>
+  + <Heading> Hello </Heading>
+
+  - <Heading variant="subheading"> Hello </Heading>
+  + <Text size="small"> Hello </Text>
+  ```
+
+- **The `size` prop scale has been updated in the `Heading` component**
+
+  ```diff
+  - <Heading size="large"> Hello </Heading>
+  + <Heading size="medium"> Hello </Heading>
+
+  - <Heading size="medium"> Hello </Heading>
+  + <Heading size="small"> Hello </Heading>
+
+  - <Heading size="small"> Hello </Heading>
+  + <Text size="large"> Hello </Text>
+  ```
+
+- **The `caption` variant of the `Text` component now accepts only `size="small"`.**
+
+  ```diff
+  - <Text variant="caption" size="medium"> Hello </Text>
+  + <Text variant="caption" size="small"> Hello </Text>
+  ```
+
+- **The `weight` prop now accepts `"semibold"` instead of `"bold"` in the ` Text`, `Heading` , & `Display` components. The `Code` component continues to accept `"bold"`.**
+
+  ```diff
+  - <Text weight="bold"> Hello </Text>
+  + <Text weight="semibold"> Hello </Text>
+
+  - <Heading weight="bold"> Hello </Heading>
+  + <Heading weight="semibold"> Hello </Heading>
+
+  - <Display weight="bold"> Hello </Display>
+  + <Display weight="semibold"> Hello </Display>
+  ```
+
+### Badge
+
+- **The `fontWeight` prop has been removed.**
+
+  ```diff
+  - <Badge fontWeight="regular|bold"> Hello </Badge>
+  + <Badge> Hello </Badge>
+  ```
+
+- **The `contrast` prop has been removed in favor of the new `emphasis` prop.**
+
+  ```diff
+  - <Badge contrast="low"> Hello </Badge>
+  + <Badge emphasis=”subtle”> Hello </Badge>
+
+  - <Badge contrast="high"> Hello </Badge>
+  + <Badge emphasis="intense"> Hello </Badge>
+  ```
+
+- **The `variant` prop has been removed in favor of the `color` prop.**
+
+  ```diff
+  - <Badge variant="blue"> Hello </Badge>
+  + <Badge color="primary"> Hello </Badge>
+
+  - <Badge variant="positive|negative|information|notice|neutral"> Hello </Badge>
+  + <Badge color="positive|negative|information|notice|neutral"> Hello </Badge>
+  ```
+
+- **The `"default"` value for the `color` prop has been removed in favor of the new `"primary"` value.**
+
+  ```diff
+  - <Badge color="default"> Hello </Badge>
+  + <Badge color="primary"> Hello </Badge>
+  ```
+
+### Button & Link
+
+- **The `"default"` value for the `color` prop has been removed in favor of the new `"primary"` value.**
+
+  ```diff
+  - <Button color="default"> Hello </Button>
+  + <Button color="primary"> Hello </Button>
+
+  - <Link color="default" href="https://razorpay.com/"> Hello </Link>
+  + <Link color="primary" href="https://razorpay.com/"> Hello </Link>
+  ```
+
+### Card
+
+- **The `surfaceLevel` prop has been removed in favor of the new `backgroundColor` prop.**
+
+  ```diff
+  - <Card surfaceLevel={2}> Hello </Card>
+  + <Card backgroundColor="surface.background.gray.moderate"> Hello </Card>
+
+  - <Card surfaceLevel={3}> Hello </Card>
+  + <Card backgroundColor="surface.background.gray.intense"> Hello </Card>
+  ```
+
+- The `CardHeaderBadge`, `CardHeaderCounter`, `CardHeaderAmount`, `CardHeaderText`, `CardHeaderLink`, and `CardHeaderIconButton` components have the same changes as `Badge`, `Counter`, `Amount`, `Text`, `Link`, and `Button` components respectively.
+
+### Chip & ChipGroup
+
+- **The `intent` prop has been removed in favor of the `color` prop.**
+
+  ```diff
+  - <Chip intent="none"> Hello </Chip>
+  + <Chip color="primary"> Hello </Chip>
+
+  - <Chip intent="positive|negative"> Hello </Chip>
+  + <Chip color="positive|negative"> Hello </Chip>
+
+  - <ChipGroup intent="none">
+  + <ChipGroup color="primary">
+
+  - <ChipGroup intent="positive|negative">
+  + <ChipGroup color="positive|negative">
+  ```
+
+### Counter
+
+- **The `contrast` prop has been removed in favor of the new `emphasis` prop.**
+
+  ```diff
+  - <Counter contrast="low"> Hello </Counter>
+  + <Counter emphasis=”subtle”> Hello </Counter>
+
+  - <Counter contrast="high"> Hello </Counter>
+  + <Counter emphasis="intense"> Hello </Counter>
+  ```
+
+- **The `variant` prop has been removed in favor of the `color` prop.**
+
+  ```diff
+  - <Counter variant="blue"> Hello </Counter>
+  + <Counter color="primary"> Hello </Counter>
+
+  - <Counter variant="positive|negative|information|notice|neutral"> Hello </Counter>
+  + <Counter color="positive|negative|information|notice|neutral"> Hello </Counter>
+  ```
+
+- **The `intent` prop has been removed in favor of the `color` prop.**
+
+  ```diff
+  - <Counter intent="positive|negative|information|notice|neutral"> Hello </Counter>
+  + <Counter color="positive|negative|information|notice|neutral"> Hello </Counter>
+  ```
+
+- **The `"default"` value for the `color` prop has been removed in favor of the new `"primary"` value.**
+
+  ```diff
+  - <Counter color="default"> Hello </Counter>
+  + <Counter color="primary"> Hello </Counter>
+  ```
+
+### Divider
+
+- **The `"normal"` value for the `variant` prop has been updated with new styles, if you need the old styles, use the `"muted"` value.**
+
+  ```diff
+  - <Divider variant="normal"> Hello </Divider>
+  + <Divider variant="muted"> Hello </Divider>
+  ```
+
+### Dropdown
+
+- **The `onDismiss` prop has been removed in favor of the `onOpenChange` prop.**
+
+  ```diff
+  - <Dropdown onDismiss={() => console.log("Dismissed!!!)}> Hello </Dropdown>
+  + <Dropdown
+  +   onOpenChange={(isOpen) => {
+  +     if (!isOpen) {
+  +       console.log("Dismissed!!!");
+  +     }
+  +   }}
+  + >
+
+  - <Dropdown onDismiss={handleDropdownDismiss}> Hello </Dropdown>
+  + <Dropdown
+  +   onOpenChange={(isOpen) => {
+  +     if (!isOpen) {
+  +       handleDropdownDismiss();
+  +     }
+  +   }}
+  + >
+  ```
+
+### Indicator
+
+- **The `intent` prop has been removed in favor of the `color` prop.**
+
+  ```diff
+  - <Indicator intent="positive|negative|information|notice|neutral" />
+  + <Indicator color="positive|negative|information|notice|neutral" />
+
+  - <Indicator intent="positive|negative|information|notice|neutral"> Hello </Indicator>
+  + <Indicator color="positive|negative|information|notice|neutral"> Hello </Indicator>
+  ```
+
+### IconButton
+
+- **The `contrast` prop has been removed in favor of the new `emphasis` prop.**
+
+  ```diff
+  - <IconButton contrast="low"> Hello </IconButton>
+  + <IconButton emphasis="intense"> Hello </IconButton>
+
+  - <IconButton contrast="high"> Hello </IconButton>
+  + <IconButton emphasis="subtle"> Hello </IconButton>
+  ```
+
+### ProgressBar
+
+- **The `contrast` prop has been removed without replacement.**
+
+  ```diff
+  - <ProgressBar contrast="low|high" value={20} />
+  + <ProgressBar value={20} />
+  ```
+
+- **The `intent` prop has been removed in favor of the `color` prop.**
+
+  ```diff
+  - <ProgressBar intent="positive|negative|information|notice|neutral" value={20} />
+  + <ProgressBar color="positive|negative|information|notice|neutral" value={20} />
+  ```
+
+### Skeleton
+
+- **The `contrast` prop has been removed without replacement.**
+
+  ```diff
+  - <Skeleton contrast="low|high" />
+  + <Skeleton />
+  ```
+
+### Spinner
+
+- **The `contrast` prop has been removed in favor of the `color` prop.**
+
+  ```diff
+  - <Spinner contrast="low" />
+  + <Spinner color="primary" />
+
+  - <Spinner contrast="high" />
+  + <Spinner color="white" />
+  ```
+
+- **The `"default"` value for the `color` prop has been removed in favor of the new `"primary"` value.**
+
+  ```diff
+  - <Spinner color="default" />
+  + <Spinner color="primary" />
+  ```
+
+### Table
+
+- **The `surfaceLevel` prop has been removed without replacement.**
+
+  ```diff
+  - <Table data={tableData} surfaceLevel={1/2/3} >
+  + <Table data={tableData} >
+  ```
diff --git a/packages/examples/basic/src/App.tsx b/packages/examples/basic/src/App.tsx
index 6e5cde9b557..9485b1fe68f 100644
--- a/packages/examples/basic/src/App.tsx
+++ b/packages/examples/basic/src/App.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { BladeProvider, Button } from '@razorpay/blade/components';
-import { paymentTheme } from '@razorpay/blade/tokens';
+import { bladeTheme } from '@razorpay/blade/tokens';
+import '@razorpay/blade/fonts.css';
 
 function App(): React.ReactElement {
   return (
-    <BladeProvider colorScheme="light" themeTokens={paymentTheme}>
+    <BladeProvider themeTokens={bladeTheme} colorScheme="light">
       <Button onClick={() => console.log('hi')}>Hello</Button>
     </BladeProvider>
   );
diff --git a/packages/examples/with-multiple-theme-providers/src/App.tsx b/packages/examples/with-multiple-theme-providers/src/App.tsx
index c745475a573..ab292381347 100644
--- a/packages/examples/with-multiple-theme-providers/src/App.tsx
+++ b/packages/examples/with-multiple-theme-providers/src/App.tsx
@@ -1,10 +1,7 @@
 import styled, { ThemeProvider } from 'styled-components';
 import { BladeProvider, Button } from '@razorpay/blade/components';
-import { paymentTheme } from '@razorpay/blade/tokens';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/400-italic.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/700-italic.css';
+import { bladeTheme } from '@razorpay/blade/tokens';
+import '@razorpay/blade/fonts.css';
 
 import './app.css';
 
@@ -29,7 +26,7 @@ const MyButton = styled.button(({ theme }) => ({
 
 function App(): React.ReactElement {
   return (
-    <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+    <BladeProvider themeTokens={bladeTheme} colorScheme="light">
       <ThemeProvider theme={customTheme}>
         <Button onClick={() => console.log('hi')}>Hello</Button>
         <MyButton onClick={() => console.log('hi')}>World</MyButton>
diff --git a/packages/examples/with-multiple-theme-providers/src/index.css b/packages/examples/with-multiple-theme-providers/src/index.css
index 15320741a80..6992145559b 100644
--- a/packages/examples/with-multiple-theme-providers/src/index.css
+++ b/packages/examples/with-multiple-theme-providers/src/index.css
@@ -3,6 +3,4 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/examples/with-react-hook-form/src/App.tsx b/packages/examples/with-react-hook-form/src/App.tsx
index e9ba3e407ab..bdb070dcedb 100644
--- a/packages/examples/with-react-hook-form/src/App.tsx
+++ b/packages/examples/with-react-hook-form/src/App.tsx
@@ -6,11 +6,8 @@ import {
   TextArea,
   TextInput,
 } from '@razorpay/blade/components';
-import { paymentTheme } from '@razorpay/blade/tokens';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/400-italic.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/700-italic.css';
+import { bladeTheme } from '@razorpay/blade/tokens';
+import '@razorpay/blade/fonts.css';
 
 type FormFields = {
   firstName: string;
@@ -54,7 +51,7 @@ function App(): JSX.Element {
   });
 
   return (
-    <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+    <BladeProvider themeTokens={bladeTheme} colorScheme="light">
       <form onSubmit={handleSubmit((data) => console.log(data))}>
         <TextInput
           {...firstName.field}
diff --git a/packages/plugin-figma-token-publisher/src/plugin/makeColorTokens.ts b/packages/plugin-figma-token-publisher/src/plugin/makeColorTokens.ts
index 6c2726656f5..1c864f61b4b 100644
--- a/packages/plugin-figma-token-publisher/src/plugin/makeColorTokens.ts
+++ b/packages/plugin-figma-token-publisher/src/plugin/makeColorTokens.ts
@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-implicit-any-catch */
 /* eslint-disable no-template-curly-in-string */
 import setValue from '../utils/setValue';
+import { opacity as opacityTokens } from '../../../blade/src/tokens/global/opacity';
 import showNotification from './showNotification';
 
 const THEME_TOKENS_COLLECTION = 'Blade Theme Tokens';
@@ -20,21 +21,12 @@ const makeThemeTokenName = (variableName: string): string => {
     .replace(/\.[0-9]+/, (matchedString: any) => `[${matchedString.replace('.', '')}]`);
 };
 
-const rgbaToHsla = ({ r, g, b, a }: RGBA): string => {
-  const opacity = {
-    '0.00': '${opacity[0]}',
-    '0.09': '${opacity[1]}',
-    '0.10': '${opacity[1]}',
-    '0.12': '${opacity[2]}',
-    '0.18': '${opacity[3]}',
-    '0.32': '${opacity[4]}',
-    '0.48': '${opacity[5]}',
-    '0.56': '${opacity[6]}',
-    '0.64': '${opacity[7]}',
-    '0.72': '${opacity[8]}',
-    '1.00': '${opacity[9]}',
-  };
+const opacityMap = {};
+for (const [key, value] of Object.entries(opacityTokens)) {
+  opacityMap[value.toFixed(2)] = `\${opacity[${key}]}`;
+}
 
+const rgbaToHsla = ({ r, g, b, a }: RGBA): string => {
   // Find greatest and smallest channel values
   const cmin = Math.min(r, g, b);
   const cmax = Math.max(r, g, b);
@@ -72,7 +64,7 @@ const rgbaToHsla = ({ r, g, b, a }: RGBA): string => {
   s = +(s * 100).toFixed(1);
   l = +(l * 100).toFixed(1);
 
-  return `hsla(${h}, ${Math.round(s)}%, ${Math.round(l)}%, ${opacity[a.toFixed(2)]})`;
+  return `hsla(${h}, ${Math.round(s)}%, ${Math.round(l)}%, ${opacityMap[a.toFixed(2)]})`;
 };
 const makeThemeColorTokens = (): Record<string, any> => {
   const themeColorTokens = {
@@ -97,7 +89,7 @@ const makeThemeColorTokens = (): Record<string, any> => {
 
       // replace the "/" from token name with "." to store in json structure
       const tokenName = makeThemeTokenName(variable.name);
-      if (tokenName.includes('❌') || tokenName.includes('_')) {
+      if (tokenName.includes('❌') || tokenName.includes('_') || tokenName.includes('elevation')) {
         return;
       }
 
diff --git a/rfcs/2023-11-08-font-loading-strategy.md b/rfcs/2023-11-08-font-loading-strategy.md
index be839c7183f..53fdd3539b3 100644
--- a/rfcs/2023-11-08-font-loading-strategy.md
+++ b/rfcs/2023-11-08-font-loading-strategy.md
@@ -20,9 +20,9 @@ Blade Issue:
 
 ## Summary
 
-After Brand Refresh, we have 2 major fonts. `Inter` and `Tasa Orbiter`.
+After Brand Refresh, we have 2 major fonts. `Inter` and `TASA Orbiter`.
 
-So far when we had Lato, we could load it from `@fontsource/lato`. But Tasa Orbiter does not exist on fontsource and we also selectively load weights from Inter and Lato.
+So far when we had Lato, we could load it from `@fontsource/lato`. But TASA Orbiter does not exist on fontsource and we also selectively load weights from Inter and Lato.
 
 This document is created to explore and decide on what should be the font loading strategy after brand refresh
 
@@ -92,7 +92,7 @@ Our recommended font loading strategy should find a good balance between followi
 
 ```css
 @font-face {
-  font-family: 'TasaOrbiter';
+  font-family: 'TASA Orbiter';
   src: url('/fonts/TASAOrbiterVF.woff2') format('woff2-variations');
   font-weight: 125 950;
   font-stretch: 75% 125%;
@@ -151,7 +151,7 @@ import '@razorpay/blade/fonts.css';
 
 - Fonts cannot be preloaded with HTML preload in CSR apps (SSR apps can loop through their build manifest to know the font URLs and preload them if required)
 
-#### 3. Contribute Tasa Orbiter to fontsource
+#### 3. Contribute TASA Orbiter to fontsource
 
 TASA Orbiter is compatible with license requirements of fontsource. Thus we can contribute TASA Orbiter to fontsource open-source repo and then use fonts from fontsource.
 
@@ -189,7 +189,7 @@ Similar to how you install from google font, except we can have `https://cdn.raz
 
 #### 5. Load from existing third-party CDN
 
-While Inter can be loaded from [Google Fonts](https://fonts.google.com/specimen/Inter), Tasa Orbiter can be loaded from [CDNFonts](https://www.cdnfonts.com/tasa-orbiter-display.font)
+While Inter can be loaded from [Google Fonts](https://fonts.google.com/specimen/Inter), TASA Orbiter can be loaded from [CDNFonts](https://www.cdnfonts.com/tasa-orbiter-display.font)
 
 Cons from all of the above 🙈
 
@@ -213,12 +213,12 @@ The performance of variable font vs static font depends on how many weights and
 
 These are the weights and styles being used right now
 
-**Tasa Orbiter:** 400, 500, 600
+**TASA Orbiter:** 400, 500, 600
 **Inter:** 400, 500, 600
 
 **Conclusion**
 
-We'll be using variable fonts in both Tasa and Inter based on the size below-
+We'll be using variable fonts in both TASA and Inter based on the size below-
 
 |                  | **Static**                 | **Variable**                    |
 | ---------------- | -------------------------- | ------------------------------- |
@@ -233,7 +233,7 @@ We'll be using variable fonts in both Tasa and Inter based on the size below-
 
 ```css
  {
-  font-family: 'Tasa Orbiter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica
+  font-family: 'TASA Orbiter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica
       Neue, sans-serif;
 
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica
diff --git a/yarn.lock b/yarn.lock
index 93cd467ba13..44b71a75ecb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3740,6 +3740,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.16.7", "@babel/runtime@^7.20.6", "@babel/runtime@^7.5.0":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
+  integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
@@ -3754,13 +3761,6 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.5.0":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
-  integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
 "@babel/template@^7.0.0", "@babel/template@^7.12.7", "@babel/template@^7.16.0", "@babel/template@^7.3.3":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -4400,13 +4400,6 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@cspotcode/source-map-support@^0.8.0":
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
-  integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==
-  dependencies:
-    "@jridgewell/trace-mapping" "0.3.9"
-
 "@csstools/normalize.css@*":
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"
@@ -4518,7 +4511,7 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
   integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
 
-"@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3":
+"@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
@@ -4807,11 +4800,6 @@
   resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"
   integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==
 
-"@figma/plugin-typings@1.69.0":
-  version "1.69.0"
-  resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.69.0.tgz#1f3b26712af90d14175f580c794f7ebac739e48e"
-  integrity sha512-DAGuGGxM1saT8OVm7gqAldQCyRswRDWeHL/oodDQbus6jK3ypYMl722ItFxc/yWr5HDJbC3FO0u/bvxw2/xqGA==
-
 "@floating-ui/core@^1.2.6":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.2.tgz#53a0f7a98c550e63134d504f26804f6b83dbc071"
@@ -4927,6 +4915,13 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
+"@hypermod/utils@0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@hypermod/utils/-/utils-0.4.2.tgz#1d42c226d896a76806952fcb11643c34195af99b"
+  integrity sha512-ig+qNLfUBvwdoq4rkT6ezwtJuI+ZvBcEDUVk8IHAzWwTuT0dkkMy7KSKmg4kQpDOhaQS4ohAEBQpcXwEDBdrMA==
+  dependencies:
+    jscodeshift "^0.13.1"
+
 "@hypnosphi/create-react-context@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
@@ -4987,18 +4982,6 @@
     jest-util "^28.1.3"
     slash "^3.0.0"
 
-"@jest/console@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.5.0.tgz#593a6c5c0d3f75689835f1b3b4688c4f8544cb57"
-  integrity sha512-NEpkObxPwyw/XxZVLPmAGKE89IQRp4puc6IQRPru6JKd1M3fW9v1xM1AnzIJE65hbCkzQAdnL8P47e9hzhiYLQ==
-  dependencies:
-    "@jest/types" "^29.5.0"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    jest-message-util "^29.5.0"
-    jest-util "^29.5.0"
-    slash "^3.0.0"
-
 "@jest/console@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.6.2.tgz#bf1d4101347c23e07c029a1b1ae07d550f5cc541"
@@ -5057,40 +5040,6 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
-"@jest/core@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.5.0.tgz#76674b96904484e8214614d17261cc491e5f1f03"
-  integrity sha512-28UzQc7ulUrOQw1IsN/kv1QES3q2kkbl/wGslyhAclqZ/8cMdB5M68BffkIdSJgKBUt50d3hbwJ92XESlE7LiQ==
-  dependencies:
-    "@jest/console" "^29.5.0"
-    "@jest/reporters" "^29.5.0"
-    "@jest/test-result" "^29.5.0"
-    "@jest/transform" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.9"
-    jest-changed-files "^29.5.0"
-    jest-config "^29.5.0"
-    jest-haste-map "^29.5.0"
-    jest-message-util "^29.5.0"
-    jest-regex-util "^29.4.3"
-    jest-resolve "^29.5.0"
-    jest-resolve-dependencies "^29.5.0"
-    jest-runner "^29.5.0"
-    jest-runtime "^29.5.0"
-    jest-snapshot "^29.5.0"
-    jest-util "^29.5.0"
-    jest-validate "^29.5.0"
-    jest-watcher "^29.5.0"
-    micromatch "^4.0.4"
-    pretty-format "^29.5.0"
-    slash "^3.0.0"
-    strip-ansi "^6.0.0"
-
 "@jest/core@^29.6.1", "@jest/core@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.6.2.tgz#6f2d1dbe8aa0265fcd4fb8082ae1952f148209c8"
@@ -5183,16 +5132,6 @@
     "@types/node" "*"
     jest-mock "^27.5.1"
 
-"@jest/environment@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.5.0.tgz#9152d56317c1fdb1af389c46640ba74ef0bb4c65"
-  integrity sha512-5FXw2+wD29YU1d4I2htpRX7jYnAyTRjP2CsXQdo9SAM8g3ifxWPSV0HnClSn71xwctr0U3oZIIH+dtbfmnbXVQ==
-  dependencies:
-    "@jest/fake-timers" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@types/node" "*"
-    jest-mock "^29.5.0"
-
 "@jest/environment@^29.6.1":
   version "29.6.1"
   resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.6.1.tgz#ee358fff2f68168394b4a50f18c68278a21fe82f"
@@ -5244,14 +5183,6 @@
   dependencies:
     jest-get-type "^29.6.3"
 
-"@jest/expect@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.5.0.tgz#80952f5316b23c483fbca4363ce822af79c38fba"
-  integrity sha512-PueDR2HGihN3ciUNGr4uelropW7rqUfTiOn+8u0leg/42UhblPxHkfoh0Ruu3I9Y1962P3u2DY4+h7GVTSVU6g==
-  dependencies:
-    expect "^29.5.0"
-    jest-snapshot "^29.5.0"
-
 "@jest/expect@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.6.2.tgz#5a2ad58bb345165d9ce0a1845bbf873c480a4b28"
@@ -5280,18 +5211,6 @@
     jest-mock "^27.5.1"
     jest-util "^27.5.1"
 
-"@jest/fake-timers@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.5.0.tgz#d4d09ec3286b3d90c60bdcd66ed28d35f1b4dc2c"
-  integrity sha512-9ARvuAAQcBwDAqOnglWq2zwNIRUDtk/SCkp/ToGEhFv5r86K21l+VEs0qNTaXtyiY0lEePl3kylijSYJQqdbDg==
-  dependencies:
-    "@jest/types" "^29.5.0"
-    "@sinonjs/fake-timers" "^10.0.2"
-    "@types/node" "*"
-    jest-message-util "^29.5.0"
-    jest-mock "^29.5.0"
-    jest-util "^29.5.0"
-
 "@jest/fake-timers@^29.6.1":
   version "29.6.1"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.6.1.tgz#c773efddbc61e1d2efcccac008139f621de57c69"
@@ -5337,16 +5256,6 @@
     "@jest/types" "^27.5.1"
     expect "^27.5.1"
 
-"@jest/globals@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.5.0.tgz#6166c0bfc374c58268677539d0c181f9c1833298"
-  integrity sha512-S02y0qMWGihdzNbUiqSAiKSpSozSuHX5UYc7QbnHP+D9Lyw8DgGGCinrN9uSuHPeKgSSzvPom2q1nAtBvUsvPQ==
-  dependencies:
-    "@jest/environment" "^29.5.0"
-    "@jest/expect" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    jest-mock "^29.5.0"
-
 "@jest/globals@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.6.2.tgz#74af81b9249122cc46f1eb25793617eec69bf21a"
@@ -5398,36 +5307,6 @@
     terminal-link "^2.0.0"
     v8-to-istanbul "^8.1.0"
 
-"@jest/reporters@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.5.0.tgz#985dfd91290cd78ddae4914ba7921bcbabe8ac9b"
-  integrity sha512-D05STXqj/M8bP9hQNSICtPqz97u7ffGzZu+9XLucXhkOFBqKcXe04JLZOgIekOxdb73MAoBUFnqvf7MCpKk5OA==
-  dependencies:
-    "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^29.5.0"
-    "@jest/test-result" "^29.5.0"
-    "@jest/transform" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@jridgewell/trace-mapping" "^0.3.15"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.9"
-    istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^5.1.0"
-    istanbul-lib-report "^3.0.0"
-    istanbul-lib-source-maps "^4.0.0"
-    istanbul-reports "^3.1.3"
-    jest-message-util "^29.5.0"
-    jest-util "^29.5.0"
-    jest-worker "^29.5.0"
-    slash "^3.0.0"
-    string-length "^4.0.1"
-    strip-ansi "^6.0.0"
-    v8-to-istanbul "^9.0.1"
-
 "@jest/reporters@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.6.2.tgz#524afe1d76da33d31309c2c4a2c8062d0c48780a"
@@ -5525,15 +5404,6 @@
     graceful-fs "^4.2.9"
     source-map "^0.6.0"
 
-"@jest/source-map@^29.4.3":
-  version "29.4.3"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.4.3.tgz#ff8d05cbfff875d4a791ab679b4333df47951d20"
-  integrity sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==
-  dependencies:
-    "@jridgewell/trace-mapping" "^0.3.15"
-    callsites "^3.0.0"
-    graceful-fs "^4.2.9"
-
 "@jest/source-map@^29.6.0":
   version "29.6.0"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.6.0.tgz#bd34a05b5737cb1a99d43e1957020ac8e5b9ddb1"
@@ -5572,16 +5442,6 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
-"@jest/test-result@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.5.0.tgz#7c856a6ca84f45cc36926a4e9c6b57f1973f1408"
-  integrity sha512-fGl4rfitnbfLsrfx1uUpDEESS7zM8JdgZgOCQuxQvL1Sn/I6ijeAVQWGfXI9zb1i9Mzo495cIpVZhA0yr60PkQ==
-  dependencies:
-    "@jest/console" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    collect-v8-coverage "^1.0.0"
-
 "@jest/test-result@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.6.2.tgz#fdd11583cd1608e4db3114e8f0cce277bf7a32ed"
@@ -5612,16 +5472,6 @@
     jest-haste-map "^27.5.1"
     jest-runtime "^27.5.1"
 
-"@jest/test-sequencer@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.5.0.tgz#34d7d82d3081abd523dbddc038a3ddcb9f6d3cc4"
-  integrity sha512-yPafQEcKjkSfDXyvtgiV4pevSeyuA6MQr6ZIdVkWJly9vkqjnFfcfhRQqpD5whjoU8EORki752xQmjaqoFjzMQ==
-  dependencies:
-    "@jest/test-result" "^29.5.0"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^29.5.0"
-    slash "^3.0.0"
-
 "@jest/test-sequencer@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.6.2.tgz#585eff07a68dd75225a7eacf319780cb9f6b9bf4"
@@ -5684,27 +5534,6 @@
     slash "^3.0.0"
     write-file-atomic "^4.0.2"
 
-"@jest/transform@^29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.5.0.tgz#cf9c872d0965f0cbd32f1458aa44a2b1988b00f9"
-  integrity sha512-8vbeZWqLJOvHaDfeMuoHITGKSz5qWc9u04lnWrQE3VyuSw604PzQM824ZeX9XSjUCeDiE3GuxZe5UKa8J61NQw==
-  dependencies:
-    "@babel/core" "^7.11.6"
-    "@jest/types" "^29.5.0"
-    "@jridgewell/trace-mapping" "^0.3.15"
-    babel-plugin-istanbul "^6.1.1"
-    chalk "^4.0.0"
-    convert-source-map "^2.0.0"
-    fast-json-stable-stringify "^2.1.0"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^29.5.0"
-    jest-regex-util "^29.4.3"
-    jest-util "^29.5.0"
-    micromatch "^4.0.4"
-    pirates "^4.0.4"
-    slash "^3.0.0"
-    write-file-atomic "^4.0.2"
-
 "@jest/transform@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.6.2.tgz#522901ebbb211af08835bc3bcdf765ab778094e3"
@@ -5850,11 +5679,6 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
-"@jridgewell/resolve-uri@^3.0.3":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
-  integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
-
 "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
@@ -5886,15 +5710,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
-"@jridgewell/trace-mapping@0.3.9":
-  version "0.3.9"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
-  integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
-  dependencies:
-    "@jridgewell/resolve-uri" "^3.0.3"
-    "@jridgewell/sourcemap-codec" "^1.4.10"
-
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.18":
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.18":
   version "0.3.18"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
   integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
@@ -9632,26 +9448,6 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
-"@tsconfig/node10@^1.0.7":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"
-  integrity sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==
-
-"@tsconfig/node12@^1.0.7":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.11.tgz#ee3def1f27d9ed66dac6e46a295cffb0152e058d"
-  integrity sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==
-
-"@tsconfig/node14@^1.0.0":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.3.tgz#e4386316284f00b98435bf40f72f75a09dabf6c1"
-  integrity sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==
-
-"@tsconfig/node16@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.3.tgz#472eaab5f15c1ffdd7f8628bd4c4f753995ec79e"
-  integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
-
 "@types/acorn@^4.0.0":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
@@ -9713,6 +9509,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/base16@^1.0.2":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/base16/-/base16-1.0.5.tgz#9a7df8eed525c6968d254dada2a2f653a28e73f6"
+  integrity sha512-OzOWrTluG9cwqidEzC/Q6FAmIPcnZfm8BFRlIx0+UIUqnuAmi5OS88O0RpT3Yz6qdmqObvUhasrbNsCofE4W9A==
+
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
@@ -10028,14 +9829,6 @@
     jest-matcher-utils "^28.0.0"
     pretty-format "^28.0.0"
 
-"@types/jest@29.5.0":
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.0.tgz#337b90bbcfe42158f39c2fb5619ad044bbb518ac"
-  integrity sha512-3Emr5VOl/aoBwnWcH/EFQvlSAmjV+XtV9GGu5mwdYew5vhQh0IUZx/60x0TzHDu09Bi7HMx10t/namdJw5QIcg==
-  dependencies:
-    expect "^29.0.0"
-    pretty-format "^29.0.0"
-
 "@types/jest@29.5.3":
   version "29.5.3"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.3.tgz#7a35dc0044ffb8b56325c6802a4781a626b05777"
@@ -10086,6 +9879,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.194.tgz#b71eb6f7a0ff11bff59fc987134a093029258a76"
   integrity sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==
 
+"@types/lodash@^4.14.178", "@types/lodash@^4.14.191":
+  version "4.14.202"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
+  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
+
 "@types/mdast@^3.0.0":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
@@ -11209,21 +11007,6 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@webpack-cli/configtest@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-2.0.1.tgz#a69720f6c9bad6aef54a8fa6ba9c3533e7ef4c7f"
-  integrity sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==
-
-"@webpack-cli/info@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-2.0.1.tgz#eed745799c910d20081e06e5177c2b2569f166c0"
-  integrity sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==
-
-"@webpack-cli/serve@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.1.tgz#34bdc31727a1889198855913db2f270ace6d7bf8"
-  integrity sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==
-
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -11346,7 +11129,7 @@ acorn-walk@^7.1.1, acorn-walk@^7.2.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn-walk@^8.0.2, acorn-walk@^8.1.1:
+acorn-walk@^8.0.2:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
@@ -11693,11 +11476,6 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
-arg@^4.1.0:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
-  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
-
 arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@@ -12232,19 +12010,6 @@ babel-jest@^27.4.2, babel-jest@^27.5.1:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-jest@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.5.0.tgz#3fe3ddb109198e78b1c88f9ebdecd5e4fc2f50a5"
-  integrity sha512-mA4eCDh5mSo2EcA9xQjVTpmbbNk32Zb3Q3QFQsNhaK56Q+yoXowzFodLux30HRgyOho5rsQ6B0P9QpMkvvnJ0Q==
-  dependencies:
-    "@jest/transform" "^29.5.0"
-    "@types/babel__core" "^7.1.14"
-    babel-plugin-istanbul "^6.1.1"
-    babel-preset-jest "^29.5.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    slash "^3.0.0"
-
 babel-jest@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.6.2.tgz#cada0a59e07f5acaeb11cbae7e3ba92aec9c1126"
@@ -12670,6 +12435,11 @@ balanced-match@^2.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
+base16@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+  integrity sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==
+
 base64-js@^1.0.2, base64-js@^1.1.2, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -13845,7 +13615,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -13864,16 +13634,32 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.6.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color-support@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
+color@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
+  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
+  dependencies:
+    color-convert "^1.9.3"
+    color-string "^1.6.0"
+
 colord@^2.9.1:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
@@ -13884,7 +13670,7 @@ colorette@^1.0.7:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
   integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
 
-colorette@^2.0.10, colorette@^2.0.14, colorette@^2.0.19:
+colorette@^2.0.10, colorette@^2.0.19:
   version "2.0.20"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
@@ -14415,11 +14201,6 @@ create-jest@^29.7.0:
     jest-util "^29.7.0"
     prompts "^2.0.1"
 
-create-require@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
-  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
-
 crelt@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
@@ -14748,6 +14529,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.10:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 csstype@^3.0.2:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
@@ -15265,11 +15051,6 @@ diff-sequences@^29.6.3:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
   integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
 
-diff@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
-  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
-
 diff@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40"
@@ -15648,14 +15429,6 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^5.0.0:
-  version "5.13.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.13.0.tgz#26d1ecc448c02de997133217b5c1053f34a0a275"
-  integrity sha512-eyV8f0y1+bzyfh8xAwW/WTSZpLbjhqc4ne9eGSH4Zo2ejdyiNG9pU6mf9DG8a7+Auk6MFTlNOT4Y2y/9k8GKVg==
-  dependencies:
-    graceful-fs "^4.2.4"
-    tapable "^2.2.0"
-
 enhanced-resolve@^5.10.0, enhanced-resolve@^5.7.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
@@ -16866,7 +16639,7 @@ expect@^27.5.1:
     jest-matcher-utils "^27.5.1"
     jest-message-util "^27.5.1"
 
-expect@^29.0.0, expect@^29.5.0:
+expect@^29.0.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/expect/-/expect-29.5.0.tgz#68c0509156cb2a0adb8865d413b137eeaae682f7"
   integrity sha512-yM7xqUrCO2JdpFo4XpM82t+PJBFybdqoQuJLDGeDX2ij8NZzqRHyu3Hp188/JX7SWqud+7t4MUdvcgGBICMHZg==
@@ -18949,7 +18722,7 @@ idb@^7.0.1:
   resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
   integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
 
-identity-obj-proxy@3.0.0, identity-obj-proxy@^3.0.0:
+identity-obj-proxy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
   integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=
@@ -19154,11 +18927,6 @@ interpret@^2.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
-interpret@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
-  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
-
 intersection-observer@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.10.0.tgz#4d11d63c1ff67e21e62987be24d55218da1a1a69"
@@ -19263,6 +19031,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -20085,32 +19858,6 @@ jest-circus@^27.5.1:
     stack-utils "^2.0.3"
     throat "^6.0.1"
 
-jest-circus@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.5.0.tgz#b5926989449e75bff0d59944bae083c9d7fb7317"
-  integrity sha512-gq/ongqeQKAplVxqJmbeUOJJKkW3dDNPY8PjhJ5G0lBRvu0e3EWGxGy5cI4LAGA7gV2UHCtWBI4EMXK8c9nQKA==
-  dependencies:
-    "@jest/environment" "^29.5.0"
-    "@jest/expect" "^29.5.0"
-    "@jest/test-result" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    dedent "^0.7.0"
-    is-generator-fn "^2.0.0"
-    jest-each "^29.5.0"
-    jest-matcher-utils "^29.5.0"
-    jest-message-util "^29.5.0"
-    jest-runtime "^29.5.0"
-    jest-snapshot "^29.5.0"
-    jest-util "^29.5.0"
-    p-limit "^3.1.0"
-    pretty-format "^29.5.0"
-    pure-rand "^6.0.0"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
-
 jest-circus@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.6.2.tgz#1e6ffca60151ac66cad63fce34f443f6b5bb4258"
@@ -20181,24 +19928,6 @@ jest-cli@^27.5.1:
     prompts "^2.0.1"
     yargs "^16.2.0"
 
-jest-cli@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.5.0.tgz#b34c20a6d35968f3ee47a7437ff8e53e086b4a67"
-  integrity sha512-L1KcP1l4HtfwdxXNFCL5bmUbLQiKrakMUriBEcc1Vfz6gx31ORKdreuWvmQVBit+1ss9NNR3yxjwfwzZNdQXJw==
-  dependencies:
-    "@jest/core" "^29.5.0"
-    "@jest/test-result" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.9"
-    import-local "^3.0.2"
-    jest-config "^29.5.0"
-    jest-util "^29.5.0"
-    jest-validate "^29.5.0"
-    prompts "^2.0.1"
-    yargs "^17.3.1"
-
 jest-cli@^29.6.1:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.6.2.tgz#edb381763398d1a292cd1b636a98bfa5644b8fda"
@@ -20264,34 +19993,6 @@ jest-config@^27.5.1:
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
-jest-config@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.5.0.tgz#3cc972faec8c8aaea9ae158c694541b79f3748da"
-  integrity sha512-kvDUKBnNJPNBmFFOhDbm59iu1Fii1Q6SxyhXfvylq3UTHbg6o7j/g8k2dZyXWLvfdKB1vAPxNZnMgtKJcmu3kA==
-  dependencies:
-    "@babel/core" "^7.11.6"
-    "@jest/test-sequencer" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    babel-jest "^29.5.0"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    deepmerge "^4.2.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.9"
-    jest-circus "^29.5.0"
-    jest-environment-node "^29.5.0"
-    jest-get-type "^29.4.3"
-    jest-regex-util "^29.4.3"
-    jest-resolve "^29.5.0"
-    jest-runner "^29.5.0"
-    jest-util "^29.5.0"
-    jest-validate "^29.5.0"
-    micromatch "^4.0.4"
-    parse-json "^5.2.0"
-    pretty-format "^29.5.0"
-    slash "^3.0.0"
-    strip-json-comments "^3.1.1"
-
 jest-config@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.6.2.tgz#c68723f06b31ca5e63030686e604727d406cd7c3"
@@ -20460,17 +20161,6 @@ jest-each@^27.5.1:
     jest-util "^27.5.1"
     pretty-format "^27.5.1"
 
-jest-each@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.5.0.tgz#fc6e7014f83eac68e22b7195598de8554c2e5c06"
-  integrity sha512-HM5kIJ1BTnVt+DQZ2ALp3rzXEl+g726csObrW/jpEGl+CDSSQpOJJX2KE/vEg8cxcMXdyEPu6U4QX5eruQv5hA==
-  dependencies:
-    "@jest/types" "^29.5.0"
-    chalk "^4.0.0"
-    jest-get-type "^29.4.3"
-    jest-util "^29.5.0"
-    pretty-format "^29.5.0"
-
 jest-each@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.6.2.tgz#c9e4b340bcbe838c73adf46b76817b15712d02ce"
@@ -20544,18 +20234,6 @@ jest-environment-node@^29.2.1, jest-environment-node@^29.6.2:
     jest-mock "^29.6.2"
     jest-util "^29.6.2"
 
-jest-environment-node@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.5.0.tgz#f17219d0f0cc0e68e0727c58b792c040e332c967"
-  integrity sha512-ExxuIK/+yQ+6PRGaHkKewYtg6hto2uGCgvKdb2nfJfKXgZ17DfXjvbZ+jA1Qt9A8EQSfPnt5FKIfnOO3u1h9qw==
-  dependencies:
-    "@jest/environment" "^29.5.0"
-    "@jest/fake-timers" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@types/node" "*"
-    jest-mock "^29.5.0"
-    jest-util "^29.5.0"
-
 jest-environment-node@^29.6.4, jest-environment-node@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.7.0.tgz#0b93e111dda8ec120bc8300e6d1fb9576e164376"
@@ -20639,25 +20317,6 @@ jest-haste-map@^27.5.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-jest-haste-map@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.5.0.tgz#69bd67dc9012d6e2723f20a945099e972b2e94de"
-  integrity sha512-IspOPnnBro8YfVYSw6yDRKh/TiCdRngjxeacCps1cQ9cgVN6+10JUcuJ1EabrgYLOATsIAigxA0rLR9x/YlrSA==
-  dependencies:
-    "@jest/types" "^29.5.0"
-    "@types/graceful-fs" "^4.1.3"
-    "@types/node" "*"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.9"
-    jest-regex-util "^29.4.3"
-    jest-util "^29.5.0"
-    jest-worker "^29.5.0"
-    micromatch "^4.0.4"
-    walker "^1.0.8"
-  optionalDependencies:
-    fsevents "^2.3.2"
-
 jest-haste-map@^29.6.1:
   version "29.6.1"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.6.1.tgz#62655c7a1c1b349a3206441330fb2dbdb4b63803"
@@ -20756,14 +20415,6 @@ jest-leak-detector@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
-jest-leak-detector@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.5.0.tgz#cf4bdea9615c72bac4a3a7ba7e7930f9c0610c8c"
-  integrity sha512-u9YdeeVnghBUtpN5mVxjID7KbkKE1QU4f6uUwuxiY0vYRi9BUCLKlPEZfDGR67ofdFmDz9oPAy2G92Ujrntmow==
-  dependencies:
-    jest-get-type "^29.4.3"
-    pretty-format "^29.5.0"
-
 jest-leak-detector@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.6.2.tgz#e2b307fee78cab091c37858a98c7e1d73cdf5b38"
@@ -20943,15 +20594,6 @@ jest-mock@^27.0.6, jest-mock@^27.3.0, jest-mock@^27.5.1:
     "@jest/types" "^27.5.1"
     "@types/node" "*"
 
-jest-mock@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.5.0.tgz#26e2172bcc71d8b0195081ff1f146ac7e1518aed"
-  integrity sha512-GqOzvdWDE4fAV2bWQLQCkujxYWL7RxjCnj71b5VhDAGOevB3qj3Ovg26A5NI84ZpODxyzaozXLOh2NCgkbvyaw==
-  dependencies:
-    "@jest/types" "^29.5.0"
-    "@types/node" "*"
-    jest-util "^29.5.0"
-
 jest-mock@^29.6.1:
   version "29.6.1"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.6.1.tgz#049ee26aea8cbf54c764af649070910607316517"
@@ -21046,14 +20688,6 @@ jest-resolve-dependencies@^27.5.1:
     jest-regex-util "^27.5.1"
     jest-snapshot "^27.5.1"
 
-jest-resolve-dependencies@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.5.0.tgz#f0ea29955996f49788bf70996052aa98e7befee4"
-  integrity sha512-sjV3GFr0hDJMBpYeUuGduP+YeCRbd7S/ck6IvL3kQ9cpySYKqcqhdLLC2rFwrcL7tz5vYibomBrsFYWkIGGjOg==
-  dependencies:
-    jest-regex-util "^29.4.3"
-    jest-snapshot "^29.5.0"
-
 jest-resolve-dependencies@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.6.2.tgz#36435269b6672c256bcc85fb384872c134cc4cf2"
@@ -21086,21 +20720,6 @@ jest-resolve@^27.4.2, jest-resolve@^27.5.1:
     resolve.exports "^1.1.0"
     slash "^3.0.0"
 
-jest-resolve@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.5.0.tgz#b053cc95ad1d5f6327f0ac8aae9f98795475ecdc"
-  integrity sha512-1TzxJ37FQq7J10jPtQjcc+MkCkE3GBpBecsSUWJ0qZNJpmg6m0D9/7II03yJulm3H/fvVjgqLh/k2eYg+ui52w==
-  dependencies:
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^29.5.0"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^29.5.0"
-    jest-validate "^29.5.0"
-    resolve "^1.20.0"
-    resolve.exports "^2.0.0"
-    slash "^3.0.0"
-
 jest-resolve@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.6.2.tgz#f18405fe4b50159b7b6d85e81f6a524d22afb838"
@@ -21158,33 +20777,6 @@ jest-runner@^27.5.1:
     source-map-support "^0.5.6"
     throat "^6.0.1"
 
-jest-runner@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.5.0.tgz#6a57c282eb0ef749778d444c1d758c6a7693b6f8"
-  integrity sha512-m7b6ypERhFghJsslMLhydaXBiLf7+jXy8FwGRHO3BGV1mcQpPbwiqiKUR2zU2NJuNeMenJmlFZCsIqzJCTeGLQ==
-  dependencies:
-    "@jest/console" "^29.5.0"
-    "@jest/environment" "^29.5.0"
-    "@jest/test-result" "^29.5.0"
-    "@jest/transform" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    emittery "^0.13.1"
-    graceful-fs "^4.2.9"
-    jest-docblock "^29.4.3"
-    jest-environment-node "^29.5.0"
-    jest-haste-map "^29.5.0"
-    jest-leak-detector "^29.5.0"
-    jest-message-util "^29.5.0"
-    jest-resolve "^29.5.0"
-    jest-runtime "^29.5.0"
-    jest-util "^29.5.0"
-    jest-watcher "^29.5.0"
-    jest-worker "^29.5.0"
-    p-limit "^3.1.0"
-    source-map-support "0.5.13"
-
 jest-runner@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.6.2.tgz#89e8e32a8fef24781a7c4c49cd1cb6358ac7fc01"
@@ -21267,34 +20859,6 @@ jest-runtime@^27.5.1:
     slash "^3.0.0"
     strip-bom "^4.0.0"
 
-jest-runtime@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.5.0.tgz#c83f943ee0c1da7eb91fa181b0811ebd59b03420"
-  integrity sha512-1Hr6Hh7bAgXQP+pln3homOiEZtCDZFqwmle7Ew2j8OlbkIu6uE3Y/etJQG8MLQs3Zy90xrp2C0BRrtPHG4zryw==
-  dependencies:
-    "@jest/environment" "^29.5.0"
-    "@jest/fake-timers" "^29.5.0"
-    "@jest/globals" "^29.5.0"
-    "@jest/source-map" "^29.4.3"
-    "@jest/test-result" "^29.5.0"
-    "@jest/transform" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    cjs-module-lexer "^1.0.0"
-    collect-v8-coverage "^1.0.0"
-    glob "^7.1.3"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^29.5.0"
-    jest-message-util "^29.5.0"
-    jest-mock "^29.5.0"
-    jest-regex-util "^29.4.3"
-    jest-resolve "^29.5.0"
-    jest-snapshot "^29.5.0"
-    jest-util "^29.5.0"
-    slash "^3.0.0"
-    strip-bom "^4.0.0"
-
 jest-runtime@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.6.2.tgz#692f25e387f982e89ab83270e684a9786248e545"
@@ -21402,35 +20966,6 @@ jest-snapshot@^27.5.1:
     pretty-format "^27.5.1"
     semver "^7.3.2"
 
-jest-snapshot@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.5.0.tgz#c9c1ce0331e5b63cd444e2f95a55a73b84b1e8ce"
-  integrity sha512-x7Wolra5V0tt3wRs3/ts3S6ciSQVypgGQlJpz2rsdQYoUKxMxPNaoHMGJN6qAuPJqS+2iQ1ZUn5kl7HCyls84g==
-  dependencies:
-    "@babel/core" "^7.11.6"
-    "@babel/generator" "^7.7.2"
-    "@babel/plugin-syntax-jsx" "^7.7.2"
-    "@babel/plugin-syntax-typescript" "^7.7.2"
-    "@babel/traverse" "^7.7.2"
-    "@babel/types" "^7.3.3"
-    "@jest/expect-utils" "^29.5.0"
-    "@jest/transform" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@types/babel__traverse" "^7.0.6"
-    "@types/prettier" "^2.1.5"
-    babel-preset-current-node-syntax "^1.0.0"
-    chalk "^4.0.0"
-    expect "^29.5.0"
-    graceful-fs "^4.2.9"
-    jest-diff "^29.5.0"
-    jest-get-type "^29.4.3"
-    jest-matcher-utils "^29.5.0"
-    jest-message-util "^29.5.0"
-    jest-util "^29.5.0"
-    natural-compare "^1.4.0"
-    pretty-format "^29.5.0"
-    semver "^7.3.5"
-
 jest-snapshot@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.6.2.tgz#9b431b561a83f2bdfe041e1cab8a6becdb01af9c"
@@ -21615,18 +21150,6 @@ jest-validate@^29.2.1, jest-validate@^29.6.2:
     leven "^3.1.0"
     pretty-format "^29.6.2"
 
-jest-validate@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.5.0.tgz#8e5a8f36178d40e47138dc00866a5f3bd9916ffc"
-  integrity sha512-pC26etNIi+y3HV8A+tUGr/lph9B18GnzSRAkPaaZJIE1eFdiYm6/CewuiJQ8/RlfHd1u/8Ioi8/sJ+CmbA+zAQ==
-  dependencies:
-    "@jest/types" "^29.5.0"
-    camelcase "^6.2.0"
-    chalk "^4.0.0"
-    jest-get-type "^29.4.3"
-    leven "^3.1.0"
-    pretty-format "^29.5.0"
-
 jest-validate@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.7.0.tgz#7bf705511c64da591d46b15fce41400d52147d9c"
@@ -21706,20 +21229,6 @@ jest-watcher@^29.0.0, jest-watcher@^29.7.0:
     jest-util "^29.7.0"
     string-length "^4.0.1"
 
-jest-watcher@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.5.0.tgz#cf7f0f949828ba65ddbbb45c743a382a4d911363"
-  integrity sha512-KmTojKcapuqYrKDpRwfqcQ3zjMlwu27SYext9pt4GlF5FUgB+7XE1mcCnSm6a4uUpFyQIkb6ZhzZvHl+jiBCiA==
-  dependencies:
-    "@jest/test-result" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    emittery "^0.13.1"
-    jest-util "^29.5.0"
-    string-length "^4.0.1"
-
 jest-watcher@^29.6.2:
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.6.2.tgz#77c224674f0620d9f6643c4cfca186d8893ca088"
@@ -21770,16 +21279,6 @@ jest-worker@^28.0.2:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest-worker@^29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.5.0.tgz#bdaefb06811bd3384d93f009755014d8acb4615d"
-  integrity sha512-NcrQnevGoSp4b5kg+akIpthoAFHxPBcb5P6mYPY0fUNT+sSvmtu6jlkEle3anczUKIKEbMxFimk9oTP/tpIPgA==
-  dependencies:
-    "@types/node" "*"
-    jest-util "^29.5.0"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
 jest-worker@^29.6.1:
   version "29.6.1"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.6.1.tgz#64b015f0e985ef3a8ad049b61fe92b3db74a5319"
@@ -21810,16 +21309,6 @@ jest-worker@^29.7.0:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest@29.5.0:
-  version "29.5.0"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-29.5.0.tgz#f75157622f5ce7ad53028f2f8888ab53e1f1f24e"
-  integrity sha512-juMg3he2uru1QoXX078zTa7pO85QyB9xajZc6bU+d9yEGwrKX6+vGmJQ3UdVZsvTEUARIdObzH68QItim6OSSQ==
-  dependencies:
-    "@jest/core" "^29.5.0"
-    "@jest/types" "^29.5.0"
-    import-local "^3.0.2"
-    jest-cli "^29.5.0"
-
 jest@29.6.1:
   version "29.6.1"
   resolved "https://registry.yarnpkg.com/jest/-/jest-29.6.1.tgz#74be1cb719c3abe439f2d94aeb18e6540a5b02ad"
@@ -21921,7 +21410,7 @@ jsc-safe-url@^0.2.2:
   resolved "https://registry.yarnpkg.com/jsc-safe-url/-/jsc-safe-url-0.2.4.tgz#141c14fbb43791e88d5dc64e85a374575a83477a"
   integrity sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q==
 
-jscodeshift@0.13.1:
+jscodeshift@0.13.1, jscodeshift@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.13.1.tgz#69bfe51e54c831296380585c6d9e733512aecdef"
   integrity sha512-lGyiEbGOvmMRKgWk4vf+lUrCWO/8YR8sUR3FKF1Cq5fovjZDlIcw3Hu5ppLHAnEXshVffvaM0eyuY/AbOeYpnQ==
@@ -22595,6 +22084,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.curry@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+  integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -22807,7 +22301,7 @@ make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-error@1.x, make-error@^1.1.1:
+make-error@1.x:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
@@ -24090,14 +23584,6 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.0, micromatch@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
-  dependencies:
-    braces "^3.0.2"
-    picomatch "^2.3.1"
-
 micromatch@^4.0.2, micromatch@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
@@ -24106,6 +23592,14 @@ micromatch@^4.0.2, micromatch@^4.0.4:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
+micromatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -27353,6 +26847,19 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-base16-styling@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.9.1.tgz#4906b4c0a51636f2dca2cea8b682175aa8bd0c92"
+  integrity sha512-1s0CY1zRBOQ5M3T61wetEpvQmsYSNtWEcdYzyZNxKa8t7oDvaOn9d21xrGezGAHFWLM7SHcktPuPTrvoqxSfKw==
+  dependencies:
+    "@babel/runtime" "^7.16.7"
+    "@types/base16" "^1.0.2"
+    "@types/lodash" "^4.14.178"
+    base16 "^1.0.0"
+    color "^3.2.1"
+    csstype "^3.0.10"
+    lodash.curry "^4.1.1"
+
 react-colorful@^5.1.2:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784"
@@ -27507,6 +27014,15 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-json-tree@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.18.0.tgz#3c4bec7b091f50dcc9c09652d89c8f4373ebf3ea"
+  integrity sha512-Qe6HKSXrr++n9Y31nkRJ3XvQMATISpqigH1vEKhLwB56+nk5thTP0ITThpjxY6ZG/ubpVq/aEHIcyLP/OPHxeA==
+  dependencies:
+    "@babel/runtime" "^7.20.6"
+    "@types/lodash" "^4.14.191"
+    react-base16-styling "^0.9.1"
+
 react-lifecycles-compat@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -28055,13 +27571,6 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
-rechoir@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.8.0.tgz#49f866e0d32146142da3ad8f0eff352b3215ff22"
-  integrity sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==
-  dependencies:
-    resolve "^1.20.0"
-
 recursive-readdir@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372"
@@ -28950,13 +28459,6 @@ semver@7.3.8:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@7.x:
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.0.tgz#ed8c5dc8efb6c629c88b23d41dc9bf40c1d96cd0"
-  integrity sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==
-  dependencies:
-    lru-cache "^6.0.0"
-
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -29226,6 +28728,13 @@ simple-markdown@^0.7.3:
   dependencies:
     "@types/react" ">=16.0.0"
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 simple-update-notifier@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz#67694c121de354af592b347cdba798463ed49c82"
@@ -31012,20 +30521,6 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-ts-jest@29.0.5:
-  version "29.0.5"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.0.5.tgz#c5557dcec8fe434fcb8b70c3e21c6b143bfce066"
-  integrity sha512-PL3UciSgIpQ7f6XjVOmbi96vmDHUqAyqDr8YxzopDqX3kfgYtX1cuNeBjP+L9sFXi6nzsGGA6R3fP3DDDJyrxA==
-  dependencies:
-    bs-logger "0.x"
-    fast-json-stable-stringify "2.x"
-    jest-util "^29.0.0"
-    json5 "^2.2.3"
-    lodash.memoize "4.x"
-    make-error "1.x"
-    semver "7.x"
-    yargs-parser "^21.0.1"
-
 ts-jest@29.1.1:
   version "29.1.1"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.1.1.tgz#f58fe62c63caf7bfcc5cc6472082f79180f0815b"
@@ -31040,35 +30535,6 @@ ts-jest@29.1.1:
     semver "^7.5.3"
     yargs-parser "^21.0.1"
 
-ts-loader@9.4.2:
-  version "9.4.2"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.4.2.tgz#80a45eee92dd5170b900b3d00abcfa14949aeb78"
-  integrity sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==
-  dependencies:
-    chalk "^4.1.0"
-    enhanced-resolve "^5.0.0"
-    micromatch "^4.0.0"
-    semver "^7.3.4"
-
-ts-node@10.9.1:
-  version "10.9.1"
-  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"
-  integrity sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==
-  dependencies:
-    "@cspotcode/source-map-support" "^0.8.0"
-    "@tsconfig/node10" "^1.0.7"
-    "@tsconfig/node12" "^1.0.7"
-    "@tsconfig/node14" "^1.0.0"
-    "@tsconfig/node16" "^1.0.2"
-    acorn "^8.4.1"
-    acorn-walk "^8.1.1"
-    arg "^4.1.0"
-    create-require "^1.1.0"
-    diff "^4.0.1"
-    make-error "^1.1.1"
-    v8-compile-cache-lib "^3.0.1"
-    yn "3.1.1"
-
 ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@@ -31332,11 +30798,6 @@ typescript@4.9:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
-typescript@4.9.4:
-  version "4.9.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
-  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
-
 uglify-es@^3.1.9:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
@@ -31936,11 +31397,6 @@ uvu@^0.5.0, uvu@^0.5.6:
     kleur "^4.0.3"
     sade "^1.7.3"
 
-v8-compile-cache-lib@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
-  integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
-
 v8-compile-cache@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -32238,25 +31694,6 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webpack-cli@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.0.1.tgz#95fc0495ac4065e9423a722dec9175560b6f2d9a"
-  integrity sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==
-  dependencies:
-    "@discoveryjs/json-ext" "^0.5.0"
-    "@webpack-cli/configtest" "^2.0.1"
-    "@webpack-cli/info" "^2.0.1"
-    "@webpack-cli/serve" "^2.0.1"
-    colorette "^2.0.14"
-    commander "^9.4.1"
-    cross-spawn "^7.0.3"
-    envinfo "^7.7.3"
-    fastest-levenshtein "^1.0.12"
-    import-local "^3.0.2"
-    interpret "^3.1.1"
-    rechoir "^0.8.0"
-    webpack-merge "^5.7.3"
-
 webpack-dev-middleware@^3.7.3:
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz#0639372b143262e2b84ab95d3b91a7597061c2c5"
@@ -32356,14 +31793,6 @@ webpack-manifest-plugin@^4.0.2:
     tapable "^2.0.0"
     webpack-sources "^2.2.0"
 
-webpack-merge@^5.7.3:
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
-  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
-  dependencies:
-    clone-deep "^4.0.1"
-    wildcard "^2.0.0"
-
 webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
@@ -32461,36 +31890,6 @@ webpack@5, webpack@^5.64.4:
     watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
-webpack@5.76.0:
-  version "5.76.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.76.0.tgz#f9fb9fb8c4a7dbdcd0d56a98e56b8a942ee2692c"
-  integrity sha512-l5sOdYBDunyf72HW8dF23rFtWq/7Zgvt/9ftMof71E/yUb1YLOBmTgA2K4vQthB3kotMrSj609txVE0dnr2fjA==
-  dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^0.0.51"
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/wasm-edit" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-    acorn "^8.7.1"
-    acorn-import-assertions "^1.7.6"
-    browserslist "^4.14.5"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.10.0"
-    es-module-lexer "^0.9.0"
-    eslint-scope "5.1.1"
-    events "^3.2.0"
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
-    json-parse-even-better-errors "^2.3.1"
-    loader-runner "^4.2.0"
-    mime-types "^2.1.27"
-    neo-async "^2.6.2"
-    schema-utils "^3.1.0"
-    tapable "^2.1.1"
-    terser-webpack-plugin "^5.1.3"
-    watchpack "^2.4.0"
-    webpack-sources "^3.2.3"
-
 "webpack@>=4.43.0 <6.0.0":
   version "5.89.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.89.0.tgz#56b8bf9a34356e93a6625770006490bf3a7f32dc"
@@ -32765,11 +32164,6 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
-wildcard@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
-  integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
-
 word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
@@ -33267,11 +32661,6 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-yn@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
-  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"